q2-tecton-elements 1.47.0 → 1.48.1-alpha.0

package/dist/esm/q2-data-table.entry.js.map

@@ -1 +1 @@
-{"file":"q2-data-table.entry.js","mappings":"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","names":[],"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('0 2px 4px rgba(0, 0, 0, 0.3)')\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\ntd,\nth {\n    padding: var(--comp-cell-padding);\n    text-align: start;\n    vertical-align: middle;\n\n    &.align-end {\n        text-align: end;\n    }\n    &.align-center {\n        text-align: center;\n    }\n    &.vertical-align-top {\n        vertical-align: top;\n    }\n    &.vertical-align-bottom {\n        vertical-align: bottom;\n    }\n}\n\nth {\n    .header-content {\n        font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n        font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n    }\n\n    &.sorted {\n        .header-content {\n            font-weight: var-list(\n                --tct-data-table-header-sorted-font-weight,\n                --tct-table-header-sorted-font-weight,\n                600\n            );\n        }\n    }\n\n    .sorted-indicator {\n        --comp-header-sortable-icon-size: #{var-list(\n                --tct-data-table-header-sortable-icon-size,\n                --tct-table-header-sortable-icon-size,\n                --app-scale-3x,\n                15px\n            )};\n        --tct-icon-stroke-width: 2;\n\n        width: var(--comp-header-sortable-icon-size);\n        height: var(--comp-header-sortable-icon-size);\n\n        &.direction-ASC {\n            transform: rotate(180deg);\n        }\n    }\n\n    q2-btn {\n        .header-content {\n            display: flex;\n            align-items: center;\n            gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n        }\n    }\n}\n\ntr {\n    &.expandable,\n    &.clickable {\n        cursor: pointer;\n\n        &:focus {\n            outline: none;\n            box-shadow: none;\n        }\n    }\n\n    &.expandable {\n        &: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([bordered]:not([bordered='false'])) tbody & {\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} 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    sortable?: boolean;\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    /** Adds a border between each row for the table. */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\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 }) clickable: boolean;\n\n    /** Provides a caption for the data table. */\n    @Prop({ mutable: true }) caption: string;\n\n    /** Determines the amount of padding for each of the cells in the table. */\n    @Prop({ mutable: true, reflect: true }) density: 'compact' | 'normal' | 'comfortable';\n\n    /** Determines the `q2-icon` that will display when `rows` has no value. */\n    @Prop({ reflect: true }) emptyIcon: string = 'inbox';\n\n    /** Determines the message that will display when `rows` has no value.\n     * @localizable\n     */\n    @Prop({ reflect: true }) emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n    /**\n     * Defines the headers of the table.\n     *\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 }) 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 }) 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 }) hideClickable: boolean;\n\n    /** Displays a loading state on the table to indicate background activity. */\n    @Prop({ mutable: true, reflect: true }) loading: boolean;\n\n    /**\n     * Defines the rows of the table.\n     *\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 }) rows: Q2DataTableRow[];\n\n    /** Adds a checkbox to each row of the table making it selectable. */\n    @Prop({ mutable: true, reflect: true }) 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 }) selectMode: 'multiple' | 'single' = 'multiple';\n\n    /** Adds a shadow to the table */\n    @Prop({ mutable: true, reflect: true }) shadowed: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() serializedHeaders: Q2DataTableHeader[] = [];\n    @State() serializedRows: Q2DataTableSerializedRow[] = [];\n    @State() hasExpandableRows: boolean = false;\n    @State() hasDropdowns: boolean = false;\n    @State() allRowsSelected: boolean = false;\n    @State() someRowsSelected: boolean = false;\n    @State() hasRowData: boolean = false;\n    @State() checkSlotCount: number = 0;\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() select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\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() click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\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() toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\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() sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\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() selectAllRows: EventEmitter<{ checked: boolean }>;\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    /// LifeCycle Hooks ///\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    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    /// Getters ///\n    get selectedRows() {\n        return this.serializedRows.filter(({ selected }) => selected);\n    }\n\n    get selectedRow() {\n        return this.selectedRows.find(({ selected }) => !!selected);\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 mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    /// Helpers ///\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    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    /// Watchers ///\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\n        this.hasRowData = !!rows.length;\n        this.allRowsSelected = this.hasRowData && isAllSelected;\n        this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n        this.serializedRows = !!sortedHeader ? 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    /// Listeners ///\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    /// Event Handlers ///\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        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\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    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    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        this.click.emit({ row });\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    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    /// DOM ///\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    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                                            {header.title}\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                                        {header.title}\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    renderEmptyState() {\n        const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n        if (hasRowData || loading) return null;\n\n        return (\n            <slot name=\"empty-table\">\n                <tbody>\n                    <tr class=\"empty-state\">\n                        <td colSpan={numberOfColumns}>\n                            <div class=\"empty-state-content\">\n                                <q2-icon type={emptyIcon}></q2-icon>\n                                <p>{loc(emptyMessage)}</p>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </slot>\n        );\n    }\n\n    renderTableRows() {\n        const {\n            serializedHeaders: headers,\n            serializedRows: rows,\n            selectable,\n            clickable,\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 (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    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"],"version":3}
+{"file":"q2-data-table.entry.js","mappings":"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","names":[],"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('0 2px 4px rgba(0, 0, 0, 0.3)')\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} 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    sortable?: boolean;\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    /** Adds borders between rows and/or columns in the table. */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean | 'horizontal' | 'vertical' | 'grid';\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 }) clickable: boolean;\n\n    /** Provides a caption for the data table. */\n    @Prop({ mutable: true }) caption: string;\n\n    /** Determines the amount of padding for each of the cells in the table. */\n    @Prop({ mutable: true, reflect: true }) density: 'compact' | 'normal' | 'comfortable';\n\n    /** Determines the `q2-icon` that will display when `rows` has no value. */\n    @Prop({ reflect: true }) emptyIcon: string = 'inbox';\n\n    /** Determines the message that will display when `rows` has no value.\n     * @localizable\n     */\n    @Prop({ reflect: true }) emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n    /**\n     * Defines the headers of the table.\n     *\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 }) 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 }) 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 }) hideClickable: boolean;\n\n    /** Displays a loading state on the table to indicate background activity. */\n    @Prop({ mutable: true, reflect: true }) loading: boolean;\n\n    /**\n     * Defines the rows of the table.\n     *\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 }) rows: Q2DataTableRow[];\n\n    /** Adds a checkbox to each row of the table making it selectable. */\n    @Prop({ mutable: true, reflect: true }) 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 }) selectMode: 'multiple' | 'single' = 'multiple';\n\n    /** Adds a shadow to the table */\n    @Prop({ mutable: true, reflect: true }) shadowed: boolean;\n\n    /** Enables alternating background colors for the table rows */\n    @Prop({ reflect: true }) striped: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() serializedHeaders: Q2DataTableHeader[] = [];\n    @State() serializedRows: Q2DataTableSerializedRow[] = [];\n    @State() hasExpandableRows: boolean = false;\n    @State() hasDropdowns: boolean = false;\n    @State() allRowsSelected: boolean = false;\n    @State() someRowsSelected: boolean = false;\n    @State() hasRowData: boolean = false;\n    @State() checkSlotCount: number = 0;\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() select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\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() click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\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() toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\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() sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\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() selectAllRows: EventEmitter<{ checked: boolean }>;\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    /// LifeCycle Hooks ///\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    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    /// Getters ///\n    get selectedRows() {\n        return this.serializedRows.filter(({ selected }) => selected);\n    }\n\n    get selectedRow() {\n        return this.selectedRows.find(({ selected }) => !!selected);\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 mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    /// Helpers ///\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    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    /// Watchers ///\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\n        this.hasRowData = !!rows.length;\n        this.allRowsSelected = this.hasRowData && isAllSelected;\n        this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n        this.serializedRows = !!sortedHeader ? 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    /// Listeners ///\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    /// Event Handlers ///\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        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\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    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    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        this.click.emit({ row });\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    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    /// DOM ///\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    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    renderEmptyState() {\n        const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n        if (hasRowData || loading) return null;\n\n        return (\n            <slot name=\"empty-table\">\n                <tbody>\n                    <tr class=\"empty-state\">\n                        <td colSpan={numberOfColumns}>\n                            <div class=\"empty-state-content\">\n                                <q2-icon type={emptyIcon}></q2-icon>\n                                <p>{loc(emptyMessage)}</p>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </slot>\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    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"],"version":3}

