carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 3.01 kB
Source Map (JSON)
{"version":3,"sources":["components/structured-list/structured-list.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQxE;;;GAGG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;;OAGG;IAEH,aAAa,SAAM;IAEnB,gBAAgB;IAIhB,iBAAiB;IAOjB,YAAY,CAAC,iBAAiB,KAAA;IAU9B,MAAM;IAWN;;OAEG;IACH,MAAM,CAAC,sBAAsB,SAAwE;IAErG,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"structured-list.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport BXStructuredListRow from './structured-list-row';\nimport styles from './structured-list.scss';\n\nconst { prefix } = settings;\n\n/**\n * Structured list wrapper.\n * @element bx-structured-list\n */\n@customElement(`${prefix}-structured-list`)\nclass BXStructuredList extends FocusMixin(LitElement) {\n /**\n * The `name` attribute for the `<input>` for selection.\n * If present, this structured list will be a selectable one.\n */\n @property({ attribute: 'selection-name' })\n selectionName = '';\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'table');\n }\n super.connectedCallback();\n }\n\n shouldUpdate(changedProperties) {\n if (changedProperties.has('selectionName')) {\n // Propagate `selectionName` attribute to descendants until `:host-context()` gets supported in all major browsers\n forEach(this.querySelectorAll((this.constructor as typeof BXStructuredList).selectorRowsWithHeader), elem => {\n (elem as BXStructuredListRow).selectionName = this.selectionName;\n });\n }\n return true;\n }\n\n render() {\n const { selectionName } = this;\n const classes = classMap({\n [`${prefix}--structured-list`]: true,\n [`${prefix}--structured-list--selection`]: Boolean(selectionName),\n });\n return html`\n <section id=\"section\" class=${classes}><slot></slot></section>\n `;\n }\n\n /**\n * The CSS selector to find the rows, including header rows.\n */\n static selectorRowsWithHeader = `${prefix}-structured-list-row,${prefix}-structured-list-header-row`;\n\n static styles = styles;\n}\n\nexport default BXStructuredList;\n"]}