q2-tecton-elements 1.55.3 → 1.56.0

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

@@ -1 +1 @@
-{"version":3,"names":["q2DataTableCss","Q2DataTableStyle0","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectMode","serializedRows","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","allRowsSelected","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","someRowsSelected","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeaders","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","hasRowData","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","emptyIcon","emptyMessage","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","join","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","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    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    &.striped {\n        &:nth-child(even) {\n            background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n        }\n        &:nth-child(odd) {\n            background: var-list(--tct-data-table-row-odd-background, transparent);\n        }\n    }\n\n    &.expandable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-expandable-row-hover-background,\n                --tct-table-expandable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\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}\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    --tct-checkbox-padding: 0;\n    --tct-checkbox-margin: 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@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 => {\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');\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":";;;;AAAA,MAAMA,IAAiB;;AACvB,MAAAC,IAAeD;;MCyEFE,IAAW;;;;;;;;IA+dpBC,KAAAC,aAAa;;MACTD,KAAKE,wBAAuBC,KAAAC,IAAAJ,KAAKK,iBAAW,QAAAD,WAAA,aAAAA,EAAEE,cAAc,sCAAgC,QAAAH,WAAA,IAAAA,IAAI;MAChGH,KAAKO,mBAAkBC,KAAAC,IAAAT,KAAKK,iBAAW,QAAAI,WAAA,aAAAA,EAAEH,cAAc,4BAAsB,QAAAE,WAAA,IAAAA,IAAI;;;YAIjFR,KAAKU,kBAAkB;AAAC;IAG5BV,KAAAW,aAAa,CAACC,GAAmBC;MAC7BD,EAAME;MACNd,KAAKe,MAAMC,KAAK;QAAEH;;AAAM;IAG5Bb,KAAAiB,kBAAkB,CAACL,GAAmBC;MAClC,IAAIb,KAAKkB,WAAW;QAChBlB,KAAKW,WAAWC,GAAOC;aACpB,IAAIb,KAAKE,mBAAmB;QAC/BF,KAAKmB,YAAYP,GAAOC;;;IAIhCb,KAAAoB,0BAA2BR;MACvBA,EAAME;AAAiB;IAG3Bd,KAAAqB,cAAc,CAACT,GAA0CC;MACrDD,EAAME;MACN,OAAMQ,YAAEA,GAAUC,gBAAEA,GAAgBC,cAAcC,KAA0BzB;MAC5E,OAAM0B,SAAEA,KAAYd,EAAMe;MAE1B,MAAMC,IAAWC,OAAAC,OAAAD,OAAAC,OAAA,IAAQjB,IAAG;QAAEkB,UAAUL;;MACxC,IAAIF;MACJ,IAAIF,MAAe,UAAU;QACzBE,IAAeE,IAAU,EAACE,MAAe;aACtC;QACHJ,IAAeE,IACT,KAAID,GAAuBG,MAC3BH,EAAsBO,QAAOnB,KAAOA,EAAIoB,OAAOL,EAAYK;;MAGrE,MAAMC,IAAkBV,EAAaW,WAAWZ,EAAeY;MAC/D,MAAMC,KAAmBF,KAAmBV,EAAaW,SAAS;MAClE,MAAME,IAAcrC,KAAKsC,OAAOtB,KAAK;QAAEH,KAAKe;QAAaW,MAAMf;QAAcgB,aAAaN;;MAC1F,IAAIG,EAAYI,kBAAkB;MAElCzC,KAAKuB,iBAAiBvB,KAAKuB,eAAemB,KAAI7B,KAAQA,EAAIoB,OAAOL,EAAYK,KAAKL,IAAcf;MAChGb,KAAKkC,kBAAkBA;MACvBlC,KAAK2C,mBAAmBP;AAAe;IAG3CpC,KAAA4C,SAAUC;MACN,MAAMC,IAAYD,EAAOE,WAAW,QAAQ,SAAS;MACrD,MAAMC,IAAUH,EAAOI;MACvB,MAAMC,IAAYlD,KAAKmD,KAAKnC,KAAK;QAAE6B;QAAQC;;MAC3C,IAAII,EAAUT,kBAAkB;MAEhC,MAAMW,IAAiBP,EAAOQ,aAAa;MAC3C,KAAKD,GAAgB;MAErBpD,KAAKsD,oBAAoBtD,KAAKsD,kBAAkBZ,KAAuBa;QACnE,MAAMR,IAASC,MAAYO,EAAiBN,MAAMH,IAAYU;QAC9D,OAAA3B,OAAAC,OAAAD,OAAAC,OAAA,IAAYyB,IAAgB;UAAER;;AAAM;MAGxC/C,KAAKuB,iBAAiBvB,KAAKyD,SAASzD,KAAKuB,gBAAcM,OAAAC,OAAAD,OAAAC,OAAA,IAAOe,IAAM;QAAEE,QAAQD;;AAAY;IAG9F9C,KAAAmB,cAAc,CAACP,GAAmBC;MAC9BD,EAAME;MACN,MAAMc,IAAWC,OAAAC,OAAAD,OAAAC,OAAA,IAAQjB,IAAG;QAAE6C,WAAW7C,EAAI6C;;MAC7C,MAAMC,IAAc3D,KAAK4D,OAAO5C,KAAK;QAAEH,KAAKe;;MAC5C,IAAI+B,EAAYlB,kBAAkB;MAElCzC,KAAKuB,iBAAiBvB,KAAKuB,eAAemB,KAAI7B;QAC1C,IAAIA,EAAIoB,OAAOL,EAAYK,IAAI,OAAOL,QACjC,OAAAC,OAAAC,OAAA,IAAYjB;AAAG;AACtB;2BA5hBqB;0BAGF;wBAGD;6BAGK;sBAGP;6BAGmB;0BAGI;4BAGjB;;;;;qBAuBR;wBAMG;;;;;;;sBAmFa;;;;;;EAsEpC,oBAAAgD;IACI,IAAI7D,KAAK8D,kBAAkB;MACvB9D,KAAK8D,iBAAiBC;MACtB/D,KAAK8D,mBAAmB;;IAE5B,IAAI9D,KAAKgE,gBAAgB;MACrBhE,KAAKgE,eAAeD;MACpB/D,KAAKgE,iBAAiB;;;EAI9B,iBAAAC;IACIjE,KAAKkE,eAAelE,KAAKmE;IACzBnE,KAAKoE,YAAYpE,KAAKuC;;EAG1B,gBAAA8B;IACI,WAAWC,qBAAqB,aAAa;MACzC,MAAMC,IAAW,IAAID,kBAAiB,MAAMtE,KAAKC;MACjDsE,EAASC,QAAQxE,KAAKK,aAAa;QAAEoE,WAAW;QAAMC,SAAS;QAAMC,YAAY;;MACjF3E,KAAK8D,mBAAmBS;;IAE5B,WAAWK,mBAAmB,aAAa;MACvC5E,KAAKgE,iBAAiB,IAAIY,gBAAe,MAAMC;MAC/C7E,KAAKgE,eAAeQ,QAAQxE,KAAKK;;;;;EAQzC,eAAAyE,CAAgBlE;IACZ,IAAIA,aAAiBmE,cAAcnE,EAAMoE;;EAI7C,eAAAC,CAAgBrE;IACZA,EAAME;IACN,OAAMY,SAAEA,KAAYd,EAAMe;IAC1B,MAAMH,IAAeE,IACf1B,KAAKuB,eAAemB,KAAI7B;MACpB,IAAIA,EAAIqE,UAAU;QACd,OAAOrE;aACJ;QACH,OAAAgB,OAAAC,OAAAD,OAAAC,OAAA,IACOjB,IAAG;UACNkB,UAAUL;;;UAItB;IACN,MAAMW,IAAcrC,KAAKsC,OAAOtB,KAAK;MAAEH,KAAK2C;MAAWjB,MAAMf;MAAcgB,aAAad;;IACxF,IAAIW,EAAYI,kBAAkB;IAElCzC,KAAKuB,iBAAiBvB,KAAKuB,eAAemB,KAAI7B;MAC1C,IAAIA,EAAIqE,UAAU,OAAOrE;MACzBA,EAAIkB,WAAWL;MACf,OAAOb;AAAG;IAEdb,KAAKkC,kBAAkBR;IACvB1B,KAAK2C,mBAAmB;;;;;;;;;EAY5B,cAAMwC,CAASC;IACX,MAAMC,IAAMrF,KAAKK,YAAYiF,WAAWhF,cAAc,QAAQ8E;IAC7DC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BtE;;;;;;SAS/B,oBAAMwE,CAAeH,GAAwBI;;IACzC,MAAMC,KAAcrF,IAAAJ,KAAKK,YAAYC,cAAc,aAAa8E,UAAcI,UAAY,QAAApF,WAAA,aAAAA,EAAEsF;IAC5F,MAAMC,KAAOxF,IAAAH,KAAKK,YAAYiF,WAAWhF,cACrC,iBAAiB8E,UAAcI,WAClC,QAAArF,WAAA,aAAAA,EAAEuF;IACH,OAAOD,KAAeE,KAAQ;;;;;;SASlC,gBAAMC,CAAW/C;IACb,MAAMwC,IAAMrF,KAAKK,YAAYiF,WAAWhF,cAAc,WAAWuC,EAAOI;IACvEoC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BtE;;;;;;SAS/B,wBAAM8E,CAAmBT;IACrB,MAAMC,IAAMrF,KAAKK,YAAYiF,WAAWhF,cAAc,QAAQ8E;IAC7DC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BtE;;;;;;SAS/B,qBAAM+E,CAAgBV;IAClB,MAAMW,IAAM/F,KAAKK,YAAYiF,WAAWhF,cACpC,QAAQ8E;IAEXW,MAA6B,QAA7BA,WAAG,aAAHA,EAA+BhF;;;;;;SASpC,yBAAMiF;IACF,KAAKhG,KAAKiG,YAAY;IACtB,MAAMF,IAAM/F,KAAKK,YAAYiF,WAAWhF,cAAc;IACrDyF,MAA6B,QAA7BA,WAAG,aAAHA,EAA+BhF;;;;EAOpC,cAAAmD,CAAeC,IAA+B;IAC1CnE,KAAKsD,oBAAoBa,EAAQzB,KAAuBG;MACpD,OAAMqD,OAAEA,KAAUrD;MAClB,KAAII,KAAEA,KAAQJ;;YAGd,KAAKI,GAAKA,IAAMiD,EAAMC,cAAcC,QAAQ,OAAO;MAEnD,OAAAvE,OAAAC,OAAA;QACImB;SACGJ;AAAM;;EAMrB,WAAAuB,CAAY7B,IAAyB;IACjC,OAAMe,mBAAEA,GAAiB+C,eAAEA,KAAkBrG;IAC7C,MAAMsG,IAAa;MACfrE,IAAI;MACJsE,OAAO;MACPxE,UAAU;MACV2B,UAAU;MACVwB,UAAU;;;QAId,IAAIsB,IAAgB;IACpB,IAAIpE,IAAkB;IAEtB,MAAMb,IAAiBgB,EAAKG,KAAI,EAAGT,OAAIsE,UAAOxE,aAAU2B,aAAUwB;MAC9D,MAAMuB,IAAkB5E,OAAO6E,QAAQH,GAAOI,QAC1C,CAACC,IAAQC,GAASC;QACd,MAAMjE,IAASwD,EAAcQ,MAAa;QAC1C,OAAME,OAAEA,GAAKC,MAAEA,IAAO,QAAMC,WAAEA,GAASC,eAAEA,KAAkBrE;QAE3D,MAAMsE,IAAU,UAAUtE,KAAUA,EAAOmE,SAAS;QACpD,MAAMI,IAA+B;UACjCC,OAAO;UACPC,WAAW9D;UACXwD;UACAD;UACAE;UACAC;UACAK,aAAaJ,IAAUtE,EAAO0E,cAAc/D;UAC5CgE,YAAYL,IAAUtE,EAAO2E,aAAahE;;QAG9C,MAAMiE,WACKX,MAAa,W,gCACTM,IAAgBN,KAAQjF,OAAAC,OAAAD,OAAAC,OAAA,IACxBsF,IAAW;UAAEC,OAAOP;;QAEnCF,EAAMC,KAAWY;QACjB,OAAOb;AAAK,UAEhB;MAGJ,IAAIJ,MAAkBzE,GAAUyE,IAAgB;MAChD,KAAKA,KAAiBzE,GAAUK,IAAkB;MAClD,OAAAP,OAAAC,OAAAD,OAAAC,OAAA,IACOwE,IAAU;QACbrE;QACAF,YAAYA;QACZ2B,YAAYA;QACZwB,YAAYA;QACZqB,OAAOE;;AAAe;IAI9B,MAAMiB,IAAepE,EAAkBqE,MAAK,EAAG5E,eAAaA;IAC5D,MAAMK,MAAmBsE,KAAgBA,EAAarE,aAAa;IAEnErD,KAAK4H,eAAerF,EAAKJ;IACzBnC,KAAKkC,kBAAkBlC,KAAK4H,cAAcpB;IAC1CxG,KAAK2C,mBAAmB3C,KAAK4H,cAAcxF;IAE3CpC,KAAKuB,mBAAmB6B,IAAiBpD,KAAKyD,SAASlC,GAAgBmG,KAAgBnG;IACvFvB,KAAKC;;EAIT,iBAAA4H;IACI,IAAI7H,KAAKiG,eAAe,OAAO;MAC3BjG,KAAK8H,cAAc9G,KAAK;QAAEU,SAAS;;;;;;EAO3C,iBAAI2E;IACA,OAAOrG,KAAKsD,kBAAkBqD,QAA0C,CAACC,GAAO/D;MAC5E+D,EAAM/D,EAAOI,OAAOJ;MACpB,OAAO+D;AAAK,QACb;;EAGP,mBAAImB;;IACA,SACK5H,KAAAC,IAAAJ,KAAKsD,uBAAiB,QAAAlD,WAAA,aAAAA,EAAE+B,YAAM,QAAAhC,WAAA,IAAAA,IAAI,MAClCH,KAAKiG,aAAa,IAAI,MACtBjG,KAAKkB,YAAY,IAAI,MACrBlB,KAAKE,oBAAoB,IAAI,MAC7BF,KAAKO,eAAe,IAAI;;EAIjC,eAAIqB;IACA,OAAO5B,KAAKwB,aAAamG,MAAK,EAAG5F,mBAAiBA;;EAGtD,gBAAIP;IACA,OAAOxB,KAAKuB,eAAeS,QAAO,EAAGD,iBAAeA;;EAmFxD,QAAA0B,CAASlB,GAAkCM;IACvC,OAAMI,KAAEA,GAAGF,QAAEA,KAAWF;IACxB,MAAMC,IAAYC,KAAU;IAE5B,MAAMiF,IAAa,KAAIzF,IAAMY,MAAK,CAAC8E,GAAGC;MAClC,MAAMC,IAASF,EAAE1B,MAAMtD,GAAKoE;MAC5B,MAAMe,IAASF,EAAE3B,MAAMtD,GAAKoE;MAE5B,IAAIc,IAASC,GAAQ,OAAOtF,MAAc,SAAS,IAAI;MACvD,IAAIqF,IAASC,GAAQ,OAAOtF,MAAc,QAAQ,KAAK;MACvD,OAAO;AAAC;IAGZ,OAAOkF;;;;EAMX,MAAAK;IACI,OAAMC,SAAEA,KAAYtI;IACpB,OACIuI,EAAA;MAAAtF,KAAA;MAAKuF,OAAM;OACPD,EAAA;MAAAtF,KAAA;OACKqF,KAAWC,EAAA;MAAAtF,KAAA;MAASuF,OAAOxI,KAAKyI,cAAc,OAAOjF;OAAY8E,IACjEtI,KAAK0I,uBACL1I,KAAK2I,qBACL3I,KAAK4I,oBACL5I,KAAK6I;;EAMtB,iBAAAC,CAAkBC;IACd,KAAKA,GAAM;IAEX,OAAM/B,MAAEA,GAAIM,WAAEA,GAASD,OAAEA,KAAU0B;IAEnC,IAAI,EAACvF,WAAW,OAAMwF,SAAS3B,IAAQ;IAEvC,QAAQL;KACJ,KAAK;MACD,IAAIiC;MACJ,eAAe5B;OACX,KAAK;QACD4B,IAAaC,WAAW7B;QACxB;;OAEJ,KAAK;QACD4B,IAAa5B,IAAQ,IAAI;QACzB;;OAEJ;QACI4B,IAAa5B;QACb;;MAGR,OACIkB,EAAA;QAAA,cACgBjB;QACZD,OAAO4B;QACPE,OAAOJ,EAAKvB;QACZ4B,QAAQL,EAAKxB;QACb8B,MAAK;;;KAIjB,KAAK;MACD,MAAMC,WAAuBjC,MAAU,WAAWA,IAAQ,GAAGA;MAC7D,OACIkB,EAAA;QACIgB,OAAOjC;QACPN,MAAMsC;;;KAIlB,KAAK;MACD,SAASjC,IACLkB,EAAA;QACIgB,OAAOC,EAAI;QACXxC,MAAK;WAGTuB,EAAA;QAAA,cAAiBiB,EAAI;;;KAG7B,KAAK;MACD,OAAOjB,EAAA;QAAA,cAAkBjB;SAAYD;;KAEzC;MACI,OAAOkB,EAAA;QAAA,cAAiBjB;SAAYD;;;EAIhD,gBAAAuB;IACI,OAAMhB,YAAEA,GAAUG,iBAAEA,GAAe0B,WAAEA,GAASC,cAAEA,GAAYC,SAAEA,KAAY3J;IAC1E,IAAI4H,KAAc+B,GAAS,OAAO;IAElC,OACIpB,EAAA,eACIA,EAAA;MAAIC,OAAM;OACND,EAAA;MAAIqB,SAAS7B;OACTQ,EAAA;MAAMsB,MAAK;OACPtB,EAAA;MAAKC,OAAM;OACPD,EAAA;MAASvB,MAAMyC;QACflB,EAAA,WAAIiB,EAAIE;;EASpC,mBAAAhB;IACI,OAAQpF,mBAAmBa,GAAO8B,YAAEA,GAAU/E,WAAEA,GAAShB,mBAAEA,GAAiBK,cAAEA,KAAiBP;IAE/F,KAAKmE,EAAQhC,QAAQ,OAAO;IAE5B,OACIoG,EAAA,kBACKtC,KAAcsC,EAAA;MAAKC,OAAM;QACzBrE,EAAQzB,KAAI,EAAGoH,UAAOC,wBACnBxB,EAAA;MAAKyB,OAAO;QAAEF;QAAOC;;UAExB7I,KAAaqH,EAAA;MAAKC,OAAM;QACxBtI,KAAqBqI,EAAA;MAAKC,OAAM;QAChCjI,KAAgBgI,EAAA;MAAKC,OAAM;;;EAKxC,iBAAAG;IACI,OACIrF,mBAAmBa,GAAO8B,YAC1BA,GAAU/E,WACVA,GAAS+I,eACTA,GAAa3I,YACbA,GAAUpB,mBACVA,GAAiBK,cACjBA,GAAY2B,iBACZA,GAAeS,kBACfA,GAAgBiF,YAChBA,GAAU+B,SACVA,KACA3J;IAEJ,KAAKmE,EAAQhC,QAAQ,OAAO;IAE5B,OACIoG,EAAA,eACIA,EAAA,YACKtC,KACGsC,EAAA,YACKjH,MAAe,cACZiH,EAAA;MACIgB,OAAOC,EAAI;MAAyC;MAEpDU,UAAU,MAAMlK,KAAK8H,cAAc9G,KAAK;QAAEU,UAAUQ;;MACpDR,SAASkG,KAAc1F,MAAoBS;MAC3CwH,eAAevC,KAAcjF,MAAqBT;MAClDgD,UAAUyE,MAAY/B;MAAU,WACxB;SAKvBzD,EAAQzB,KAAIG;MACT,OAAMkE,OAAEA,GAAKhE,QAAEA,GAAMmE,eAAEA,KAAkBrE;MACzC,MAAMuH,IAAgB;MACtB,IAAIrD,GAAOqD,EAAcC,KAAK,SAAStD;MACvC,IAAIG,GAAekD,EAAcC,KAAK,kBAAkBnD;MACxD,MAAMnE,GAAQqH,EAAcC,KAAK;MACjC,OACI9B,EAAA;QACIC,OAAO4B,EAAcE,KAAK;QAC1BrI,IAAI,UAAUY,EAAOI;SAEpBJ,EAAOQ,WACJkF,EAAA;QACIgC,SAAS,MAAMvK,KAAK4C,OAAOC;QAAO,WAC1B;QACRqC,UAAUlF,KAAK2J;SAEfpB,EAAA;QACIC,OAAM;QAAgB,cACV3F,EAAOyE,aAAa9D;SAEhC+E,EAAA;QAAMsB,MAAM,eAAehH,EAAOI;SAAQJ,EAAOqD,UAE9CnD,IACCwF,EAAA;QACIC,OAAO,8BAA8BzF;QACrCiE,MAAK;QACLuC,OACIxG,MAAW,QACLyG,EAAI,8CACJA,EAAI;QAA4C,WAElD;WAGZjB,EAAA;QACIC,OAAO;QACPxB,MAAK;QACLuC,OAAOC,EAAI;QAAuC,WAC1C;aAMxBjB,EAAA;QACIC,OAAM;QAAgB,cACV3F,EAAOyE,aAAa9D;SAEhC+E,EAAA;QAAMsB,MAAM,eAAehH,EAAOI;SAAQJ,EAAOqD;AAGxD,SAGZhF,KACGqH,EAAA;MACItG,IAAG;MACHuG,OAAOyB,IAAgB,OAAOzG;OAE9B+E,EAAA;MAAMC,OAAM;OAAMgB,EAAI,wCAG7BtJ,KACGqI,EAAA;MAAItG,IAAG;OACHsG,EAAA;MAAMC,OAAM;OAAMgB,EAAI,yCAG7BjJ,KACGgI,EAAA,YACIA,EAAA;MAAMC,OAAM;OAAMgB,EAAI;;EAQ9C,eAAAX;IACI,OACIvF,mBAAmBa,GACnB5C,gBAAgBgB,GAAI0D,YACpBA,GAAU/E,WACVA,GAASsJ,SACTA,GAAOP,eACPA,GAAa3I,YACbA,GAAUpB,mBACVA,GAAiBK,cACjBA,GAAYwH,iBACZA,GAAe4B,SACfA,KACA3J;IAEJ,IAAI2J,GAAS;MACT,OACIpB,EAAA,eACIA,EAAA;QAAIC,OAAM;SACND,EAAA;QAAIqB,SAAS7B;SACTQ,EAAA;QAAYkC,QAAM;;;IAOtC,IAAIC,IAAmB;IACvB,IAAI9I;IACJ,IAAIN,MAAe,UAAU;MACzBM,IAAc5B,KAAK4B;MACnB8I,MAAqB9I;;IAEzB,MAAM+I,IAAmB;IACzB,IAAIzJ,GAAWyJ,EAAiBN,KAAK;IACrC,IAAIJ,GAAeU,EAAiBN,KAAK;IACzC,MAAMO,IAAuBD,EAAiBL,KAAK;IAEnD,OACI/B,EAAA,eACKhG,EAAKG,KAAI7B;MACN,MAAMgK,IAAiB,OAAOhK,EAAIoB;MAClC,MAAM6I,IAAoB,OAAOjK,EAAIoB;MACrC,MAAM8I,IAAmB,OAAOlK,EAAIoB;MACpC,MAAM+I,IACF9K,OAAuBF,KAAKK,YAAYC,cAAc,UAAUwK;MACpE,MAAMG,IACF1K,OAAkBP,KAAKK,YAAYC,cAAc,UAAUyK;MAC/D,MAAMG,IAAa;MACnB,IAAIF,GAAsBE,EAAWb,KAAK;MAC1C,IAAInJ,GAAWgK,EAAWb,KAAK;MAC/B,IAAIG,GAASU,EAAWb,KAAK;MAC7B,IAAIxJ,EAAI6C,UAAUwH,EAAWb,KAAK;MAClC,IAAIxJ,EAAIkB,UAAUmJ,EAAWb,KAAK;MAClC,MAAMc,IAAiBjK,KAAa8J;MAEpC,OACIzC,EAAC6C,GAAQ,MACL7C,EAAA;QACItG,IAAI,OAAOpB,EAAIoB;QACfuG,OAAO0C,EAAWZ,KAAK;QACvBC,SAASY,KAAc,CAAKE,KAAKrL,KAAKiB,gBAAgBoK,GAAGxK;QACzDyK,UAAUH,KAAkB,IAAI3H;SAE/ByC,KACGsC,EAAA;QACIC,OAAM;QACN+B,SAASvK,KAAKoB;SAEdmH,EAAA;QACIgB,OAAOC,EAAI;QAAqC;QAEhD9H,SAASb,EAAIkB;QACbmD,UAAWwF,KAAoB7J,MAAQe,KAAgBf,EAAIqE;QAC3DgF,UAAUmB,KAAKrL,KAAKqB,YAAYgK,GAAGxK;QAAI,WAC/B;WAInBsD,EAAQzB,KAAI,EAAGO;QACZ,MAAM8F,IAAOlI,EAAI0F,MAAMtD;QACvB,MAAMgE,IAAY8B,MAAI,QAAJA,WAAI,aAAJA,EAAM9B;QACxB,MAAMsE,IAAYxC,MAAI,QAAJA,WAAI,aAAJA,EAAMhC;QACxB,MAAMyE,IAAoBzC,MAAI,QAAJA,WAAI,aAAJA,EAAM7B;QAChC,MAAMuE,IAAc;QACpB,IAAIF,GAAWE,EAAYpB,KAAK,SAASkB;QACzC,IAAIC,GAAmBC,EAAYpB,KAAK,kBAAkBmB;QAC1D,IAAIvE,GAAWwE,EAAYpB,KAAK;QAChC,MAAMqB,IAAazE,IACb;UAAE,2BAA2B,GAAGA;YAChCzD;QAEN,OACI+E,EAAA;UACIC,OAAOiD,EAAYnB,KAAK;UACxBN,OAAO0B;WAEPnD,EAAA;UAAMsB,MAAM,GAAGgB,KAAkB5H;WAC5BjD,KAAK8I,kBAAkBC;AAE3B,WAGZ7H,KACGqH,EAAA;QAAIC,OAAOoC;SACPrC,EAAA;QACIoD,QAAO;QACPtC,MAAK;QACLkB,SAASc,KAAKrL,KAAKW,WAAW0K,GAAGxK;QAAI,WAC7B;SAEP2I,EAAI,wCAIhBtJ,KACGqI,EAAA;QACIC,OAAM;QACN+B,SAASvK,KAAKoB;SAEb4J,KACGzC,EAAA;QACIgC,SAASc,KAAKrL,KAAKmB,YAAYkK,GAAGxK;QAClC+K,cAAc,GAAG/K,EAAI6C;QACrBmI,cAAcf;QACdxD,WAAWkC,EAAI;QAAqC,WAC5C;SAERjB,EAAA;QACIvB,MAAK;QACLwB,OAAM;YAMzBjI,KACGgI,EAAA;QACIC,OAAM;QACN+B,SAASvK,KAAKoB;SAEb6J,KAAsB1C,EAAA;QAAMsB,MAAMkB;YAI9CC,KACGzC,EAAA;QACItG,IAAI6I;QACJtC,OAAM;QACNsD,SAASjL,EAAI6C;QAAQ,gBACP7C,EAAI6C;SAElB6E,EAAA;QACIqB,SAAS7B;QACT5D,SAAQ;SAERoE,EAAA;QAAKC,OAAM;SACPD,EAAA;QAAMsB,MAAMiB;;AAKrB"}
+{"version":3,"names":["q2DataTableCss","Q2DataTableStyle0","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onClickRow","event","row","stopPropagation","click","emit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectMode","serializedRows","selectedRows","currentlySelectedRows","checked","detail","selectedRow","Object","assign","selected","filter","id","allRowsSelected","length","isIndeterminate","selectEvent","select","rows","allSelected","defaultPrevented","map","someRowsSelected","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","shouldAutoSort","sortable","serializedHeaders","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","hasRowData","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","emptyIcon","emptyMessage","loading","colSpan","name","width","backgroundColor","style","hideClickable","onChange","indeterminate","headerClasses","push","join","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","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    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    &.striped {\n        &:nth-child(even) {\n            background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n        }\n        &:nth-child(odd) {\n            background: var-list(--tct-data-table-row-odd-background, transparent);\n        }\n    }\n\n    &.expandable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-expandable-row-hover-background,\n                --tct-table-expandable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\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}\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@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 => {\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');\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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"}

package/dist/q2-tecton-elements/q2-detail.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i } from "./index-7a5365e2.js";
 
-import { e as l, l as s } from "./index-f2a66217.js";
+import { e as l, l as s } from "./index-c215e8ef.js";
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 
@@ -103,16 +103,16 @@ const n = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "5266648e705eff434fd3f70992e4131b465093a1",
+      key: "31081cac439671e39ec9b02b828db387113a507c",
       class: this.detailClasses
     }, this.hasLabel && e("div", {
-      key: "8790254081b4a51a2e71ffd0342f5946b0d49bfe",
+      key: "d7be91dd4ce47403f313532152eff0af41a1d55d",
       class: this.labelClasses,
       "aria-describedby": !!this.description ? "label-description" : undefined
     }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? e("slot", {
       name: "label"
     }) : ""), this.hasDescripiton && e("div", {
-      key: "226f0df4f71a50e44cb8eafff8d1f74d3a9a7b33",
+      key: "7eeda391672bc9da268c1f3fb2b3cfeb338bb71b",
       id: "label-description",
       class: this.descriptionClasses
     }, !!this.description ? s(this.description) : this.hasDefaultSlotContent ? e("slot", null) : ""));

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as e, g as r } from "./index-7a5365e2.js";
 
