npm - q2-tecton-elements - Versions diffs - 1.63.0 → 1.63.1 - Mend

q2-tecton-elements 1.63.0 → 1.63.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/q2-tecton-elements/q2-data-table.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2DataTableCss","Q2DataTable","constructor","hostRef","this","allRowsSelected","checkSlotCount","hasDropdowns","hasExpandableRows","hasRowData","serializedHeaders","serializedRows","someRowsSelected","emptyIcon","emptyMessage","selectMode","checkSlots","_b","_a","hostElement","querySelector","_d","_c","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeader","undefined","sortRows","expanded","toggleEvent","toggle","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","serializedCells","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","selectableHandler","selectAllRows","numberOfColumns","sortedRows","a","b","aValue","bValue","render","caption","h","class","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","cell","includes","valueAsInt","parseFloat","theme","status","size","valueAsString","label","loc","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","join","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","index","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n --comp-select-column-width: #{var-list(\n --tct-data-table-select-column-width,\n --tct-table-select-column-width,\n --tct-checkbox-size,\n 20px\n )};\n --comp-dropdown-column-width: #{var-list(\n --tct-data-table-dropdown-column-width,\n --tct-table-dropdown-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n --comp-expandable-row-control-column-width: #{var-list(\n --tct-data-table-expandable-row-control-column-width,\n --tct-table-expandable-row-control-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n\n overflow: auto;\n @include tiny-scrollbar();\n\n :host([shadowed]:not([shadowed='false'])) & {\n box-shadow: var-list(\n --tct-data-table-shadow,\n --tct-table-shadow,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n }\n\n :host([density='compact']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-compact,\n --tct-table-cell-padding-compact,\n --app-scale-1x,\n 5px\n )};\n }\n\n :host([density='comfortable']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-comfortable,\n --tct-table-cell-padding-comfortable,\n --app-scale-5x,\n 25px\n )};\n }\n}\n\ntable {\n table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n border-collapse: collapse;\n border-spacing: 0;\n width: var-list(--tct-data-table-width, --tct-table-width);\n min-width: 100%;\n background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n backdrop-filter: var-list(--tct-data-table-backdrop-filter, none);\n caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n &.select-column {\n width: var(--comp-select-column-width);\n }\n\n &.expandable-row-control-column {\n width: var(--comp-expandable-row-control-column-width);\n }\n\n &.dropdown-column {\n width: var(--comp-dropdown-column-width);\n }\n\n :host(:is([bordered='vertical'], [bordered='grid'])) & {\n border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n border-style: var-list(--tct-data-table-column-border-style, solid);\n border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n &:last-child {\n border: none;\n }\n }\n}\n\ntd,\nth {\n padding: var(--comp-cell-padding);\n text-align: start;\n vertical-align: middle;\n\n &.align-end {\n text-align: end;\n }\n &.align-center {\n text-align: center;\n }\n &.vertical-align-top {\n vertical-align: top;\n }\n &.vertical-align-bottom {\n vertical-align: bottom;\n }\n}\n\nth {\n .header-content {\n font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n }\n\n &.sorted {\n .header-content {\n font-weight: var-list(\n --tct-data-table-header-sorted-font-weight,\n --tct-table-header-sorted-font-weight,\n 600\n );\n }\n }\n\n .sorted-indicator {\n --comp-header-sortable-icon-size: #{var-list(\n --tct-data-table-header-sortable-icon-size,\n --tct-table-header-sortable-icon-size,\n --app-scale-3x,\n 15px\n )};\n --tct-icon-stroke-width: 2;\n\n width: var(--comp-header-sortable-icon-size);\n height: var(--comp-header-sortable-icon-size);\n\n &.direction-ASC {\n transform: rotate(180deg);\n }\n }\n\n q2-btn {\n .header-content {\n display: flex;\n align-items: center;\n gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n }\n }\n}\n\ntr {\n &.expandable,\n &.clickable {\n cursor: pointer;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n &.expandable {\n --tct-btn-icon-hover-background: transparent;\n &:hover {\n background: var-list(--tct-data-table-expandable-row-hover-background --t-gray-14, #f2f2f2);\n }\n }\n\n &.striped-even {\n background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-even-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-even-hover-background,\n --tct-data-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n }\n &.striped-odd {\n background: var-list(--tct-data-table-row-odd-background, transparent);\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-odd-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-odd-hover-background,\n --tct-data-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n }\n\n &.clickable {\n &:hover {\n background: var-list(\n --tct-data-table-clickable-row-hover-background,\n --tct-table-clickable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.selected {\n background: var-list(\n --tct-data-table-selected-row-background,\n --tct-table-selected-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .toggle-expandable-row {\n transform: rotate(180deg);\n }\n }\n\n :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n tbody\n & {\n border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n }\n\n &.loading-row {\n background: var-list(\n --tct-data-table-loading-row-background,\n --tct-table-loading-row-background,\n --t-base,\n #ffffff\n );\n td {\n text-align: center;\n }\n\n q2-loading {\n font-size: 4em;\n }\n }\n\n &.empty-state {\n background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n td {\n text-align: center;\n }\n .empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: var(--app-scale-10x, 50px);\n padding-bottom: var(--app-scale-10x, 50px);\n gap: var(--app-scale-4x, 20px);\n --tct-icon-size: var(--app-scale-6x, 30px);\n }\n }\n\n &.expandable-row {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .striped-odd + & {\n background: var-list(\n --tct-data-table-expanded-row-odd-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n\n .striped-even + & {\n background: var-list(\n --tct-data-table-expanded-row-even-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n }\n}\n\ntd {\n &.clamped {\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: var(--comp-line-clamp-count, 1);\n -webkit-box-orient: vertical;\n }\n }\n\n &.expandable-row-control-column {\n --tct-btn-icon-hover-bg: transparent;\n padding: var-list(\n --tct-data-table-expandable-row-control-column-padding,\n --tct-table-expandable-row-control-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.dropdown-column {\n padding: var-list(\n --tct-data-table-dropdown-column-padding,\n --tct-table-dropdown-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.click-column:not(.sr) {\n padding: var-list(\n --tct-data-table-clickable-column-padding,\n --tct-table-clickable-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n}\n\ncaption {\n padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n padding: 0;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Event,\n Element,\n EventEmitter,\n Fragment,\n Listen,\n Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' \| 'center' \| 'end';\n\nexport type Q2DataTableCellType =\n \| {\n // defines the type of cell\n type?: 'text' \| 'number' \| 'icon' \| 'boolean' \| 'code';\n }\n \| {\n // when type='badge'\n type?: 'badge';\n badgeStatus?: HTMLQ2BadgeElement['status'];\n badgeTheme?: HTMLQ2BadgeElement['theme'];\n };\n\nexport type Q2DataTableHeader = {\n title: string;\n align?: Q2DataTableCellAlignOptions;\n // Will be autogenerated from the title if not provided\n // The key is used to grab the data from the row data\n key?: string;\n // Enables sorting for this column when true\n // Manual will prevent automatic sorting and updating of the sorting indicators in the header\n sortable?: boolean \| 'auto' \| 'manual';\n width?: string;\n // defines background for the column\n backgroundColor?: string;\n sorted?: 'ASC' \| 'DESC';\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n value: string \| number \| boolean;\n align?: Q2DataTableCellAlignOptions;\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n id: string \| number;\n selected?: boolean;\n expanded?: boolean;\n disabled?: boolean;\n};\n\nexport type Q2DataTableCells = Record<string, string \| number \| Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n cells: Q2DataTableSerializedCells;\n};\n\n/*\n @slot row-<id>-cell-<key> - A slot for overriding the content of any cell in any row of the table with custom content.\n * @slot header-cell-<key> - A slot for the content of any cell in the header of the table.\n * @slot row-<id>-dropdown - A slot to provide a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) for a row.\n * @slot row-<id>-expandable-content - A slot that makes the row expandable and displays the provided content.\n * @slot empty-table - An optional slot to display custom content when the table is empty.\n /\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n allRowsSelected: boolean = false;\n\n @State()\n checkSlotCount: number = 0;\n\n @State()\n hasDropdowns: boolean = false;\n\n @State()\n hasExpandableRows: boolean = false;\n\n @State()\n hasRowData: boolean = false;\n\n @State()\n serializedHeaders: Q2DataTableHeader[] = [];\n\n @State()\n serializedRows: Q2DataTableSerializedRow[] = [];\n\n @State()\n someRowsSelected: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Adds borders between rows and/or columns in the table. /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean \| 'horizontal' \| 'vertical' \| 'grid';\n\n /* Provides a caption for the data table. /\n @Prop({ mutable: true })\n caption: string;\n\n /* Adds the ability to click a row and have the table emit an event with the selected row's data. /\n @Prop({ mutable: true, reflect: true })\n clickable: boolean;\n\n /* Determines the amount of padding for each of the cells in the table. /\n @Prop({ mutable: true, reflect: true })\n density: 'compact' \| 'normal' \| 'comfortable';\n\n /* Determines the `q2-icon` that will display when `rows` has no value. /\n @Prop({ reflect: true })\n emptyIcon: string = 'inbox';\n\n /* Determines the message that will display when `rows` has no value.\n * @localizable\n /\n @Prop({ reflect: true })\n emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n /\n Defines the headers of the table.\n \n Example:\n * @snippet\n * element.headers = [\n * {\n * title: 'Day of the Week',\n * key: 'day',\n * },\n * {\n * title: 'Sales',\n * key: 'sales',\n * align: 'end',\n * }\n * ]\n \n /\n @Prop({ mutable: true })\n headers: Q2DataTableHeader[];\n\n /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. /\n @Prop({ mutable: true, reflect: true })\n hideCaption: boolean;\n\n /\n Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n \n @info\n * Use of this property requires `clickable` to be set to `true`.\n /\n @Prop({ mutable: true })\n hideClickable: boolean;\n\n /* Displays a loading state on the table to indicate background activity. /\n @Prop({ mutable: true, reflect: true })\n loading: boolean;\n\n /\n Defines the rows of the table.\n \n Example:\n * @snippet\n * element.rows = [\n * {\n * id: 1,\n * cells: {\n * day: 'Monday',\n * sales: 93\n * }\n * },\n * {\n * id: 2,\n * cells: {\n * day: 'Tuesday',\n * sales: 127\n * }\n * },\n * {\n * id: 3,\n * cells: {\n * day: 'Wednesday',\n * sales: 121\n * }\n * ]\n /\n @Prop({ mutable: true })\n rows: Q2DataTableRow[];\n\n /* Adds a checkbox to each row of the table making it selectable. /\n @Prop({ mutable: true, reflect: true })\n selectable: boolean;\n\n /\n Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n * See the documentation on the `select` event for how to handle selections.\n \n @warning\n * Use of this property requires `selectable` to be set to `true`.\n /\n @Prop({ mutable: true })\n selectMode: 'multiple' \| 'single' = 'multiple';\n\n /* Adds a shadow to the table /\n @Prop({ mutable: true, reflect: true })\n shadowed: boolean;\n\n /* Enables alternating background colors for the table rows /\n @Prop({ reflect: true })\n striped: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a row is clicked.\n \n Requires the `clickable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default click behavior.\n /\n @Event()\n click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n /\n Emitted when a row is selected.\n \n Requires the `selectable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default selection behavior.\n /\n @Event()\n select: EventEmitter<{\n row: Q2DataTableSerializedRow;\n rows: Q2DataTableSerializedRow[];\n allSelected: boolean;\n }>;\n\n /\n Emitted when the select-all checkbox is toggled.\n \n Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n \n Call `event.preventDefault()` to prevent the default behavior.\n /\n @Event()\n selectAllRows: EventEmitter<{ checked: boolean }>;\n\n /\n Emitted when a column is sorted.\n \n Requires the `sortable` prop to be set to `true` on the column.\n \n Call `event.preventDefault()` to prevent the default sorting behavior.\n /\n @Event()\n sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' \| 'DESC' }>;\n\n /\n Emitted when an expandable row is toggled.\n \n Requires content in the `row-{id}-expandable-content` slot.\n \n Call `event.preventDefault()` to prevent the default toggling behavior.\n /\n @Event()\n toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n }\n }\n\n componentWillLoad() {\n this.headersHandler(this.headers);\n this.rowsHandler(this.rows);\n }\n\n componentDidLoad(): void {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => this.checkSlots());\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => resizeIframe());\n this.resizeObserver.observe(this.hostElement);\n }\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onClickListener(event: MouseEvent) {\n if (event instanceof PointerEvent) event.stopImmediatePropagation();\n }\n\n @Listen('selectAllRows')\n onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n event.stopPropagation();\n const { checked } = event.detail;\n const selectedRows = checked\n ? this.serializedRows.map(row => {\n if (row.disabled) {\n return row;\n } else {\n return {\n ...row,\n selected: checked,\n };\n }\n })\n : [];\n const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.disabled) return row;\n row.selected = checked;\n return row;\n });\n this.allRowsSelected = checked;\n this.someRowsSelected = false;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to click a row that accepts a row ID that is will be clicked.\n \n @testOnly\n /\n @Method()\n async clickRow(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method that returns the plain text value of a particular cell (including slot content).\n \n @testOnly\n /\n @Method()\n async getCellContent(rowId: number \| string, columnKey: string) {\n const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n const text = this.hostElement.shadowRoot.querySelector(\n `slot[name=row-${rowId}-cell-${columnKey}]`\n )?.textContent;\n return slotContent \|\| text \|\| '';\n }\n\n /\n A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n \n @testOnly\n /\n @Method()\n async sortColumn(header: Q2DataTableHeader) {\n const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n \n @testOnly\n /\n @Method()\n async toggleRowExpansion(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n \n @testOnly\n /\n @Method()\n async toggleRowSelect(rowId: number \| string) {\n const chk = this.hostElement.shadowRoot.querySelector(\n `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n );\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n /\n A method to toggle select all button (checkbox) on left top corner.\n \n @testOnly\n */\n @Method()\n async toggleSelectAllRows() {\n if (!this.selectable) return;\n const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('headers')\n headersHandler(headers: Q2DataTableHeader[] = []) {\n this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n const { title } = header;\n let { key } = header;\n\n // If no key is provided, generate one from the title\n if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n return {\n key,\n ...header,\n };\n });\n }\n\n @Watch('rows')\n rowsHandler(rows: Q2DataTableRow[] = []) {\n const { serializedHeaders, mappedHeaders } = this;\n const defaultRow = {\n id: null,\n cells: {},\n selected: false,\n expanded: false,\n disabled: false,\n };\n\n // tracks if the select-all checkbox should be visually updated as the `rows` are built\n let isAllSelected = true;\n let isIndeterminate = false;\n\n const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {\n const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n (accum, [cellKey, cellData]) => {\n const header = mappedHeaders[cellKey] \|\| ({} as Q2DataTableHeader);\n const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n const isBadge = 'type' in header && header.type === 'badge';\n const defaultCell: Q2DataTableCell = {\n value: '',\n ariaLabel: undefined,\n type,\n align,\n lineClamp,\n verticalAlign,\n badgeStatus: isBadge ? header.badgeStatus : undefined,\n badgeTheme: isBadge ? header.badgeTheme : undefined,\n };\n\n const result: Q2DataTableCell =\n typeof cellData === 'object'\n ? { ...defaultCell, ...cellData }\n : { ...defaultCell, value: cellData };\n\n accum[cellKey] = result;\n return accum;\n },\n {}\n );\n\n if (isAllSelected && !selected) isAllSelected = false;\n if (!isAllSelected && selected) isIndeterminate = true;\n return {\n ...defaultRow,\n id,\n selected: !!selected,\n expanded: !!expanded,\n disabled: !!disabled,\n cells: serializedCells,\n };\n });\n\n const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n this.hasRowData = !!rows.length;\n this.allRowsSelected = this.hasRowData && isAllSelected;\n this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n this.checkSlots();\n }\n\n @Watch('selectable')\n selectableHandler() {\n if (this.selectable === false) {\n this.selectAllRows.emit({ checked: false });\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get mappedHeaders() {\n return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n accum[header.key] = header;\n return accum;\n }, {});\n }\n\n get numberOfColumns() {\n return (\n (this.serializedHeaders?.length ?? 0) +\n (this.selectable ? 1 : 0) +\n (this.clickable ? 1 : 0) +\n (this.hasExpandableRows ? 1 : 0) +\n (this.hasDropdowns ? 1 : 0)\n );\n }\n\n get selectedRow() {\n return this.selectedRows.find(({ selected }) => !!selected);\n }\n\n get selectedRows() {\n return this.serializedRows.filter(({ selected }) => selected);\n }\n\n checkSlots = () => {\n this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n // The booleans above may not change, even if the slot has content\n // So we increment this property to force a re-render and ensure proper rendering\n this.checkSlotCount += 1;\n };\n\n onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n this.click.emit({ row });\n };\n\n onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n if (this.clickable) {\n this.onClickRow(event, row);\n } else if (this.hasExpandableRows) {\n this.onToggleRow(event, row);\n }\n };\n\n onControlContainerClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;\n const { checked } = event.detail;\n\n const selectedRow = { ...row, selected: checked };\n let selectedRows;\n if (selectMode === 'single') {\n selectedRows = checked ? [selectedRow] : [];\n } else {\n selectedRows = checked\n ? [...currentlySelectedRows, selectedRow]\n : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n }\n\n const allRowsSelected = selectedRows.length === serializedRows.length;\n const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n this.allRowsSelected = allRowsSelected;\n this.someRowsSelected = isIndeterminate;\n };\n\n onSort = (header: Q2DataTableHeader) => {\n const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n const sortKey = header.key;\n const sortEvent = this.sort.emit({ header, direction });\n if (sortEvent.defaultPrevented) return;\n\n const shouldAutoSort = header.sortable !== 'manual';\n if (!shouldAutoSort) return;\n\n this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n const sorted = sortKey === serializedHeader.key ? direction : undefined;\n return { ...serializedHeader, sorted };\n });\n\n this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n };\n\n onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const selectedRow = { ...row, expanded: !row.expanded };\n const toggleEvent = this.toggle.emit({ row: selectedRow });\n if (toggleEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.id === selectedRow.id) return selectedRow;\n else return { ...row };\n });\n };\n\n sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n const { key, sorted } = header;\n const direction = sorted \|\| 'ASC';\n\n const sortedRows = [...rows].sort((a, b) => {\n const aValue = a.cells[key].value;\n const bValue = b.cells[key].value;\n\n if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n return 0;\n });\n\n return sortedRows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { caption } = this;\n return (\n <div class=\"container\">\n <table>\n {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n {this.renderTableColGroup()}\n {this.renderTableHeader()}\n {this.renderEmptyState()}\n {this.renderTableRows()}\n </table>\n </div>\n );\n }\n\n renderCellContent(cell: Q2DataTableCell) {\n if (!cell) return;\n\n const { type, ariaLabel, value } = cell;\n\n if ([undefined, null].includes(value)) return;\n\n switch (type) {\n case 'badge':\n let valueAsInt;\n switch (typeof value) {\n case 'string':\n valueAsInt = parseFloat(value);\n break;\n\n case 'boolean':\n valueAsInt = value ? 1 : 0;\n break;\n\n default:\n valueAsInt = value;\n break;\n }\n\n return (\n <q2-badge\n aria-label={ariaLabel}\n value={valueAsInt}\n theme={cell.badgeTheme}\n status={cell.badgeStatus}\n size=\"large\"\n ></q2-badge>\n );\n\n case 'icon':\n const valueAsString = typeof value === 'string' ? value : `${value}`;\n return (\n <q2-icon\n label={ariaLabel}\n type={valueAsString}\n ></q2-icon>\n );\n\n case 'boolean':\n return !!value ? (\n <q2-icon\n label={loc('tecton.element.dataTable.booleanTrue')}\n type=\"checkmark\"\n ></q2-icon>\n ) : (\n <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n );\n\n case 'code':\n return <code aria-label={ariaLabel}>{value}</code>;\n\n default:\n return <div aria-label={ariaLabel}>{value}</div>;\n }\n }\n\n renderEmptyState() {\n const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n if (hasRowData \|\| loading) return null;\n\n return (\n <tbody>\n <tr class=\"empty-state\">\n <td colSpan={numberOfColumns}>\n <slot name=\"empty-table\">\n <div class=\"empty-state-content\">\n <q2-icon type={emptyIcon}></q2-icon>\n <p>{loc(emptyMessage)}</p>\n </div>\n </slot>\n </td>\n </tr>\n </tbody>\n );\n }\n\n renderTableColGroup() {\n const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n if (!headers.length) return null;\n\n return (\n <colgroup>\n {selectable && <col class=\"select-column\" />}\n {headers.map(({ width, backgroundColor }) => (\n <col style={{ width, backgroundColor }} />\n ))}\n {clickable && <col class=\"click-column\" />}\n {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n {hasDropdowns && <col class=\"dropdown-column\" />}\n </colgroup>\n );\n }\n\n renderTableHeader() {\n const {\n serializedHeaders: headers,\n selectable,\n clickable,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n allRowsSelected,\n someRowsSelected,\n hasRowData,\n loading,\n } = this;\n\n if (!headers.length) return null;\n\n return (\n <thead>\n <tr>\n {selectable && (\n <th>\n {selectMode === 'multiple' && (\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectAllRows')}\n hide-label\n onChange={() => this.selectAllRows.emit({ checked: !allRowsSelected })}\n checked={hasRowData && allRowsSelected && !someRowsSelected}\n indeterminate={hasRowData && someRowsSelected && !allRowsSelected}\n disabled={loading \|\| !hasRowData}\n test-id=\"select-all-rows-control\"\n ></q2-checkbox>\n )}\n </th>\n )}\n {headers.map(header => {\n const { align, sorted, verticalAlign } = header;\n const headerClasses = [];\n if (align) headerClasses.push(`align-${align}`);\n if (verticalAlign) headerClasses.push(`vertical-align-${verticalAlign}`);\n if (!!sorted) headerClasses.push('sorted');\n return (\n <th\n class={headerClasses.join(' ')}\n id={`header-${header.key}`}\n >\n {header.sortable ? (\n <q2-btn\n onClick={() => this.onSort(header)}\n test-id=\"sort-control\"\n disabled={this.loading}\n >\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n\n {!!sorted ? (\n <q2-icon\n class={`sorted-indicator direction-${sorted}`}\n type=\"arrow-down\"\n label={\n sorted === 'ASC'\n ? loc('tecton.element.dataTable.sortedAscending')\n : loc('tecton.element.dataTable.sortedDescending')\n }\n test-id=\"sorted-indicator\"\n ></q2-icon>\n ) : (\n <q2-icon\n class={`sorted-indicator`}\n type=\"sort\"\n label={loc('tecton.element.dataTable.clickToSort')}\n test-id=\"sorted-indicator\"\n ></q2-icon>\n )}\n </div>\n </q2-btn>\n ) : (\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n </div>\n )}\n </th>\n );\n })}\n {clickable && (\n <th\n id=\"click\"\n class={hideClickable ? 'sr' : undefined}\n >\n <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n </th>\n )}\n {hasExpandableRows && (\n <th id=\"toggle\">\n <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n </th>\n )}\n {hasDropdowns && (\n <th>\n <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n </th>\n )}\n </tr>\n </thead>\n );\n }\n\n renderTableRows() {\n const {\n serializedHeaders: headers,\n serializedRows: rows,\n selectable,\n clickable,\n striped,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n numberOfColumns,\n loading,\n } = this;\n\n if (loading) {\n return (\n <tbody>\n <tr class=\"loading-row\">\n <td colSpan={numberOfColumns}>\n <q2-loading inline></q2-loading>\n </td>\n </tr>\n </tbody>\n );\n }\n\n let isSelectDisabled = false;\n let selectedRow;\n if (selectMode === 'single') {\n selectedRow = this.selectedRow;\n isSelectDisabled = !!selectedRow;\n }\n const clickableClasses = [];\n if (clickable) clickableClasses.push('click-column');\n if (hideClickable) clickableClasses.push('sr');\n const clickableClassString = clickableClasses.join(' ');\n\n return (\n <tbody>\n {rows.map((row, index) => {\n const cellSlotPrefix = `row-${row.id}-cell`;\n const expandableRowName = `row-${row.id}-expandable-content`;\n const dropdownCellName = `row-${row.id}-dropdown`;\n const rowHasExpandableSlot =\n hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n const rowHasDropdownSlot =\n hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n const rowClasses = [];\n if (rowHasExpandableSlot) rowClasses.push('expandable');\n if (clickable) rowClasses.push('clickable');\n if (striped) rowClasses.push(`striped-${index % 2 ? 'even' : 'odd'}`);\n if (row.expanded) rowClasses.push('expanded');\n if (row.selected) rowClasses.push('selected');\n const rowIsClickable = clickable \|\| rowHasExpandableSlot;\n\n return (\n <Fragment>\n <tr\n id={`row-${row.id}`}\n class={rowClasses.join(' ')}\n onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n tabIndex={rowIsClickable ? -1 : undefined}\n >\n {selectable && (\n <td\n class=\"select-column\"\n onClick={this.onControlContainerClick}\n >\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectRow')}\n hide-label\n checked={row.selected}\n disabled={(isSelectDisabled && row !== selectedRow) \|\| row.disabled}\n onChange={e => this.onSelectRow(e, row)}\n test-id=\"select-row-control\"\n ></q2-checkbox>\n </td>\n )}\n {headers.map(({ key }) => {\n const cell = row.cells[key];\n const lineClamp = cell?.lineClamp;\n const cellAlign = cell?.align;\n const cellVerticalAlign = cell?.verticalAlign;\n const cellClasses = [];\n if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n if (cellVerticalAlign) cellClasses.push(`vertical-align-${cellVerticalAlign}`);\n if (lineClamp) cellClasses.push('clamped');\n const cellStyles = lineClamp\n ? { '--comp-line-clamp-count': `${lineClamp}` }\n : undefined;\n\n return (\n <td\n class={cellClasses.join(' ')}\n style={cellStyles}\n >\n <slot name={`${cellSlotPrefix}-${key}`}>\n {this.renderCellContent(cell)}\n </slot>\n </td>\n );\n })}\n {clickable && (\n <td class={clickableClassString}>\n <q2-btn\n intent=\"neutral\"\n size=\"small\"\n onClick={e => this.onClickRow(e, row)}\n test-id=\"clickable-row-control\"\n >\n {loc('tecton.element.dataTable.clickRow')}\n </q2-btn>\n </td>\n )}\n {hasExpandableRows && (\n <td\n class=\"expandable-row-control-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasExpandableSlot && (\n <q2-btn\n onClick={e => this.onToggleRow(e, row)}\n ariaExpanded={`${row.expanded}`}\n ariaControls={expandableRowName}\n ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n test-id=\"expandable-row-control\"\n >\n <q2-icon\n type=\"chevron-down\"\n class=\"toggle-expandable-row\"\n ></q2-icon>\n </q2-btn>\n )}\n </td>\n )}\n {hasDropdowns && (\n <td\n class=\"dropdown-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n </td>\n )}\n </tr>\n {rowHasExpandableSlot && (\n <tr\n id={expandableRowName}\n class=\"expandable-row\"\n hidden={!row.expanded}\n aria-hidden={!row.expanded}\n >\n <td\n colSpan={numberOfColumns}\n headers=\"toggle\"\n >\n <div class=\"expandable-content\">\n <slot name={expandableRowName}></slot>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n })}\n </tbody>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2DataTableCss","Q2DataTable","constructor","hostRef","this","allRowsSelected","checkSlotCount","hasDropdowns","hasExpandableRows","hasRowData","serializedHeaders","serializedRows","someRowsSelected","emptyIcon","emptyMessage","selectMode","checkSlots","_b","_a","hostElement","querySelector","_d","_c","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeader","undefined","sortRows","expanded","toggleEvent","toggle","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","selectAriaLabel","serializedCells","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","selectableHandler","selectAllRows","numberOfColumns","getSelectRowLabel","Array","isArray","labelParts","cell","h","allKeysValid","every","part","join","loc","sortedRows","a","b","aValue","bValue","render","caption","class","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","includes","valueAsInt","parseFloat","theme","status","size","valueAsString","label","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","index","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n --comp-select-column-width: #{var-list(\n --tct-data-table-select-column-width,\n --tct-table-select-column-width,\n --tct-checkbox-size,\n 20px\n )};\n --comp-dropdown-column-width: #{var-list(\n --tct-data-table-dropdown-column-width,\n --tct-table-dropdown-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n --comp-expandable-row-control-column-width: #{var-list(\n --tct-data-table-expandable-row-control-column-width,\n --tct-table-expandable-row-control-column-width,\n --tct-btn-icon-width,\n 44px\n )};\n\n overflow: auto;\n @include tiny-scrollbar();\n\n :host([shadowed]:not([shadowed='false'])) & {\n box-shadow: var-list(\n --tct-data-table-shadow,\n --tct-table-shadow,\n --app-shadow-1,\n unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n );\n }\n\n :host([density='compact']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-compact,\n --tct-table-cell-padding-compact,\n --app-scale-1x,\n 5px\n )};\n }\n\n :host([density='comfortable']) & {\n --comp-cell-padding: #{var-list(\n --tct-data-table-cell-padding-comfortable,\n --tct-table-cell-padding-comfortable,\n --app-scale-5x,\n 25px\n )};\n }\n}\n\ntable {\n table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n border-collapse: collapse;\n border-spacing: 0;\n width: var-list(--tct-data-table-width, --tct-table-width);\n min-width: 100%;\n background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n backdrop-filter: var-list(--tct-data-table-backdrop-filter, none);\n caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n &.select-column {\n width: var(--comp-select-column-width);\n }\n\n &.expandable-row-control-column {\n width: var(--comp-expandable-row-control-column-width);\n }\n\n &.dropdown-column {\n width: var(--comp-dropdown-column-width);\n }\n\n :host(:is([bordered='vertical'], [bordered='grid'])) & {\n border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n border-style: var-list(--tct-data-table-column-border-style, solid);\n border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n &:last-child {\n border: none;\n }\n }\n}\n\ntd,\nth {\n padding: var(--comp-cell-padding);\n text-align: start;\n vertical-align: middle;\n\n &.align-end {\n text-align: end;\n }\n &.align-center {\n text-align: center;\n }\n &.vertical-align-top {\n vertical-align: top;\n }\n &.vertical-align-bottom {\n vertical-align: bottom;\n }\n}\n\nth {\n .header-content {\n font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n }\n\n &.sorted {\n .header-content {\n font-weight: var-list(\n --tct-data-table-header-sorted-font-weight,\n --tct-table-header-sorted-font-weight,\n 600\n );\n }\n }\n\n .sorted-indicator {\n --comp-header-sortable-icon-size: #{var-list(\n --tct-data-table-header-sortable-icon-size,\n --tct-table-header-sortable-icon-size,\n --app-scale-3x,\n 15px\n )};\n --tct-icon-stroke-width: 2;\n\n width: var(--comp-header-sortable-icon-size);\n height: var(--comp-header-sortable-icon-size);\n\n &.direction-ASC {\n transform: rotate(180deg);\n }\n }\n\n q2-btn {\n .header-content {\n display: flex;\n align-items: center;\n gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n }\n }\n}\n\ntr {\n &.expandable,\n &.clickable {\n cursor: pointer;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n &.expandable {\n --tct-btn-icon-hover-background: transparent;\n &:hover {\n background: var-list(--tct-data-table-expandable-row-hover-background --t-gray-14, #f2f2f2);\n }\n }\n\n &.striped-even {\n background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-even-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-even-hover-background,\n --tct-data-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n }\n &.striped-odd {\n background: var-list(--tct-data-table-row-odd-background, transparent);\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-odd-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n\n &.expandable {\n &:hover {\n background: var-list(\n --tct-data-table-expandable-row-odd-hover-background,\n --tct-data-table-expandable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n }\n\n &.clickable {\n &:hover {\n background: var-list(\n --tct-data-table-clickable-row-hover-background,\n --tct-table-clickable-row-hover-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n }\n\n &.selected {\n background: var-list(\n --tct-data-table-selected-row-background,\n --tct-table-selected-row-background,\n --t-gray-14,\n #f2f2f2\n );\n }\n\n &.expanded {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .toggle-expandable-row {\n transform: rotate(180deg);\n }\n }\n\n :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n tbody\n & {\n border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n }\n\n &.loading-row {\n background: var-list(\n --tct-data-table-loading-row-background,\n --tct-table-loading-row-background,\n --t-base,\n #ffffff\n );\n td {\n text-align: center;\n }\n\n q2-loading {\n font-size: 4em;\n }\n }\n\n &.empty-state {\n background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n td {\n text-align: center;\n }\n .empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: var(--app-scale-10x, 50px);\n padding-bottom: var(--app-scale-10x, 50px);\n gap: var(--app-scale-4x, 20px);\n --tct-icon-size: var(--app-scale-6x, 30px);\n }\n }\n\n &.expandable-row {\n background: var-list(\n --tct-data-table-expanded-row-background,\n --tct-table-expanded-row-background,\n --t-gray-14,\n #f2f2f2\n );\n\n .striped-odd + & {\n background: var-list(\n --tct-data-table-expanded-row-odd-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n\n .striped-even + & {\n background: var-list(\n --tct-data-table-expanded-row-even-background,\n --tct-data-table-expanded-row-background,\n --t-gray-14,\n transparent\n );\n }\n }\n}\n\ntd {\n &.clamped {\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: var(--comp-line-clamp-count, 1);\n -webkit-box-orient: vertical;\n }\n }\n\n &.expandable-row-control-column {\n --tct-btn-icon-hover-bg: transparent;\n padding: var-list(\n --tct-data-table-expandable-row-control-column-padding,\n --tct-table-expandable-row-control-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.dropdown-column {\n padding: var-list(\n --tct-data-table-dropdown-column-padding,\n --tct-table-dropdown-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n\n &.click-column:not(.sr) {\n padding: var-list(\n --tct-data-table-clickable-column-padding,\n --tct-table-clickable-column-padding,\n unquote('0 5px')\n );\n text-align: center;\n }\n}\n\ncaption {\n padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n padding: 0;\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Event,\n Element,\n EventEmitter,\n Fragment,\n Listen,\n Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' \| 'center' \| 'end';\n\nexport type Q2DataTableCellType =\n \| {\n // defines the type of cell\n type?: 'text' \| 'number' \| 'icon' \| 'boolean' \| 'code';\n }\n \| {\n // when type='badge'\n type?: 'badge';\n badgeStatus?: HTMLQ2BadgeElement['status'];\n badgeTheme?: HTMLQ2BadgeElement['theme'];\n };\n\nexport type Q2DataTableHeader = {\n title: string;\n align?: Q2DataTableCellAlignOptions;\n // Will be autogenerated from the title if not provided\n // The key is used to grab the data from the row data\n key?: string;\n // Enables sorting for this column when true\n // Manual will prevent automatic sorting and updating of the sorting indicators in the header\n sortable?: boolean \| 'auto' \| 'manual';\n width?: string;\n // defines background for the column\n backgroundColor?: string;\n sorted?: 'ASC' \| 'DESC';\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n value: string \| number \| boolean;\n align?: Q2DataTableCellAlignOptions;\n ariaLabel?: string;\n lineClamp?: number;\n verticalAlign?: 'top' \| 'bottom';\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n id: string \| number;\n selected?: boolean;\n expanded?: boolean;\n disabled?: boolean;\n selectAriaLabel?: string \| string[];\n};\n\nexport type Q2DataTableCells = Record<string, string \| number \| Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n cells: Q2DataTableSerializedCells;\n};\n\n/*\n @slot row-<id>-cell-<key> - A slot for overriding the content of any cell in any row of the table with custom content.\n * @slot header-cell-<key> - A slot for the content of any cell in the header of the table.\n * @slot row-<id>-dropdown - A slot to provide a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) for a row.\n * @slot row-<id>-expandable-content - A slot that makes the row expandable and displays the provided content.\n * @slot empty-table - An optional slot to display custom content when the table is empty.\n /\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n allRowsSelected: boolean = false;\n\n @State()\n checkSlotCount: number = 0;\n\n @State()\n hasDropdowns: boolean = false;\n\n @State()\n hasExpandableRows: boolean = false;\n\n @State()\n hasRowData: boolean = false;\n\n @State()\n serializedHeaders: Q2DataTableHeader[] = [];\n\n @State()\n serializedRows: Q2DataTableSerializedRow[] = [];\n\n @State()\n someRowsSelected: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* Adds borders between rows and/or columns in the table. /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean \| 'horizontal' \| 'vertical' \| 'grid';\n\n /* Provides a caption for the data table. /\n @Prop({ mutable: true })\n caption: string;\n\n /* Adds the ability to click a row and have the table emit an event with the selected row's data. /\n @Prop({ mutable: true, reflect: true })\n clickable: boolean;\n\n /* Determines the amount of padding for each of the cells in the table. /\n @Prop({ mutable: true, reflect: true })\n density: 'compact' \| 'normal' \| 'comfortable';\n\n /* Determines the `q2-icon` that will display when `rows` has no value. /\n @Prop({ reflect: true })\n emptyIcon: string = 'inbox';\n\n /* Determines the message that will display when `rows` has no value.\n * @localizable\n /\n @Prop({ reflect: true })\n emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n /\n Defines the headers of the table.\n \n Example:\n * @snippet\n * element.headers = [\n * {\n * title: 'Day of the Week',\n * key: 'day',\n * },\n * {\n * title: 'Sales',\n * key: 'sales',\n * align: 'end',\n * }\n * ]\n \n /\n @Prop({ mutable: true })\n headers: Q2DataTableHeader[];\n\n /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. /\n @Prop({ mutable: true, reflect: true })\n hideCaption: boolean;\n\n /\n Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n \n @info\n * Use of this property requires `clickable` to be set to `true`.\n /\n @Prop({ mutable: true })\n hideClickable: boolean;\n\n /* Displays a loading state on the table to indicate background activity. /\n @Prop({ mutable: true, reflect: true })\n loading: boolean;\n\n /\n Defines the rows of the table.\n \n Example:\n * @snippet\n * element.rows = [\n * {\n * id: 1,\n * cells: {\n * day: 'Monday',\n * sales: 93\n * }\n * },\n * {\n * id: 2,\n * cells: {\n * day: 'Tuesday',\n * sales: 127\n * }\n * },\n * {\n * id: 3,\n * cells: {\n * day: 'Wednesday',\n * sales: 121\n * }\n * ]\n /\n @Prop({ mutable: true })\n rows: Q2DataTableRow[];\n\n /* Adds a checkbox to each row of the table making it selectable. /\n @Prop({ mutable: true, reflect: true })\n selectable: boolean;\n\n /\n Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n * See the documentation on the `select` event for how to handle selections.\n \n @warning\n * Use of this property requires `selectable` to be set to `true`.\n /\n @Prop({ mutable: true })\n selectMode: 'multiple' \| 'single' = 'multiple';\n\n /* Adds a shadow to the table /\n @Prop({ mutable: true, reflect: true })\n shadowed: boolean;\n\n /* Enables alternating background colors for the table rows /\n @Prop({ reflect: true })\n striped: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a row is clicked.\n \n Requires the `clickable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default click behavior.\n /\n @Event()\n click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n /\n Emitted when a row is selected.\n \n Requires the `selectable` prop to be set to `true`.\n \n Call `event.preventDefault()` to prevent the default selection behavior.\n /\n @Event()\n select: EventEmitter<{\n row: Q2DataTableSerializedRow;\n rows: Q2DataTableSerializedRow[];\n allSelected: boolean;\n }>;\n\n /\n Emitted when the select-all checkbox is toggled.\n \n Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n \n Call `event.preventDefault()` to prevent the default behavior.\n /\n @Event()\n selectAllRows: EventEmitter<{ checked: boolean }>;\n\n /\n Emitted when a column is sorted.\n \n Requires the `sortable` prop to be set to `true` on the column.\n \n Call `event.preventDefault()` to prevent the default sorting behavior.\n /\n @Event()\n sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' \| 'DESC' }>;\n\n /\n Emitted when an expandable row is toggled.\n \n Requires content in the `row-{id}-expandable-content` slot.\n \n Call `event.preventDefault()` to prevent the default toggling behavior.\n /\n @Event()\n toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n this.resizeObserver = null;\n }\n }\n\n componentWillLoad() {\n this.headersHandler(this.headers);\n this.rowsHandler(this.rows);\n }\n\n componentDidLoad(): void {\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(() => this.checkSlots());\n observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n this.mutationObserver = observer;\n }\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => resizeIframe());\n this.resizeObserver.observe(this.hostElement);\n }\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click')\n onClickListener(event: MouseEvent) {\n if (event instanceof PointerEvent) event.stopImmediatePropagation();\n }\n\n @Listen('selectAllRows')\n onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n event.stopPropagation();\n const { checked } = event.detail;\n const selectedRows = checked\n ? this.serializedRows.map(row => {\n if (row.disabled) {\n return row;\n } else {\n return {\n ...row,\n selected: checked,\n };\n }\n })\n : [];\n const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.disabled) return row;\n row.selected = checked;\n return row;\n });\n this.allRowsSelected = checked;\n this.someRowsSelected = false;\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to click a row that accepts a row ID that is will be clicked.\n \n @testOnly\n /\n @Method()\n async clickRow(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method that returns the plain text value of a particular cell (including slot content).\n \n @testOnly\n /\n @Method()\n async getCellContent(rowId: number \| string, columnKey: string) {\n const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n const text = this.hostElement.shadowRoot.querySelector(\n `slot[name=row-${rowId}-cell-${columnKey}]`\n )?.textContent;\n return slotContent \|\| text \|\| '';\n }\n\n /\n A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n \n @testOnly\n /\n @Method()\n async sortColumn(header: Q2DataTableHeader) {\n const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n \n @testOnly\n /\n @Method()\n async toggleRowExpansion(rowId: number \| string) {\n const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n (btn as HTMLQ2BtnElement)?.click();\n }\n\n /\n A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n \n @testOnly\n /\n @Method()\n async toggleRowSelect(rowId: number \| string) {\n const chk = this.hostElement.shadowRoot.querySelector(\n `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n );\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n /\n A method to toggle select all button (checkbox) on left top corner.\n \n @testOnly\n */\n @Method()\n async toggleSelectAllRows() {\n if (!this.selectable) return;\n const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n (chk as HTMLQ2CheckboxElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('headers')\n headersHandler(headers: Q2DataTableHeader[] = []) {\n this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n const { title } = header;\n let { key } = header;\n\n // If no key is provided, generate one from the title\n if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n return {\n key,\n ...header,\n };\n });\n }\n\n @Watch('rows')\n rowsHandler(rows: Q2DataTableRow[] = []) {\n const { serializedHeaders, mappedHeaders } = this;\n const defaultRow = {\n id: null,\n cells: {},\n selected: false,\n expanded: false,\n disabled: false,\n };\n\n // tracks if the select-all checkbox should be visually updated as the `rows` are built\n let isAllSelected = true;\n let isIndeterminate = false;\n\n const serializedRows = rows.map(({ id, cells, selected, expanded, disabled, selectAriaLabel }) => {\n const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n (accum, [cellKey, cellData]) => {\n const header = mappedHeaders[cellKey] \|\| ({} as Q2DataTableHeader);\n const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n const isBadge = 'type' in header && header.type === 'badge';\n const defaultCell: Q2DataTableCell = {\n value: '',\n ariaLabel: undefined,\n type,\n align,\n lineClamp,\n verticalAlign,\n badgeStatus: isBadge ? header.badgeStatus : undefined,\n badgeTheme: isBadge ? header.badgeTheme : undefined,\n };\n\n const result: Q2DataTableCell =\n typeof cellData === 'object'\n ? { ...defaultCell, ...cellData }\n : { ...defaultCell, value: cellData };\n\n accum[cellKey] = result;\n return accum;\n },\n {}\n );\n\n if (isAllSelected && !selected) isAllSelected = false;\n if (!isAllSelected && selected) isIndeterminate = true;\n return {\n ...defaultRow,\n id,\n selected: !!selected,\n expanded: !!expanded,\n disabled: !!disabled,\n selectAriaLabel,\n cells: serializedCells,\n };\n });\n\n const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n this.hasRowData = !!rows.length;\n this.allRowsSelected = this.hasRowData && isAllSelected;\n this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n this.checkSlots();\n }\n\n @Watch('selectable')\n selectableHandler() {\n if (this.selectable === false) {\n this.selectAllRows.emit({ checked: false });\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get mappedHeaders() {\n return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n accum[header.key] = header;\n return accum;\n }, {});\n }\n\n get numberOfColumns() {\n return (\n (this.serializedHeaders?.length ?? 0) +\n (this.selectable ? 1 : 0) +\n (this.clickable ? 1 : 0) +\n (this.hasExpandableRows ? 1 : 0) +\n (this.hasDropdowns ? 1 : 0)\n );\n }\n\n get selectedRow() {\n return this.selectedRows.find(({ selected }) => !!selected);\n }\n\n get selectedRows() {\n return this.serializedRows.filter(({ selected }) => selected);\n }\n\n getSelectRowLabel(row: Q2DataTableSerializedRow): string {\n const { selectAriaLabel, cells } = row;\n\n if (typeof selectAriaLabel === 'string') {\n return selectAriaLabel;\n }\n\n if (Array.isArray(selectAriaLabel)) {\n const labelParts = selectAriaLabel.map(key => {\n const cell = cells[key];\n const header = this.serializedHeaders.find(h => h.key === key);\n if (cell?.value === undefined \|\| !header) return undefined;\n return `${header.title} ${cell.value}`;\n });\n const allKeysValid = labelParts.every(part => part !== undefined);\n\n if (allKeysValid) {\n return `Select row for ${labelParts.join(', ')}`;\n }\n }\n\n return loc('tecton.element.dataTable.selectRow');\n }\n\n checkSlots = () => {\n this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n // The booleans above may not change, even if the slot has content\n // So we increment this property to force a re-render and ensure proper rendering\n this.checkSlotCount += 1;\n };\n\n onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n this.click.emit({ row });\n };\n\n onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n if (this.clickable) {\n this.onClickRow(event, row);\n } else if (this.hasExpandableRows) {\n this.onToggleRow(event, row);\n }\n };\n\n onControlContainerClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;\n const { checked } = event.detail;\n\n const selectedRow = { ...row, selected: checked };\n let selectedRows;\n if (selectMode === 'single') {\n selectedRows = checked ? [selectedRow] : [];\n } else {\n selectedRows = checked\n ? [...currentlySelectedRows, selectedRow]\n : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n }\n\n const allRowsSelected = selectedRows.length === serializedRows.length;\n const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n const selectEvent = this.select.emit({ row: selectedRow, rows: selectedRows, allSelected: allRowsSelected });\n if (selectEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n this.allRowsSelected = allRowsSelected;\n this.someRowsSelected = isIndeterminate;\n };\n\n onSort = (header: Q2DataTableHeader) => {\n const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n const sortKey = header.key;\n const sortEvent = this.sort.emit({ header, direction });\n if (sortEvent.defaultPrevented) return;\n\n const shouldAutoSort = header.sortable !== 'manual';\n if (!shouldAutoSort) return;\n\n this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n const sorted = sortKey === serializedHeader.key ? direction : undefined;\n return { ...serializedHeader, sorted };\n });\n\n this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n };\n\n onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n event.stopPropagation();\n const selectedRow = { ...row, expanded: !row.expanded };\n const toggleEvent = this.toggle.emit({ row: selectedRow });\n if (toggleEvent.defaultPrevented) return;\n\n this.serializedRows = this.serializedRows.map(row => {\n if (row.id === selectedRow.id) return selectedRow;\n else return { ...row };\n });\n };\n\n sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n const { key, sorted } = header;\n const direction = sorted \|\| 'ASC';\n\n const sortedRows = [...rows].sort((a, b) => {\n const aValue = a.cells[key].value;\n const bValue = b.cells[key].value;\n\n if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n return 0;\n });\n\n return sortedRows;\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { caption } = this;\n return (\n <div class=\"container\">\n <table>\n {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n {this.renderTableColGroup()}\n {this.renderTableHeader()}\n {this.renderEmptyState()}\n {this.renderTableRows()}\n </table>\n </div>\n );\n }\n\n renderCellContent(cell: Q2DataTableCell) {\n if (!cell) return;\n\n const { type, ariaLabel, value } = cell;\n\n if ([undefined, null].includes(value)) return;\n\n switch (type) {\n case 'badge':\n let valueAsInt;\n switch (typeof value) {\n case 'string':\n valueAsInt = parseFloat(value);\n break;\n\n case 'boolean':\n valueAsInt = value ? 1 : 0;\n break;\n\n default:\n valueAsInt = value;\n break;\n }\n\n return (\n <q2-badge\n aria-label={ariaLabel}\n value={valueAsInt}\n theme={cell.badgeTheme}\n status={cell.badgeStatus}\n size=\"large\"\n ></q2-badge>\n );\n\n case 'icon':\n const valueAsString = typeof value === 'string' ? value : `${value}`;\n return (\n <q2-icon\n label={ariaLabel}\n type={valueAsString}\n ></q2-icon>\n );\n\n case 'boolean':\n return !!value ? (\n <q2-icon\n label={loc('tecton.element.dataTable.booleanTrue')}\n type=\"checkmark\"\n ></q2-icon>\n ) : (\n <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n );\n\n case 'code':\n return <code aria-label={ariaLabel}>{value}</code>;\n\n default:\n return <div aria-label={ariaLabel}>{value}</div>;\n }\n }\n\n renderEmptyState() {\n const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n if (hasRowData \|\| loading) return null;\n\n return (\n <tbody>\n <tr class=\"empty-state\">\n <td colSpan={numberOfColumns}>\n <slot name=\"empty-table\">\n <div class=\"empty-state-content\">\n <q2-icon type={emptyIcon}></q2-icon>\n <p>{loc(emptyMessage)}</p>\n </div>\n </slot>\n </td>\n </tr>\n </tbody>\n );\n }\n\n renderTableColGroup() {\n const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n if (!headers.length) return null;\n\n return (\n <colgroup>\n {selectable && <col class=\"select-column\" />}\n {headers.map(({ width, backgroundColor }) => (\n <col style={{ width, backgroundColor }} />\n ))}\n {clickable && <col class=\"click-column\" />}\n {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n {hasDropdowns && <col class=\"dropdown-column\" />}\n </colgroup>\n );\n }\n\n renderTableHeader() {\n const {\n serializedHeaders: headers,\n selectable,\n clickable,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n allRowsSelected,\n someRowsSelected,\n hasRowData,\n loading,\n } = this;\n\n if (!headers.length) return null;\n\n return (\n <thead>\n <tr>\n {selectable && (\n <th>\n {selectMode === 'multiple' && (\n <q2-checkbox\n label={loc('tecton.element.dataTable.selectAllRows')}\n hide-label\n onChange={() => this.selectAllRows.emit({ checked: !allRowsSelected })}\n checked={hasRowData && allRowsSelected && !someRowsSelected}\n indeterminate={hasRowData && someRowsSelected && !allRowsSelected}\n disabled={loading \|\| !hasRowData}\n test-id=\"select-all-rows-control\"\n ></q2-checkbox>\n )}\n </th>\n )}\n {headers.map(header => {\n const { align, sorted, verticalAlign } = header;\n const headerClasses = [];\n if (align) headerClasses.push(`align-${align}`);\n if (verticalAlign) headerClasses.push(`vertical-align-${verticalAlign}`);\n if (!!sorted) headerClasses.push('sorted');\n return (\n <th\n class={headerClasses.join(' ')}\n id={`header-${header.key}`}\n >\n {header.sortable ? (\n <q2-btn\n onClick={() => this.onSort(header)}\n test-id=\"sort-control\"\n disabled={this.loading}\n >\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n\n {!!sorted ? (\n <q2-icon\n class={`sorted-indicator direction-${sorted}`}\n type=\"arrow-down\"\n label={\n sorted === 'ASC'\n ? loc('tecton.element.dataTable.sortedAscending')\n : loc('tecton.element.dataTable.sortedDescending')\n }\n test-id=\"sorted-indicator\"\n ></q2-icon>\n ) : (\n <q2-icon\n class={`sorted-indicator`}\n type=\"sort\"\n label={loc('tecton.element.dataTable.clickToSort')}\n test-id=\"sorted-indicator\"\n ></q2-icon>\n )}\n </div>\n </q2-btn>\n ) : (\n <div\n class=\"header-content\"\n aria-label={header.ariaLabel \|\| undefined}\n >\n <slot name={`header-cell-${header.key}`}>{header.title}</slot>\n </div>\n )}\n </th>\n );\n })}\n {clickable && (\n <th\n id=\"click\"\n class={hideClickable ? 'sr' : undefined}\n >\n <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n </th>\n )}\n {hasExpandableRows && (\n <th id=\"toggle\">\n <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n </th>\n )}\n {hasDropdowns && (\n <th>\n <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n </th>\n )}\n </tr>\n </thead>\n );\n }\n\n renderTableRows() {\n const {\n serializedHeaders: headers,\n serializedRows: rows,\n selectable,\n clickable,\n striped,\n hideClickable,\n selectMode,\n hasExpandableRows,\n hasDropdowns,\n numberOfColumns,\n loading,\n } = this;\n\n if (loading) {\n return (\n <tbody>\n <tr class=\"loading-row\">\n <td colSpan={numberOfColumns}>\n <q2-loading inline></q2-loading>\n </td>\n </tr>\n </tbody>\n );\n }\n\n let isSelectDisabled = false;\n let selectedRow;\n if (selectMode === 'single') {\n selectedRow = this.selectedRow;\n isSelectDisabled = !!selectedRow;\n }\n const clickableClasses = [];\n if (clickable) clickableClasses.push('click-column');\n if (hideClickable) clickableClasses.push('sr');\n const clickableClassString = clickableClasses.join(' ');\n\n return (\n <tbody>\n {rows.map((row, index) => {\n const cellSlotPrefix = `row-${row.id}-cell`;\n const expandableRowName = `row-${row.id}-expandable-content`;\n const dropdownCellName = `row-${row.id}-dropdown`;\n const rowHasExpandableSlot =\n hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n const rowHasDropdownSlot =\n hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n const rowClasses = [];\n if (rowHasExpandableSlot) rowClasses.push('expandable');\n if (clickable) rowClasses.push('clickable');\n if (striped) rowClasses.push(`striped-${index % 2 ? 'even' : 'odd'}`);\n if (row.expanded) rowClasses.push('expanded');\n if (row.selected) rowClasses.push('selected');\n const rowIsClickable = clickable \|\| rowHasExpandableSlot;\n\n return (\n <Fragment>\n <tr\n id={`row-${row.id}`}\n class={rowClasses.join(' ')}\n onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n tabIndex={rowIsClickable ? -1 : undefined}\n >\n {selectable && (\n <td\n class=\"select-column\"\n onClick={this.onControlContainerClick}\n >\n <q2-checkbox\n label={this.getSelectRowLabel(row)}\n hide-label\n checked={row.selected}\n disabled={(isSelectDisabled && row !== selectedRow) \|\| row.disabled}\n onChange={e => this.onSelectRow(e, row)}\n test-id=\"select-row-control\"\n ></q2-checkbox>\n </td>\n )}\n {headers.map(({ key }) => {\n const cell = row.cells[key];\n const lineClamp = cell?.lineClamp;\n const cellAlign = cell?.align;\n const cellVerticalAlign = cell?.verticalAlign;\n const cellClasses = [];\n if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n if (cellVerticalAlign) cellClasses.push(`vertical-align-${cellVerticalAlign}`);\n if (lineClamp) cellClasses.push('clamped');\n const cellStyles = lineClamp\n ? { '--comp-line-clamp-count': `${lineClamp}` }\n : undefined;\n\n return (\n <td\n class={cellClasses.join(' ')}\n style={cellStyles}\n >\n <slot name={`${cellSlotPrefix}-${key}`}>\n {this.renderCellContent(cell)}\n </slot>\n </td>\n );\n })}\n {clickable && (\n <td class={clickableClassString}>\n <q2-btn\n intent=\"neutral\"\n size=\"small\"\n onClick={e => this.onClickRow(e, row)}\n test-id=\"clickable-row-control\"\n >\n {loc('tecton.element.dataTable.clickRow')}\n </q2-btn>\n </td>\n )}\n {hasExpandableRows && (\n <td\n class=\"expandable-row-control-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasExpandableSlot && (\n <q2-btn\n onClick={e => this.onToggleRow(e, row)}\n ariaExpanded={`${row.expanded}`}\n ariaControls={expandableRowName}\n ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n test-id=\"expandable-row-control\"\n >\n <q2-icon\n type=\"chevron-down\"\n class=\"toggle-expandable-row\"\n ></q2-icon>\n </q2-btn>\n )}\n </td>\n )}\n {hasDropdowns && (\n <td\n class=\"dropdown-column\"\n onClick={this.onControlContainerClick}\n >\n {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n </td>\n )}\n </tr>\n {rowHasExpandableSlot && (\n <tr\n id={expandableRowName}\n class=\"expandable-row\"\n hidden={!row.expanded}\n aria-hidden={!row.expanded}\n >\n <td\n colSpan={numberOfColumns}\n headers=\"toggle\"\n >\n <div class=\"expandable-content\">\n <slot name={expandableRowName}></slot>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n })}\n </tbody>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/q2-data-table/q2-data-table.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ export type Q2DataTableBaseRow = {
     selected?: boolean;
     expanded?: boolean;
     disabled?: boolean;
+    selectAriaLabel?: string | string[];
 };
 export type Q2DataTableCells = Record<string, string | number | Q2DataTableCell>;
 export type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;
@@ -249,6 +250,7 @@ export declare class Q2DataTable implements ComponentInterface {
     get numberOfColumns(): number;
     get selectedRow(): Q2DataTableSerializedRow;
     get selectedRows(): Q2DataTableSerializedRow[];
+    getSelectRowLabel(row: Q2DataTableSerializedRow): string;
     checkSlots: () => void;
     onClickRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
     onClickTableRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.63.0",
+    "version": "1.63.1",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -40,7 +40,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.32.0",
-        "q2-tecton-common": "1.63.0",
+        "q2-tecton-common": "1.63.1",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -63,5 +63,5 @@
         "puppeteer": "^24.11.1"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "fa5bdf26bc6a49dd9a0b2b36bfb4181fe9c3f0f6"
+    "gitHead": "b2567efcf9c475164d112e41767b8bbf0a5997c0"
 }