package/dist/esm/q2-dropdown-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-1e1ce94e.js';
-import { h as handleAriaLabel, l as loc } from './index-3c5cd75e.js';
+import { l as loc, h as handleAriaLabel } from './index-3c5cd75e.js';
 
 const q2DropdownItemCss = "*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
 const Q2DropdownItemStyle0 = q2DropdownItemCss;
@@ -7,6 +7,11 @@ const Q2DropdownItemStyle0 = q2DropdownItemCss;
 const Q2DropdownItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        //////// HELPERS /////////
+        this.handleQ2LocValue = () => {
+            const locElement = this.hostElement.querySelector('q2-loc');
+            return locElement ? loc(locElement.value, locElement.substitutions) : '';
+        };
         this.onItemClick = (event) => {
             event.stopImmediatePropagation();
             this.hostElement.dispatchEvent(new CustomEvent('click', {
@@ -49,24 +54,27 @@ const Q2DropdownItem = class {
         this.separator = undefined;
         this.value = undefined;
         this.ariaLabel = undefined;
+        this.q2LocValue = undefined;
     }
     /////// LIFECYCLE HOOKS //////
     componentWillLoad() {
         handleAriaLabel(this);
+        this.q2LocValue = this.handleQ2LocValue();
     }
     //////// OBSERVERS //////////
     ariaLabelObserver() {
         handleAriaLabel(this);
     }
+    //////// GETTERS ////////
+    get innerLabel() {
+        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;
+    }
     get removeLabel() {
-        return loc('tecton.element.dropdownItem.remove', [this.label || '']);
+        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);
     }
     get dropdownItemBtn() {
         return this.hostElement.shadowRoot.querySelector('.dropdown-item');
     }
-    get innerLabel() {
-        return this.label || this.hostElement.textContent;
-    }
     get removeBtn() {
         return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');
     }
@@ -83,6 +91,7 @@ const Q2DropdownItem = class {
     focusRemoveBtn() {
         this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
     }
+    //////// DOM ////////
     render() {
         if (!!this.separator) {
             return this.separatorDOM();

package/dist/esm/q2-dropdown-item.entry.js.map

@@ -1 +1 @@
-{"file":"q2-dropdown-item.entry.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-dropdown-item.entry.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, State, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() q2LocValue: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    //////// GETTERS ////////\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    //////// HELPERS /////////\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        return locElement ? loc(locElement.value, locElement.substitutions) : '';\n    };\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    //////// DOM ////////\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-editable-field.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint } from './index-3c5cd75e.js';
+import { h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, w as waitForNextPaint } from './index-3c5cd75e.js';
 
 const q2EditableFieldCss = "*{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}";
 const Q2EditableFieldStyle0 = q2EditableFieldCss;
@@ -46,12 +46,6 @@ const Q2EditableField = class {
                 value: this.innerValue || valueFromInputProp,
                 formattedValue: this.formattedValue || valueFromInputProp,
             });
-            setTimeout(() => {
-                const { errors = [] } = this;
-                if (!errors.length)
-                    return;
-                this.hostElement.focus();
-            }, 1);
         };
         this.editClick = (event) => {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -78,9 +72,6 @@ const Q2EditableField = class {
         this.ariaLabel = undefined;
         this.formattedValue = undefined;
     }
-    get locLabel() {
-        return (this.label && loc(this.label)) || '';
-    }
     /////// LIFECYCLE HOOKS ///////
     componentWillLoad() {
         handleAriaLabel(this);
@@ -93,13 +84,24 @@ const Q2EditableField = class {
     componentDidLoad() {
         overrideFocus(this.hostElement);
     }
+    //////// GETTERS ////////
+    get hasErrors() {
+        return Array.isArray(this.errors) && !!this.errors.length;
+    }
+    get hasHints() {
+        return Array.isArray(this.hints) && !!this.hints.length;
+    }
+    get wrapperClass() {
+        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
+    }
+    get locLabel() {
+        return (this.label && loc(this.label)) || '';
+    }
     //////// OBSERVERS ////////
     errorsObserver() {
-        var _a;
-        const { editing, errors = [] } = this;
+        const { editing, hasErrors } = this;
         const focusedElement = this.hostElement.shadowRoot.activeElement;
-        const isInputFocused = (_a = (focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) === 'Q2-INPUT') !== null && _a !== void 0 ? _a : false;
-        const hasErrors = errors.length;
+        const isInputFocused = (focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) === 'Q2-INPUT';
         if (isInputFocused || !focusedElement || !editing || !hasErrors)
             return;
         this.inputElement.focus();
@@ -112,22 +114,29 @@ const Q2EditableField = class {
             return;
         this.scheduledAfterRender.push(this.hostElement.focus);
     }
-    get wrapperClass() {
-        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
-    }
     ///////// HOST ELEMENT EVENTS //////
     onHostElementChange(event) {
         if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange)
             return;
-        switch (event.detail.name) {
-            case 'save':
-                this.value = event.detail.value;
-                break;
-            case 'cancel':
-                this.inputElement.value = this.value;
-                break;
-        }
-        this.editing = event.detail.editing;
+        setTimeout(() => {
+            switch (event.detail.name) {
+                case 'save':
+                    if (this.hasErrors) {
+                        this.inputElement.focus();
+                        break;
+                    }
+                    this.value = event.detail.value;
+                    this.editing = event.detail.editing;
+                    break;
+                case 'cancel':
+                    this.inputElement.value = this.value;
+                    this.editing = event.detail.editing;
+                    break;
+                case 'edit':
+                    this.editing = event.detail.editing;
+                    break;
+            }
+        }, 1);
     }
     delegateFocus(event) {
         if (!isEventFromElement(event, this.hostElement))
@@ -186,10 +195,10 @@ const Q2EditableField = class {
         }
     }
     render() {
-        return (h("div", { key: '66150588f5a753181d584bde5472b782af4051c3' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: 'cb9b4c1fefeea576703bba7ee15852249bcc5943' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     generateEditStateDOM() {
-        return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
+        return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.inputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: this.hasHints ? this.hints : undefined, errors: this.hasErrors ? this.errors : undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { ref: el => (this.cancelBtnElement = el), class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { ref: el => (this.saveBtnElement = el), class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
     }
     generateReadStateDOM() {
         if (this.persistentLabel && this.locLabel) {