-import { l as i, a as n, o as d } from "./index-f2a66217.js";
+import { l as i, a as n, o as d } from "./index-c215e8ef.js";
 
 /**
  * Emits specified events from a given component context with the provided detail.

package/dist/q2-tecton-elements/q2-dropdown.entry.js

@@ -2,7 +2,7 @@ import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
 
 import { s as o, a as s } from "./action-sheet-1e24cb38.js";
 
-import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-f2a66217.js";
+import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-c215e8ef.js";
 
 const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 
@@ -302,12 +302,12 @@ const f = class {
   render() {
     const t = this.toggleButtonProps;
     return e("click-elsewhere", {
-      key: "35405b57c6680f44ce21156a578cea6d96c063b8",
+      key: "b33ac057eb9cf2ae88e39a83d18d1a75f4dd7793",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, e("q2-btn", {
-      key: "8ec87dae4f675d7764d91e91a3e37f704ad73d07",
+      key: "8d03a9b54915a78f30f4d64ea018a34ee4edcfcc",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
@@ -334,7 +334,7 @@ const f = class {
     }) : " ", this.label && !this.hideLabel && e("span", {
       class: "dropdown-button-text"
     }, c(this.label)))), e("q2-popover", {
-      key: "c71cdf5198dc87f720828d1b9623eadde266d118",
+      key: "23ce69a28249b3617cce160bf02947d9628f88ec",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -346,7 +346,7 @@ const f = class {
       mode: this.popoverMode || undefined,
       block: this.block
     }, e("q2-option-list", {
-      key: "42b372ea1203e50d15253590f4b8454df5b4f6d7",
+      key: "5ae6f5a607034cf806d4a6a624c2f2b8d841c511",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
@@ -354,7 +354,7 @@ const f = class {
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
     }, e("slot", {
-      key: "50f04d7a1f74de7cf41b74d4b00b99b9a58eec8d"
+      key: "150892ab22663193f1287d9fee6022c1cfd2ae4c"
     }))));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, g as s } from "./index-7a5365e2.js";
 
-import { a as n, o as a, i as h, w as r, l as d } from "./index-f2a66217.js";
+import { a as n, o as a, i as h, w as r, l as d } from "./index-c215e8ef.js";
 
 const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 
@@ -275,7 +275,7 @@ const c = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "255dac3b6e39618e37fc129ef0a743aca1aefc88"
+      key: "2ef1d8ffac344d753365e3a0a09d87b54af2d213"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-example.entry.js

@@ -131,7 +131,7 @@ const d = class {
   }
   render() {
     return n(o, {
-      key: "e4df51465f7c14e0ff4ae2463613e73cc6100318",
+      key: "e10e5c49d95398750c7b6347c80d0ed1a8eb6390",
       attribute: "navigation"
     }, this.renderMenuInner());
   }