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 • 2.63 kB
Source Map (JSON)
{"version":3,"sources":["components/data-table/table-body.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C;;;GAGG;AACH,cACM,WAAY,SAAQ,UAAU;IAClC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAmB;IAEpC;;OAEG;IACH,OAAO,CAAC,YAAY;IAWpB;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAEvB;IAEF;;OAEG;IAEH,WAAW,qBAA8B;IAEzC,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAMzB,MAAM;IAON,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC","file":"table-body.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 { html, property, query, customElement, LitElement } from 'lit-element';\nimport { TABLE_COLOR_SCHEME } from './table';\nimport BXTableRow from './table-row';\nimport styles from './data-table.scss';\n\nconst { prefix } = settings;\n\n/**\n * Data table body.\n * @element bx-table-body\n */\n@customElement(`${prefix}-table-body`)\nclass BXTableBody extends LitElement {\n /**\n * The `<slot>` element in the shadow DOM.\n */\n @query('slot')\n private _slotNode!: HTMLSlotElement;\n\n /**\n * Updates `even`/`odd` properties of the child `<bx-table-row>`s.\n */\n private _updateZebra() {\n const { colorScheme, _slotNode: slotNode } = this;\n slotNode.assignedNodes().forEach(node => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const odd = (node as HTMLElement).matches('*:nth-of-type(odd)');\n (node as BXTableRow).even = colorScheme === TABLE_COLOR_SCHEME.ZEBRA && !odd;\n (node as BXTableRow).odd = colorScheme === TABLE_COLOR_SCHEME.ZEBRA && odd;\n }\n });\n }\n\n /**\n * Handles `slotchange` event in the `<slot>` element in the shadow DOM.\n */\n private _handleSlotChange = () => {\n this._updateZebra();\n };\n\n /**\n * The color scheme.\n */\n @property({ reflect: true, attribute: 'color-scheme' })\n colorScheme = TABLE_COLOR_SCHEME.REGULAR;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'rowgroup');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('colorScheme')) {\n this._updateZebra();\n }\n }\n\n render() {\n const { _handleSlotChange: handleSlotChange } = this;\n return html`\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n `;\n }\n\n static styles = styles;\n}\n\nexport default BXTableBody;\n"]}