{"version":3,"file":"outline-list.js","sources":["../../../../src/components/base/outline-list/outline-list.ts"],"sourcesContent":["import { CSSResultGroup, TemplateResult, html } from 'lit';\nimport { OutlineElement } from '../outline-element/outline-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport componentVars from './css-variables/vars-list.css.lit';\nimport componentStyles from './outline-list.css.lit';\nimport '../outline-link/outline-link';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport const listTypes = ['ol', 'ul', 'div'] as const;\n\nexport type ListType = typeof listTypes[number];\n\nexport const listOrientations = ['column', 'row', 'col-center'] as const;\n\nexport type ListOrientation = typeof listOrientations[number];\n\nexport type ClassInfo = { [name: string]: string | boolean | number };\n\n/**\n * The OutlineList component\n * @element outline-list\n * @extends OutlineElement\n *\n * @cssprop --outline-list-default-spacing - The default spacing between items.\n * @cssprop --outline-list-default-spacing-xs - The default spacing between items for extra small screens.\n * @cssprop --outline-list-default-spacing-sm - The default spacing between items for small screens.\n * @cssprop --outline-list-default-spacing-md - The default spacing between items for medium screens.\n * @cssprop --outline-list-default-spacing-lg - The default spacing between items for large screens.\n * @cssprop --outline-list-default-spacing-xl - The default spacing between items for extra large screens.\n * @cssprop --outline-list-default-spacing-xxl - The default spacing between items for extra extra large screens.\n * @cssprop --outline-list-default-spacing-xxxl - The default spacing between items for extra extra extra large screens.\n *\n * @slot default slot.\n * @slot heading: for content above the default slot.\n * @slot footer: for content below the default slot.\n */\n@customElement('outline-list')\nexport class OutlineList extends OutlineElement {\n static styles: CSSResultGroup = [componentVars, componentStyles];\n\n /**\n * Determines which type of list is rendered.\n * ol | ul | div\n */\n @property({ type: String, attribute: 'list-type' })\n listType: ListType;\n\n /**\n * Sets orientation of list.\n * column | row\n */\n @property({ type: String })\n orientation: ListOrientation = 'column';\n\n /**\n * If set will wrap list in a nav tag\n * with the passed string set as the aria-label.\n */\n @property({ type: String, attribute: 'nav-label' })\n navLabel: string | undefined;\n\n render(): TemplateResult {\n const classes = {\n list: true,\n [`${this.orientation}`]: this.orientation,\n };\n\n return this.navLabel\n ? html`\n \n \n \n `\n : html`\n ${this.listCase(classes)}\n `;\n }\n\n listCase(classes: ClassInfo) {\n switch (this.listType) {\n case 'ol':\n return html`\n \n \n \n `;\n case 'ul':\n return html`\n