q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -1 +1 @@
-{"version":3,"names":["q2DataTableCss","Q2DataTable","constructor","hostRef","this","allRowsSelected","checkSlotCount","hasDropdowns","hasExpandableRows","hasRowData","serializedHeaders","serializedRows","someRowsSelected","emptyIcon","emptyMessage","selectAlign","selectMode","checkSlots","_b","_a","hostElement","querySelector","_d","_c","onClickRow","event","row","stopPropagation","mirrorEmit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectedRows","currentlySelectedRows","checked","detail","selectedRow","selected","filter","id","length","isIndeterminate","selectEvent","rows","allSelected","defaultPrevented","map","onSort","header","direction","sorted","sortKey","key","sortEvent","shouldAutoSort","sortable","serializedHeader","undefined","sortRows","expanded","toggleEvent","_","console","error","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","click","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","selectAriaLabel","serializedCells","Object","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","selectableHandler","numberOfColumns","_badgeColumnContent","cell","tags","h","class","x","theme","label","status","size","getSelectRowLabel","Array","isArray","labelParts","allKeysValid","every","part","join","loc","sortedRows","sort","a","b","aValue","bValue","render","caption","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","includes","valueAsString","loading","colSpan","name","width","backgroundColor","style","hideClickable","selectCheckboxColumn","onChange","indeterminate","headerClasses","push","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","index","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","selectCheckboxCell","e","Fragment","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n    --comp-select-column-width: #{var-list(\n            --tct-data-table-select-column-width,\n            --tct-table-select-column-width,\n            --tct-checkbox-size,\n            20px\n        )};\n    --comp-dropdown-column-width: #{var-list(\n            --tct-data-table-dropdown-column-width,\n            --tct-table-dropdown-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n    --comp-expandable-row-control-column-width: #{var-list(\n            --tct-data-table-expandable-row-control-column-width,\n            --tct-table-expandable-row-control-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n\n    overflow: auto;\n    @include tiny-scrollbar();\n\n    :host([shadowed]:not([shadowed='false'])) & {\n        box-shadow: var-list(\n            --tct-data-table-shadow,\n            --tct-table-shadow,\n            --app-shadow-1,\n            unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n        );\n    }\n\n    :host([density='compact']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-compact,\n                --tct-table-cell-padding-compact,\n                --app-scale-1x,\n                5px\n            )};\n    }\n\n    :host([density='comfortable']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-comfortable,\n                --tct-table-cell-padding-comfortable,\n                --app-scale-5x,\n                25px\n            )};\n    }\n\n    :host([sticky]:not([sticky='false'])) & {\n        overflow: unset;\n    }\n}\n\ntable {\n    table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: var-list(--tct-data-table-width, --tct-table-width);\n    min-width: 100%;\n    background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n    backdrop-filter: var-list(--tct-data-table-backdrop-filter, none);\n    caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n    border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n    border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n    border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n    background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n\n    :host([sticky]:not([sticky='false'])) & {\n        position: sticky;\n        top: var(--tct-data-table-sticky-header-top, 0px);\n        background: var-list(--tct-data-table-sticky-header-background, --tct-table-background, --t-base, #ffffff);\n    }\n}\n\ncol {\n    &.select-column {\n        width: var(--comp-select-column-width);\n    }\n\n    &.expandable-row-control-column {\n        width: var(--comp-expandable-row-control-column-width);\n    }\n\n    &.dropdown-column {\n        width: var(--comp-dropdown-column-width);\n    }\n\n    :host(:is([bordered='vertical'], [bordered='grid'])) & {\n        border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n        border-style: var-list(--tct-data-table-column-border-style, solid);\n        border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n        &:last-child {\n            border: none;\n        }\n    }\n}\n\ntd,\nth {\n    padding: var(--comp-cell-padding);\n    text-align: start;\n    vertical-align: middle;\n\n    &.align-end {\n        text-align: end;\n    }\n    &.align-center {\n        text-align: center;\n    }\n    &.vertical-align-top {\n        vertical-align: top;\n    }\n    &.vertical-align-bottom {\n        vertical-align: bottom;\n    }\n}\n\nth {\n    .header-content {\n        font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n        font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n    }\n\n    &.sorted {\n        .header-content {\n            font-weight: var-list(\n                --tct-data-table-header-sorted-font-weight,\n                --tct-table-header-sorted-font-weight,\n                600\n            );\n        }\n    }\n\n    .sorted-indicator {\n        --comp-header-sortable-icon-size: #{var-list(\n                --tct-data-table-header-sortable-icon-size,\n                --tct-table-header-sortable-icon-size,\n                --app-scale-3x,\n                15px\n            )};\n        --tct-icon-stroke-width: 2;\n\n        width: var(--comp-header-sortable-icon-size);\n        height: var(--comp-header-sortable-icon-size);\n\n        &.direction-ASC {\n            transform: rotate(180deg);\n        }\n    }\n\n    q2-btn {\n        .header-content {\n            display: flex;\n            align-items: center;\n            gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n        }\n    }\n}\n\ntr {\n    &.expandable,\n    &.clickable {\n        cursor: pointer;\n\n        &:focus {\n            outline: none;\n            box-shadow: none;\n        }\n    }\n\n    &.expandable {\n        --tct-btn-icon-hover-background: transparent;\n        &:hover {\n            background: var-list(--tct-data-table-expandable-row-hover-background --t-gray-14, #f2f2f2);\n        }\n    }\n\n    &.striped-even {\n        background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n\n        &.expanded {\n            background: var-list(\n                --tct-data-table-expanded-row-even-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n\n        &.expandable {\n            &:hover {\n                background: var-list(\n                    --tct-data-table-expandable-row-even-hover-background,\n                    --tct-data-table-expandable-row-hover-background,\n                    --t-gray-14,\n                    #f2f2f2\n                );\n            }\n        }\n    }\n    &.striped-odd {\n        background: var-list(--tct-data-table-row-odd-background, transparent);\n\n        &.expanded {\n            background: var-list(\n                --tct-data-table-expanded-row-odd-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n\n        &.expandable {\n            &:hover {\n                background: var-list(\n                    --tct-data-table-expandable-row-odd-hover-background,\n                    --tct-data-table-expandable-row-hover-background,\n                    --t-gray-14,\n                    #f2f2f2\n                );\n            }\n        }\n    }\n\n    &.clickable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-clickable-row-hover-background,\n                --tct-table-clickable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n    }\n\n    &.selected {\n        background: var-list(\n            --tct-data-table-selected-row-background,\n            --tct-table-selected-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n    }\n\n    &.expanded {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n\n        .toggle-expandable-row {\n            transform: rotate(180deg);\n        }\n    }\n\n    :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n        tbody\n        & {\n        border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n        border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n        border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n    }\n\n    &.loading-row {\n        background: var-list(\n            --tct-data-table-loading-row-background,\n            --tct-table-loading-row-background,\n            --t-base,\n            #ffffff\n        );\n        td {\n            text-align: center;\n        }\n\n        q2-loading {\n            font-size: 4em;\n        }\n    }\n\n    &.empty-state {\n        background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n        td {\n            text-align: center;\n        }\n        .empty-state-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding-top: var(--app-scale-10x, 50px);\n            padding-bottom: var(--app-scale-10x, 50px);\n            gap: var(--app-scale-4x, 20px);\n            --tct-icon-size: var(--app-scale-6x, 30px);\n        }\n    }\n\n    &.expandable-row {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n\n        .striped-odd + & {\n            background: var-list(\n                --tct-data-table-expanded-row-odd-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n\n        .striped-even + & {\n            background: var-list(\n                --tct-data-table-expanded-row-even-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n    }\n}\n\ntd {\n    font-size: var-list(--tct-data-table-cell-font-size, inherit);\n\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\n.tag-table {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    row-gap: var(--app-scale-2x);\n    column-gap: var(--app-scale-2x);\n\n    q2-tag {\n        --tct-tag-font-size: var(--app-font-size, 14px);\n        --tct-tag-padding-inline: var(--app-scale-2x, 10px);\n        --tct-tag-height: var(--app-scale-4x, 20px);\n        --tct-tag-margin: 0;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Event,\n    Element,\n    EventEmitter,\n    Fragment,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nimport type {\n    Q2DataTableHeader,\n    Q2DataTableCell,\n    Q2DataTableSerializedCells,\n    Q2DataTableRow,\n    Q2DataTableSerializedRow,\n} from 'q2-tecton-common/lib/types/elements';\n\nexport type Q2DataTableBadgeCell = Q2DataTableCell & {\n    type: 'badge';\n    tags: {\n        value: any;\n        badgeTheme: HTMLQ2BadgeElement['theme'];\n    }[];\n};\n\n/**\n * @name Data Table\n * @category Display\n * @summary Use for displaying large datasets with sorting, filtering, and selecting.\n * @slot row-<id>-cell-<key> - A slot for overriding the content of any cell in any row of the table with custom content.\n * @slot header-cell-<key> - A slot for the content of any cell in the header of the table.\n * @slot row-<id>-dropdown - A slot to provide a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) for a row.\n * @slot row-<id>-expandable-content - A slot that makes the row expandable and displays the provided content.\n * @slot empty-table - An optional slot to display custom content when the table is empty.\n */\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    allRowsSelected: boolean = false;\n\n    @State()\n    checkSlotCount: number = 0;\n\n    @State()\n    hasDropdowns: boolean = false;\n\n    @State()\n    hasExpandableRows: boolean = false;\n\n    @State()\n    hasRowData: boolean = false;\n\n    @State()\n    serializedHeaders: Q2DataTableHeader[] = [];\n\n    @State()\n    serializedRows: Q2DataTableSerializedRow[] = [];\n\n    @State()\n    someRowsSelected: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds borders between rows and/or columns in the table. */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean | 'horizontal' | 'vertical' | 'grid';\n\n    /** Provides a caption for the data table. */\n    @Prop({ mutable: true })\n    caption: string;\n\n    /** Adds the ability to click a row and have the table emit an event with the selected row's data. */\n    @Prop({ mutable: true, reflect: true })\n    clickable: boolean;\n\n    /** Determines the amount of padding for each of the cells in the table. */\n    @Prop({ mutable: true, reflect: true })\n    density: 'compact' | 'normal' | 'comfortable';\n\n    /** Determines the `q2-icon` that will display when `rows` has no value. */\n    @Prop({ reflect: true })\n    emptyIcon: string = 'inbox';\n\n    /** Determines the message that will display when `rows` has no value.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n    /**\n     * Defines the headers of the table.\n     *\n     * **Example:**\n     * @snippet\n     * element.headers = [\n     *  {\n     *    title: 'Day of the Week',\n     *    key: 'day',\n     *  },\n     *  {\n     *    title: 'Sales',\n     *    key: 'sales',\n     *    align: 'end',\n     *  }\n     * ]\n     *\n     */\n    @Prop({ mutable: true })\n    headers: Q2DataTableHeader[];\n\n    /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. */\n    @Prop({ mutable: true, reflect: true })\n    hideCaption: boolean;\n\n    /**\n     * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n     *\n     * @info\n     * Use of this property requires `clickable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    hideClickable: boolean;\n\n    /** Displays a loading state on the table to indicate background activity. */\n    @Prop({ mutable: true, reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the rows of the table.\n     *\n     * **Example:**\n     * @snippet\n     * element.rows = [\n     *  {\n     *    id: 1,\n     *    cells: {\n     *      day: 'Monday',\n     *      sales: 93\n     *    }\n     *  },\n     *  {\n     *    id: 2,\n     *    cells: {\n     *      day: 'Tuesday',\n     *      sales: 127\n     *    }\n     *  },\n     *  {\n     *    id: 3,\n     *    cells: {\n     *      day: 'Wednesday',\n     *      sales: 121\n     *    }\n     * ]\n     */\n    @Prop({ mutable: true })\n    rows: Q2DataTableRow[];\n\n    /** Adds a checkbox to each row of the table making it selectable. */\n    @Prop({ mutable: true, reflect: true })\n    selectable: boolean;\n\n    /**\n     * Controls the position of the checkbox column when `selectable` is true.\n     * When set to 'right', the checkbox column will appear on the right side of the table.\n     *\n     * @warning\n     * Use of this property requires `selectable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    selectAlign: 'left' | 'right' = 'left';\n\n    /**\n     * Returns selected rows.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    get selectedRows(): Q2DataTableRow[] {\n        return this.serializedRows?.filter(({ selected }) => !!selected) || [];\n    }\n\n    set selectedRows(_) {\n        console.error('Direct assignment to selectedRows is not allowed.');\n    }\n\n    /**\n     * Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n     * See the documentation on the `select` event for how to handle selections.\n     *\n     * @warning\n     * Use of this property requires `selectable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    selectMode: 'multiple' | 'single' = 'multiple';\n\n    /** Adds a shadow to the table */\n    @Prop({ mutable: true, reflect: true })\n    shadowed: boolean;\n\n    /** Makes table header sticky */\n    @Prop({ reflect: true })\n    sticky: boolean;\n\n    /** Enables alternating background colors for the table rows */\n    @Prop({ reflect: true })\n    striped: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a row is clicked.\n     *\n     * Requires the `clickable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default click behavior.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when a row is selected.\n     *\n     * Requires the `selectable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default selection behavior.\n     * @deprecated Use 'tctSelect' instead\n     */\n    @Event()\n    select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n\n    /**\n     * Emitted when the select-all checkbox is toggled.\n     *\n     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n     *\n     * Call `event.preventDefault()` to prevent the default behavior.\n     * @deprecated Use 'tctSelectAllRows' instead\n     */\n    @Event()\n    selectAllRows: EventEmitter<{ checked: boolean }>;\n\n    /**\n     * Emitted when a column is sorted.\n     *\n     * Requires the `sortable` prop to be set to `true` on the column.\n     *\n     * Call `event.preventDefault()` to prevent the default sorting behavior.\n     * @deprecated Use 'tctSort' instead\n     */\n    @Event()\n    sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    /**\n     * Emitted when a row is clicked.\n     *\n     * Requires the `clickable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default click behavior.\n     */\n    @Event()\n    tctClick: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when a row is selected.\n     *\n     * Requires the `selectable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default selection behavior.\n     */\n    @Event()\n    tctSelect: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n\n    /**\n     * Emitted when the select-all checkbox is toggled.\n     *\n     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n     *\n     * Call `event.preventDefault()` to prevent the default behavior.\n     */\n    @Event()\n    tctSelectAllRows: EventEmitter<{ checked: boolean }>;\n\n    /**\n     * Emitted when a column is sorted.\n     *\n     * Requires the `sortable` prop to be set to `true` on the column.\n     *\n     * Call `event.preventDefault()` to prevent the default sorting behavior.\n     */\n    @Event()\n    tctSort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    /**\n     * Emitted when an expandable row is toggled.\n     *\n     * Requires content in the `row-{id}-expandable-content` slot.\n     *\n     * Call `event.preventDefault()` to prevent the default toggling behavior.\n     */\n    @Event()\n    tctToggle: 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     * @deprecated Use 'tctToggle' instead\n     */\n    @Event()\n    toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.headersHandler(this.headers);\n        this.rowsHandler(this.rows);\n    }\n\n    componentDidLoad(): void {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => this.checkSlots());\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        if (typeof ResizeObserver !== 'undefined') {\n            this.resizeObserver = new ResizeObserver(() => resizeIframe());\n            this.resizeObserver.observe(this.hostElement);\n        }\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onClickListener(event: MouseEvent) {\n        if (event instanceof PointerEvent) event.stopImmediatePropagation();\n    }\n\n    @Listen('selectAllRows')\n    onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n        event.stopPropagation();\n        const { checked } = event.detail;\n        const selectedRows = checked\n            ? this.serializedRows.map(row => {\n                  if (row.disabled) {\n                      return row;\n                  } else {\n                      return {\n                          ...row,\n                          selected: checked,\n                      };\n                  }\n              })\n            : [];\n        const selectEvent = mirrorEmit(this, ['select', 'tctSelect'], {\n            row: undefined,\n            rows: selectedRows,\n            allSelected: checked,\n        });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.disabled) return row;\n            row.selected = checked;\n            return row;\n        });\n        this.allRowsSelected = checked;\n        this.someRowsSelected = false;\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to click a row that accepts a row ID that is will be clicked.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickRow(rowId: number | string) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method that returns the plain text value of a particular cell (including slot content).\n     *\n     * @testOnly\n     */\n    @Method()\n    async getCellContent(rowId: number | string, columnKey: string) {\n        const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n        const text = this.hostElement.shadowRoot.querySelector(\n            `slot[name=row-${rowId}-cell-${columnKey}]`\n        )?.textContent;\n        return slotContent || text || '';\n    }\n\n    /**\n     * A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n     *\n     * @testOnly\n     */\n    @Method()\n    async sortColumn(header: Q2DataTableHeader) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleRowExpansion(rowId: number | string) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleRowSelect(rowId: number | string) {\n        const chk = this.hostElement.shadowRoot.querySelector(\n            `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n        );\n        (chk as HTMLQ2CheckboxElement)?.click();\n    }\n\n    /**\n     * A method to toggle select all button (checkbox) on left top corner.\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleSelectAllRows() {\n        if (!this.selectable) return;\n        const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n        (chk as HTMLQ2CheckboxElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('headers')\n    headersHandler(headers: Q2DataTableHeader[] = []) {\n        this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n            const { title } = header;\n            let { key } = header;\n\n            // If no key is provided, generate one from the title\n            if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n            return {\n                key,\n                ...header,\n            };\n        });\n    }\n\n    @Watch('rows')\n    rowsHandler(rows: Q2DataTableRow[] = []) {\n        const { serializedHeaders, mappedHeaders } = this;\n        const defaultRow = {\n            id: null,\n            cells: {},\n            selected: false,\n            expanded: false,\n            disabled: false,\n        };\n\n        // tracks if the select-all checkbox should be visually updated as the `rows` are built\n        let isAllSelected = true;\n        let isIndeterminate = false;\n\n        const serializedRows = rows.map(({ id, cells, selected, expanded, disabled, selectAriaLabel }) => {\n            const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n                (accum, [cellKey, cellData]) => {\n                    const header = mappedHeaders[cellKey] || ({} as Q2DataTableHeader);\n                    const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n                    const isBadge = 'type' in header && header.type === 'badge';\n                    const defaultCell: Q2DataTableCell = {\n                        value: '',\n                        ariaLabel: undefined,\n                        type,\n                        align,\n                        lineClamp,\n                        verticalAlign,\n                        badgeStatus: isBadge ? header.badgeStatus : undefined,\n                        badgeTheme: isBadge ? header.badgeTheme : undefined,\n                    };\n\n                    const result: Q2DataTableCell =\n                        typeof cellData === 'object'\n                            ? { ...defaultCell, ...cellData }\n                            : { ...defaultCell, value: cellData };\n\n                    accum[cellKey] = result;\n                    return accum;\n                },\n                {}\n            );\n\n            if (isAllSelected && !selected) isAllSelected = false;\n            if (!isAllSelected && selected) isIndeterminate = true;\n            return {\n                ...defaultRow,\n                id,\n                selected: !!selected,\n                expanded: !!expanded,\n                disabled: !!disabled,\n                selectAriaLabel,\n                cells: serializedCells,\n            };\n        });\n\n        const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n        const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n        this.hasRowData = !!rows.length;\n        this.allRowsSelected = this.hasRowData && isAllSelected;\n        this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n        this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n        this.checkSlots();\n    }\n\n    @Watch('selectable')\n    selectableHandler() {\n        if (this.selectable === false) {\n            mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], { checked: false });\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    get numberOfColumns() {\n        return (\n            (this.serializedHeaders?.length ?? 0) +\n            (this.selectable ? 1 : 0) +\n            (this.clickable ? 1 : 0) +\n            (this.hasExpandableRows ? 1 : 0) +\n            (this.hasDropdowns ? 1 : 0)\n        );\n    }\n\n    _badgeColumnContent(cell: Q2DataTableBadgeCell) {\n        if (cell.tags?.length) {\n            return (\n                <div class=\"tag-table\">\n                    {cell.tags.map(x => {\n                        return (\n                            <q2-tag\n                                theme={x.badgeTheme}\n                                label={x.value}\n                            />\n                        );\n                    })}\n                </div>\n            );\n        }\n\n        return (\n            <q2-badge\n                aria-label={cell.ariaLabel}\n                value={typeof cell.value !== 'boolean' ? cell.value : cell.value ? 1 : 0}\n                theme={cell.badgeTheme}\n                status={cell.badgeStatus}\n                size=\"large\"\n            />\n        );\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    getSelectRowLabel(row: Q2DataTableSerializedRow): string {\n        const { selectAriaLabel, cells } = row;\n\n        if (typeof selectAriaLabel === 'string') {\n            return selectAriaLabel;\n        }\n\n        if (Array.isArray(selectAriaLabel)) {\n            const labelParts = selectAriaLabel.map(key => {\n                const cell = cells[key];\n                const header = this.serializedHeaders.find(h => h.key === key);\n                if (cell?.value === undefined || !header) return undefined;\n                return `${header.title} ${cell.value}`;\n            });\n            const allKeysValid = labelParts.every(part => part !== undefined);\n\n            if (allKeysValid) {\n                return `Select row for ${labelParts.join(', ')}`;\n            }\n        }\n\n        return loc('tecton.element.dataTable.selectRow');\n    }\n\n    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        mirrorEmit(this, ['click', 'tctClick'], { row });\n    };\n\n    onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        if (this.clickable) {\n            this.onClickRow(event, row);\n        } else if (this.hasExpandableRows) {\n            this.onToggleRow(event, row);\n        }\n    };\n\n    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const { selectMode, serializedRows, selectedRows: currentlySelectedRows = [] } = this;\n        const { checked } = event.detail;\n\n        const selectedRow = { ...row, selected: checked };\n        let selectedRows;\n        if (selectMode === 'single') {\n            selectedRows = checked ? [selectedRow] : [];\n        } else {\n            selectedRows = checked\n                ? [...currentlySelectedRows, selectedRow]\n                : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n        }\n\n        const allRowsSelected = selectedRows.length === serializedRows.length;\n        const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n        const selectEvent = mirrorEmit(this, ['select', 'tctSelect'], {\n            row: selectedRow,\n            rows: selectedRows,\n            allSelected: allRowsSelected,\n        });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n        this.allRowsSelected = allRowsSelected;\n        this.someRowsSelected = isIndeterminate;\n    };\n\n    onSort = (header: Q2DataTableHeader) => {\n        const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n        const sortKey = header.key;\n        const sortEvent = mirrorEmit(this, ['sort', 'tctSort'], { header, direction });\n        if (sortEvent.defaultPrevented) return;\n\n        const shouldAutoSort = header.sortable !== 'manual';\n        if (!shouldAutoSort) return;\n\n        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n    };\n\n    onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const selectedRow = { ...row, expanded: !row.expanded };\n        const toggleEvent = mirrorEmit(this, ['toggle', 'tctToggle'], { row: selectedRow });\n        if (toggleEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.id === selectedRow.id) return selectedRow;\n            else return { ...row };\n        });\n    };\n\n    sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n        const { key, sorted } = header;\n        const direction = sorted || 'ASC';\n\n        const sortedRows = [...rows].sort((a, b) => {\n            const aValue = a.cells[key].value;\n            const bValue = b.cells[key].value;\n\n            if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n            if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n            return 0;\n        });\n\n        return sortedRows;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { caption } = this;\n        return (\n            <div class=\"container\">\n                <table>\n                    {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n                    {this.renderTableColGroup()}\n                    {this.renderTableHeader()}\n                    {this.renderEmptyState()}\n                    {this.renderTableRows()}\n                </table>\n            </div>\n        );\n    }\n\n    renderCellContent(cell: Q2DataTableCell) {\n        if (!cell) return;\n\n        const { type, ariaLabel, value } = cell;\n\n        if ([undefined, null].includes(value)) return;\n\n        switch (type) {\n            case 'badge':\n                return this._badgeColumnContent(cell as Q2DataTableBadgeCell);\n\n            case 'icon':\n                const valueAsString = typeof value === 'string' ? value : `${value}`;\n                return (\n                    <q2-icon\n                        label={ariaLabel}\n                        type={valueAsString}\n                    ></q2-icon>\n                );\n\n            case 'boolean':\n                return !!value ? (\n                    <q2-icon\n                        label={loc('tecton.element.dataTable.booleanTrue')}\n                        type=\"checkmark\"\n                    ></q2-icon>\n                ) : (\n                    <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n                );\n\n            case 'code':\n                return <code aria-label={ariaLabel}>{value}</code>;\n\n            default:\n                return <div aria-label={ariaLabel}>{value}</div>;\n        }\n    }\n\n    renderEmptyState() {\n        const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n        if (hasRowData || loading) return null;\n\n        return (\n            <tbody>\n                <tr class=\"empty-state\">\n                    <td colSpan={numberOfColumns}>\n                        <slot name=\"empty-table\">\n                            <div class=\"empty-state-content\">\n                                <q2-icon type={emptyIcon}></q2-icon>\n                                <p>{loc(emptyMessage)}</p>\n                            </div>\n                        </slot>\n                    </td>\n                </tr>\n            </tbody>\n        );\n    }\n\n    renderTableColGroup() {\n        const {\n            serializedHeaders: headers,\n            selectable,\n            selectAlign,\n            clickable,\n            hasExpandableRows,\n            hasDropdowns,\n        } = this;\n\n        if (!headers.length) return null;\n\n        return (\n            <colgroup>\n                {selectable && selectAlign === 'left' && <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                {selectable && selectAlign === 'right' && <col class=\"select-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        const selectCheckboxColumn = selectable ? (\n            <th class=\"select-column\">\n                {selectMode === 'multiple' ? (\n                    <q2-checkbox\n                        label={loc('tecton.element.dataTable.selectAllRows')}\n                        hide-label\n                        onChange={() =>\n                            mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], {\n                                checked: !allRowsSelected,\n                            })\n                        }\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                    <span class=\"sr\">{loc('tecton.element.dataTable.selectRow')}</span>\n                )}\n            </th>\n        ) : null;\n\n        return (\n            <thead>\n                <tr>\n                    {selectable && this.selectAlign === 'left' && selectCheckboxColumn}\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                    {selectable && this.selectAlign === 'right' && selectCheckboxColumn}\n                    {clickable && (\n                        <th\n                            id=\"click\"\n                            class={hideClickable ? 'sr' : undefined}\n                        >\n                            <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n                        </th>\n                    )}\n                    {hasExpandableRows && (\n                        <th id=\"toggle\">\n                            <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n                        </th>\n                    )}\n                    {hasDropdowns && (\n                        <th>\n                            <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n                        </th>\n                    )}\n                </tr>\n            </thead>\n        );\n    }\n\n    renderTableRows() {\n        const {\n            serializedHeaders: headers,\n            serializedRows: rows,\n            selectable,\n            clickable,\n            striped,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n            numberOfColumns,\n            loading,\n        } = this;\n\n        if (loading) {\n            return (\n                <tbody>\n                    <tr class=\"loading-row\">\n                        <td colSpan={numberOfColumns}>\n                            <q2-loading inline></q2-loading>\n                        </td>\n                    </tr>\n                </tbody>\n            );\n        }\n\n        let isSelectDisabled = false;\n        let selectedRow;\n        if (selectMode === 'single') {\n            selectedRow = this.serializedRows.find(({ selected }) => !!selected);\n            isSelectDisabled = !!selectedRow;\n        }\n        const clickableClasses = [];\n        if (clickable) clickableClasses.push('click-column');\n        if (hideClickable) clickableClasses.push('sr');\n        const clickableClassString = clickableClasses.join(' ');\n\n        return (\n            <tbody>\n                {rows.map((row, index) => {\n                    const cellSlotPrefix = `row-${row.id}-cell`;\n                    const expandableRowName = `row-${row.id}-expandable-content`;\n                    const dropdownCellName = `row-${row.id}-dropdown`;\n                    const rowHasExpandableSlot =\n                        hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n                    const rowHasDropdownSlot =\n                        hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n                    const rowClasses = [];\n                    if (rowHasExpandableSlot) rowClasses.push('expandable');\n                    if (clickable) rowClasses.push('clickable');\n                    if (striped) rowClasses.push(`striped-${index % 2 ? 'even' : 'odd'}`);\n                    if (row.expanded) rowClasses.push('expanded');\n                    if (row.selected) rowClasses.push('selected');\n                    const rowIsClickable = clickable || rowHasExpandableSlot;\n\n                    const selectCheckboxCell = selectable ? (\n                        <td\n                            class=\"select-column\"\n                            onClick={this.onControlContainerClick}\n                        >\n                            <q2-checkbox\n                                label={this.getSelectRowLabel(row)}\n                                hide-label\n                                checked={row.selected}\n                                disabled={(isSelectDisabled && row !== selectedRow) || row.disabled}\n                                onChange={e => this.onSelectRow(e, row)}\n                                test-id=\"select-row-control\"\n                            ></q2-checkbox>\n                        </td>\n                    ) : null;\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 && this.selectAlign === 'left' && selectCheckboxCell}\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                                {selectable && this.selectAlign === 'right' && selectCheckboxCell}\n                                {clickable && (\n                                    <td class={clickableClassString}>\n                                        <q2-btn\n                                            intent=\"neutral\"\n                                            size=\"small\"\n                                            onClick={e => this.onClickRow(e, row)}\n                                            test-id=\"clickable-row-control\"\n                                        >\n                                            {loc('tecton.element.dataTable.clickRow')}\n                                        </q2-btn>\n                                    </td>\n                                )}\n                                {hasExpandableRows && (\n                                    <td\n                                        class=\"expandable-row-control-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasExpandableSlot && (\n                                            <q2-btn\n                                                onClick={e => this.onToggleRow(e, row)}\n                                                ariaExpanded={`${row.expanded}`}\n                                                ariaControls={expandableRowName}\n                                                ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n                                                test-id=\"expandable-row-control\"\n                                            >\n                                                <q2-icon\n                                                    type=\"chevron-down\"\n                                                    class=\"toggle-expandable-row\"\n                                                ></q2-icon>\n                                            </q2-btn>\n                                        )}\n                                    </td>\n                                )}\n                                {hasDropdowns && (\n                                    <td\n                                        class=\"dropdown-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n                                    </td>\n                                )}\n                            </tr>\n                            {rowHasExpandableSlot && (\n                                <tr\n                                    id={expandableRowName}\n                                    class=\"expandable-row\"\n                                    hidden={!row.expanded}\n                                    aria-hidden={!row.expanded}\n                                >\n                                    <td\n                                        colSpan={numberOfColumns}\n                                        headers=\"toggle\"\n                                    >\n                                        <div class=\"expandable-content\">\n                                            <slot name={expandableRowName}></slot>\n                                        </div>\n                                    </td>\n                                </tr>\n                            )}\n                        </Fragment>\n                    );\n                })}\n            </tbody>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2DataTableCss","Q2DataTable","constructor","hostRef","this","allRowsSelected","checkSlotCount","hasDropdowns","hasExpandableRows","hasRowData","serializedHeaders","serializedRows","someRowsSelected","emptyIcon","emptyMessage","selectAlign","selectMode","checkSlots","_b","_a","hostElement","querySelector","_d","_c","onClickRow","event","row","stopPropagation","mirrorEmit","onClickTableRow","clickable","onToggleRow","onControlContainerClick","onSelectRow","selectedRows","currentlySelectedRows","checked","detail","selectedRow","selected","filter","id","length","isIndeterminate","selectEvent","rows","allSelected","defaultPrevented","map","onSort","header","direction","sorted","sortKey","key","sortEvent","shouldAutoSort","sortable","serializedHeader","undefined","sortRows","expanded","toggleEvent","_","console","error","disconnectedCallback","mutationObserver","disconnect","resizeObserver","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","ResizeObserver","resizeIframe","onClickListener","PointerEvent","stopImmediatePropagation","onSelectAllRows","disabled","clickRow","rowId","btn","shadowRoot","click","getCellContent","columnKey","slotContent","textContent","text","sortColumn","toggleRowExpansion","toggleRowSelect","chk","toggleSelectAllRows","selectable","title","toLowerCase","replace","mappedHeaders","defaultRow","cells","isAllSelected","selectAriaLabel","serializedCells","Object","entries","reduce","accum","cellKey","cellData","align","type","lineClamp","verticalAlign","isBadge","defaultCell","value","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","find","selectableHandler","numberOfColumns","_badgeColumnContent","cell","tags","h","class","x","theme","label","status","size","getSelectRowLabel","Array","isArray","labelParts","allKeysValid","every","part","join","loc","sortedRows","sort","a","b","aValue","bValue","render","caption","hideCaption","renderTableColGroup","renderTableHeader","renderEmptyState","renderTableRows","renderCellContent","includes","valueAsString","loading","colSpan","name","width","backgroundColor","style","hideClickable","selectCheckboxColumn","onChange","indeterminate","headerClasses","push","onClick","striped","inline","isSelectDisabled","clickableClasses","clickableClassString","index","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","selectCheckboxCell","e","Fragment","tabIndex","cellAlign","cellVerticalAlign","cellClasses","cellStyles","intent","ariaExpanded","ariaControls","hidden"],"sources":["src/components/q2-data-table/q2-data-table.scss?tag=q2-data-table&encapsulation=shadow","src/components/q2-data-table/q2-data-table.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-cell-padding: #{var-list(--tct-data-table-cell-padding, --tct-table-cell-padding, --app-scale-3x, 15px)};\n    --comp-select-column-width: #{var-list(\n            --tct-data-table-select-column-width,\n            --tct-table-select-column-width,\n            --tct-checkbox-size,\n            20px\n        )};\n    --comp-dropdown-column-width: #{var-list(\n            --tct-data-table-dropdown-column-width,\n            --tct-table-dropdown-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n    --comp-expandable-row-control-column-width: #{var-list(\n            --tct-data-table-expandable-row-control-column-width,\n            --tct-table-expandable-row-control-column-width,\n            --tct-btn-icon-width,\n            44px\n        )};\n\n    overflow: auto;\n    @include tiny-scrollbar();\n\n    :host([shadowed]:not([shadowed='false'])) & {\n        box-shadow: var-list(\n            --tct-data-table-shadow,\n            --tct-table-shadow,\n            --app-shadow-1,\n            unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')\n        );\n    }\n\n    :host([density='compact']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-compact,\n                --tct-table-cell-padding-compact,\n                --app-scale-1x,\n                5px\n            )};\n    }\n\n    :host([density='comfortable']) & {\n        --comp-cell-padding: #{var-list(\n                --tct-data-table-cell-padding-comfortable,\n                --tct-table-cell-padding-comfortable,\n                --app-scale-5x,\n                25px\n            )};\n    }\n\n    :host([sticky]:not([sticky='false'])) & {\n        overflow: unset;\n    }\n}\n\ntable {\n    table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: var-list(--tct-data-table-width, --tct-table-width);\n    min-width: 100%;\n    background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n    backdrop-filter: var-list(--tct-data-table-backdrop-filter, none);\n    caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n    border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n    border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n    border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n    background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n\n    :host([sticky]:not([sticky='false'])) & {\n        position: sticky;\n        top: var(--tct-data-table-sticky-header-top, 0px);\n        background: var-list(--tct-data-table-sticky-header-background, --tct-table-background, --t-base, #ffffff);\n    }\n}\n\ncol {\n    &.select-column {\n        width: var(--comp-select-column-width);\n    }\n\n    &.expandable-row-control-column {\n        width: var(--comp-expandable-row-control-column-width);\n    }\n\n    &.dropdown-column {\n        width: var(--comp-dropdown-column-width);\n    }\n\n    :host(:is([bordered='vertical'], [bordered='grid'])) & {\n        border-width: var-list(--tct-data-table-column-border-width, unquote('0 1px 0 0'));\n        border-style: var-list(--tct-data-table-column-border-style, solid);\n        border-color: var-list(--tct-data-table-column-border-color, --t-gray-9, #999999);\n\n        &:last-child {\n            border: none;\n        }\n    }\n}\n\ntd,\nth {\n    padding: var(--comp-cell-padding);\n    text-align: start;\n    vertical-align: middle;\n\n    &.align-end {\n        text-align: end;\n    }\n    &.align-center {\n        text-align: center;\n    }\n    &.vertical-align-top {\n        vertical-align: top;\n    }\n    &.vertical-align-bottom {\n        vertical-align: bottom;\n    }\n}\n\nth {\n    .header-content {\n        font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 600);\n        font-size: var-list(--tct-data-table-header-font-size, --app-font-size, 14px);\n    }\n\n    &.sorted {\n        .header-content {\n            font-weight: var-list(\n                --tct-data-table-header-sorted-font-weight,\n                --tct-table-header-sorted-font-weight,\n                600\n            );\n        }\n    }\n\n    .sorted-indicator {\n        --comp-header-sortable-icon-size: #{var-list(\n                --tct-data-table-header-sortable-icon-size,\n                --tct-table-header-sortable-icon-size,\n                --app-scale-3x,\n                15px\n            )};\n        --tct-icon-stroke-width: 2;\n\n        width: var(--comp-header-sortable-icon-size);\n        height: var(--comp-header-sortable-icon-size);\n\n        &.direction-ASC {\n            transform: rotate(180deg);\n        }\n    }\n\n    q2-btn {\n        .header-content {\n            display: flex;\n            align-items: center;\n            gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n        }\n    }\n}\n\ntr {\n    &.expandable,\n    &.clickable {\n        cursor: pointer;\n\n        &:focus {\n            outline: none;\n            box-shadow: none;\n        }\n    }\n\n    &.expandable {\n        --tct-btn-icon-hover-background: transparent;\n        &:hover {\n            background: var-list(--tct-data-table-expandable-row-hover-background --t-gray-14, #f2f2f2);\n        }\n    }\n\n    &.striped-even {\n        background: var-list(--tct-data-table-row-even-background, --t-gray-14, #f2f2f2);\n\n        &.expanded {\n            background: var-list(\n                --tct-data-table-expanded-row-even-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n\n        &.expandable {\n            &:hover {\n                background: var-list(\n                    --tct-data-table-expandable-row-even-hover-background,\n                    --tct-data-table-expandable-row-hover-background,\n                    --t-gray-14,\n                    #f2f2f2\n                );\n            }\n        }\n    }\n    &.striped-odd {\n        background: var-list(--tct-data-table-row-odd-background, transparent);\n\n        &.expanded {\n            background: var-list(\n                --tct-data-table-expanded-row-odd-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n\n        &.expandable {\n            &:hover {\n                background: var-list(\n                    --tct-data-table-expandable-row-odd-hover-background,\n                    --tct-data-table-expandable-row-hover-background,\n                    --t-gray-14,\n                    #f2f2f2\n                );\n            }\n        }\n    }\n\n    &.clickable {\n        &:hover {\n            background: var-list(\n                --tct-data-table-clickable-row-hover-background,\n                --tct-table-clickable-row-hover-background,\n                --t-gray-14,\n                #f2f2f2\n            );\n        }\n    }\n\n    &.selected {\n        background: var-list(\n            --tct-data-table-selected-row-background,\n            --tct-table-selected-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n    }\n\n    &.expanded {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n\n        .toggle-expandable-row {\n            transform: rotate(180deg);\n        }\n    }\n\n    :host(:is([bordered], [bordered='horizontal'], [bordered='grid']):not([bordered='vertical'], [bordered='false']))\n        tbody\n        & {\n        border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n        border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n        border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n    }\n\n    &.loading-row {\n        background: var-list(\n            --tct-data-table-loading-row-background,\n            --tct-table-loading-row-background,\n            --t-base,\n            #ffffff\n        );\n        td {\n            text-align: center;\n        }\n\n        q2-loading {\n            font-size: 4em;\n        }\n    }\n\n    &.empty-state {\n        background: var-list(--tct-data-table-loading-row-background, --t-base, #ffffff);\n        td {\n            text-align: center;\n        }\n        .empty-state-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding-top: var(--app-scale-10x, 50px);\n            padding-bottom: var(--app-scale-10x, 50px);\n            gap: var(--app-scale-4x, 20px);\n            --tct-icon-size: var(--app-scale-6x, 30px);\n        }\n    }\n\n    &.expandable-row {\n        background: var-list(\n            --tct-data-table-expanded-row-background,\n            --tct-table-expanded-row-background,\n            --t-gray-14,\n            #f2f2f2\n        );\n\n        .striped-odd + & {\n            background: var-list(\n                --tct-data-table-expanded-row-odd-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n\n        .striped-even + & {\n            background: var-list(\n                --tct-data-table-expanded-row-even-background,\n                --tct-data-table-expanded-row-background,\n                --t-gray-14,\n                transparent\n            );\n        }\n    }\n}\n\ntd {\n    font-size: var-list(--tct-data-table-cell-font-size, inherit);\n\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\n.tag-table {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    row-gap: var(--app-scale-2x);\n    column-gap: var(--app-scale-2x);\n\n    q2-tag {\n        --tct-tag-font-size: var(--app-font-size, 14px);\n        --tct-tag-padding-inline: var(--app-scale-2x, 10px);\n        --tct-tag-height: var(--app-scale-4x, 20px);\n        --tct-tag-margin: 0;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Event,\n    Element,\n    EventEmitter,\n    Fragment,\n    Listen,\n    Method,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\nimport type {\n    Q2DataTableHeader,\n    Q2DataTableCell,\n    Q2DataTableSerializedCells,\n    Q2DataTableRow,\n    Q2DataTableSerializedRow,\n} from 'q2-tecton-common/lib/types/elements';\n\nexport type Q2DataTableBadgeCell = Q2DataTableCell & {\n    type: 'badge';\n    tags: {\n        value: any;\n        badgeTheme: HTMLQ2BadgeElement['theme'];\n    }[];\n};\n\n/**\n * @name Data Table\n * @category Display\n * @summary Use for displaying large datasets with sorting, filtering, and selecting.\n * @slot row-<id>-cell-<key> - A slot for overriding the content of any cell in any row of the table with custom content.\n * @slot header-cell-<key> - A slot for the content of any cell in the header of the table.\n * @slot row-<id>-dropdown - A slot to provide a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) for a row.\n * @slot row-<id>-expandable-content - A slot that makes the row expandable and displays the provided content.\n * @slot empty-table - An optional slot to display custom content when the table is empty.\n */\n@Component({ tag: 'q2-data-table', shadow: true, styleUrl: 'q2-data-table.scss' })\nexport class Q2DataTable implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    allRowsSelected: boolean = false;\n\n    @State()\n    checkSlotCount: number = 0;\n\n    @State()\n    hasDropdowns: boolean = false;\n\n    @State()\n    hasExpandableRows: boolean = false;\n\n    @State()\n    hasRowData: boolean = false;\n\n    @State()\n    serializedHeaders: Q2DataTableHeader[] = [];\n\n    @State()\n    serializedRows: Q2DataTableSerializedRow[] = [];\n\n    @State()\n    someRowsSelected: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds borders between rows and/or columns in the table. */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean | 'horizontal' | 'vertical' | 'grid';\n\n    /** Provides a caption for the data table. */\n    @Prop({ mutable: true })\n    caption: string;\n\n    /** Adds the ability to click a row and have the table emit an event with the selected row's data. */\n    @Prop({ mutable: true, reflect: true })\n    clickable: boolean;\n\n    /** Determines the amount of padding for each of the cells in the table. */\n    @Prop({ mutable: true, reflect: true })\n    density: 'compact' | 'normal' | 'comfortable';\n\n    /** Determines the `q2-icon` that will display when `rows` has no value. */\n    @Prop({ reflect: true })\n    emptyIcon: string = 'inbox';\n\n    /** Determines the message that will display when `rows` has no value.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    emptyMessage: string = 'tecton.element.dataTable.emptyMessage';\n\n    /**\n     * Defines the headers of the table.\n     *\n     * **Example:**\n     * @snippet\n     * element.headers = [\n     *  {\n     *    title: 'Day of the Week',\n     *    key: 'day',\n     *  },\n     *  {\n     *    title: 'Sales',\n     *    key: 'sales',\n     *    align: 'end',\n     *  }\n     * ]\n     *\n     */\n    @Prop({ mutable: true })\n    headers: Q2DataTableHeader[];\n\n    /** Hides the caption from view, but still makes it available to screen readers for accessibility purposes. */\n    @Prop({ mutable: true, reflect: true })\n    hideCaption: boolean;\n\n    /**\n     * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.\n     *\n     * @info\n     * Use of this property requires `clickable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    hideClickable: boolean;\n\n    /** Displays a loading state on the table to indicate background activity. */\n    @Prop({ mutable: true, reflect: true })\n    loading: boolean;\n\n    /**\n     * Defines the rows of the table.\n     *\n     * **Example:**\n     * @snippet\n     * element.rows = [\n     *  {\n     *    id: 1,\n     *    cells: {\n     *      day: 'Monday',\n     *      sales: 93\n     *    }\n     *  },\n     *  {\n     *    id: 2,\n     *    cells: {\n     *      day: 'Tuesday',\n     *      sales: 127\n     *    }\n     *  },\n     *  {\n     *    id: 3,\n     *    cells: {\n     *      day: 'Wednesday',\n     *      sales: 121\n     *    }\n     * ]\n     */\n    @Prop({ mutable: true })\n    rows: Q2DataTableRow[];\n\n    /** Adds a checkbox to each row of the table making it selectable. */\n    @Prop({ mutable: true, reflect: true })\n    selectable: boolean;\n\n    /**\n     * Controls the position of the checkbox column when `selectable` is true.\n     * When set to 'right', the checkbox column will appear on the right side of the table.\n     *\n     * @warning\n     * Use of this property requires `selectable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    selectAlign: 'left' | 'right' = 'left';\n\n    /**\n     * Returns selected rows.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    get selectedRows(): Q2DataTableRow[] {\n        return this.serializedRows?.filter(({ selected }) => !!selected) || [];\n    }\n\n    set selectedRows(_) {\n        console.error('Direct assignment to selectedRows is not allowed.');\n    }\n\n    /**\n     * Determines if the selectable checkboxes allow for multi-select or not. If set to \"single\", once a row is selected, all other rows will be disabled.\n     * See the documentation on the `select` event for how to handle selections.\n     *\n     * @warning\n     * Use of this property requires `selectable` to be set to `true`.\n     */\n    @Prop({ mutable: true })\n    selectMode: 'multiple' | 'single' = 'multiple';\n\n    /** Adds a shadow to the table */\n    @Prop({ mutable: true, reflect: true })\n    shadowed: boolean;\n\n    /** Makes table header sticky */\n    @Prop({ reflect: true })\n    sticky: boolean;\n\n    /** Enables alternating background colors for the table rows */\n    @Prop({ reflect: true })\n    striped: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a row is clicked.\n     *\n     * Requires the `clickable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default click behavior.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when a row is selected.\n     *\n     * Requires the `selectable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default selection behavior.\n     * @deprecated Use 'tctSelect' instead\n     */\n    @Event()\n    select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n\n    /**\n     * Emitted when the select-all checkbox is toggled.\n     *\n     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n     *\n     * Call `event.preventDefault()` to prevent the default behavior.\n     * @deprecated Use 'tctSelectAllRows' instead\n     */\n    @Event()\n    selectAllRows: EventEmitter<{ checked: boolean }>;\n\n    /**\n     * Emitted when a column is sorted.\n     *\n     * Requires the `sortable` prop to be set to `true` on the column.\n     *\n     * Call `event.preventDefault()` to prevent the default sorting behavior.\n     * @deprecated Use 'tctSort' instead\n     */\n    @Event()\n    sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    /**\n     * Emitted when a row is clicked.\n     *\n     * Requires the `clickable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default click behavior.\n     */\n    @Event()\n    tctClick: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    /**\n     * Emitted when a row is selected.\n     *\n     * Requires the `selectable` prop to be set to `true`.\n     *\n     * Call `event.preventDefault()` to prevent the default selection behavior.\n     */\n    @Event()\n    tctSelect: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n\n    /**\n     * Emitted when the select-all checkbox is toggled.\n     *\n     * Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.\n     *\n     * Call `event.preventDefault()` to prevent the default behavior.\n     */\n    @Event()\n    tctSelectAllRows: EventEmitter<{ checked: boolean }>;\n\n    /**\n     * Emitted when a column is sorted.\n     *\n     * Requires the `sortable` prop to be set to `true` on the column.\n     *\n     * Call `event.preventDefault()` to prevent the default sorting behavior.\n     */\n    @Event()\n    tctSort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    /**\n     * Emitted when an expandable row is toggled.\n     *\n     * Requires content in the `row-{id}-expandable-content` slot.\n     *\n     * Call `event.preventDefault()` to prevent the default toggling behavior.\n     */\n    @Event()\n    tctToggle: 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     * @deprecated Use 'tctToggle' instead\n     */\n    @Event()\n    toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.headersHandler(this.headers);\n        this.rowsHandler(this.rows);\n    }\n\n    componentDidLoad(): void {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => this.checkSlots());\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        if (typeof ResizeObserver !== 'undefined') {\n            this.resizeObserver = new ResizeObserver(() => resizeIframe());\n            this.resizeObserver.observe(this.hostElement);\n        }\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onClickListener(event: MouseEvent) {\n        if (event instanceof PointerEvent) event.stopImmediatePropagation();\n    }\n\n    @Listen('selectAllRows')\n    onSelectAllRows(event: CustomEvent<{ checked: boolean }>) {\n        event.stopPropagation();\n        const { checked } = event.detail;\n        const selectedRows = checked\n            ? this.serializedRows.map(row => {\n                  if (row.disabled) {\n                      return row;\n                  } else {\n                      return {\n                          ...row,\n                          selected: checked,\n                      };\n                  }\n              })\n            : [];\n        const selectEvent = mirrorEmit(this, ['select', 'tctSelect'], {\n            row: undefined,\n            rows: selectedRows,\n            allSelected: checked,\n        });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.disabled) return row;\n            row.selected = checked;\n            return row;\n        });\n        this.allRowsSelected = checked;\n        this.someRowsSelected = false;\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to click a row that accepts a row ID that is will be clicked.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickRow(rowId: number | string) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"clickable-row-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method that returns the plain text value of a particular cell (including slot content).\n     *\n     * @testOnly\n     */\n    @Method()\n    async getCellContent(rowId: number | string, columnKey: string) {\n        const slotContent = this.hostElement.querySelector(`[slot=row-${rowId}-cell-${columnKey}`)?.textContent;\n        const text = this.hostElement.shadowRoot.querySelector(\n            `slot[name=row-${rowId}-cell-${columnKey}]`\n        )?.textContent;\n        return slotContent || text || '';\n    }\n\n    /**\n     * A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.\n     *\n     * @testOnly\n     */\n    @Method()\n    async sortColumn(header: Q2DataTableHeader) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#header-${header.key} q2-btn[test-id=\"sort-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleRowExpansion(rowId: number | string) {\n        const btn = this.hostElement.shadowRoot.querySelector(`#row-${rowId} q2-btn[test-id=\"expandable-row-control\"]`);\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleRowSelect(rowId: number | string) {\n        const chk = this.hostElement.shadowRoot.querySelector(\n            `#row-${rowId} q2-checkbox[test-id=\"select-row-control\"]`\n        );\n        (chk as HTMLQ2CheckboxElement)?.click();\n    }\n\n    /**\n     * A method to toggle select all button (checkbox) on left top corner.\n     *\n     * @testOnly\n     */\n    @Method()\n    async toggleSelectAllRows() {\n        if (!this.selectable) return;\n        const chk = this.hostElement.shadowRoot.querySelector(`q2-checkbox[test-id=\"select-all-rows-control\"]`);\n        (chk as HTMLQ2CheckboxElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('headers')\n    headersHandler(headers: Q2DataTableHeader[] = []) {\n        this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n            const { title } = header;\n            let { key } = header;\n\n            // If no key is provided, generate one from the title\n            if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n            return {\n                key,\n                ...header,\n            };\n        });\n    }\n\n    @Watch('rows')\n    rowsHandler(rows: Q2DataTableRow[] = []) {\n        const { serializedHeaders, mappedHeaders } = this;\n        const defaultRow = {\n            id: null,\n            cells: {},\n            selected: false,\n            expanded: false,\n            disabled: false,\n        };\n\n        // tracks if the select-all checkbox should be visually updated as the `rows` are built\n        let isAllSelected = true;\n        let isIndeterminate = false;\n\n        const serializedRows = rows.map(({ id, cells, selected, expanded, disabled, selectAriaLabel }) => {\n            const serializedCells = Object.entries(cells).reduce<Q2DataTableSerializedCells>(\n                (accum, [cellKey, cellData]) => {\n                    const header = mappedHeaders[cellKey] || ({} as Q2DataTableHeader);\n                    const { align, type = 'text', lineClamp, verticalAlign } = header;\n\n                    const isBadge = 'type' in header && header.type === 'badge';\n                    const defaultCell: Q2DataTableCell = {\n                        value: '',\n                        ariaLabel: undefined,\n                        type,\n                        align,\n                        lineClamp,\n                        verticalAlign,\n                        badgeStatus: isBadge ? header.badgeStatus : undefined,\n                        badgeTheme: isBadge ? header.badgeTheme : undefined,\n                    };\n\n                    const result: Q2DataTableCell =\n                        typeof cellData === 'object'\n                            ? { ...defaultCell, ...cellData }\n                            : { ...defaultCell, value: cellData };\n\n                    accum[cellKey] = result;\n                    return accum;\n                },\n                {}\n            );\n\n            if (isAllSelected && !selected) isAllSelected = false;\n            if (!isAllSelected && selected) isIndeterminate = true;\n            return {\n                ...defaultRow,\n                id,\n                selected: !!selected,\n                expanded: !!expanded,\n                disabled: !!disabled,\n                selectAriaLabel,\n                cells: serializedCells,\n            };\n        });\n\n        const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n        const shouldAutoSort = !!sortedHeader && sortedHeader.sortable !== 'manual';\n\n        this.hasRowData = !!rows.length;\n        this.allRowsSelected = this.hasRowData && isAllSelected;\n        this.someRowsSelected = this.hasRowData && isIndeterminate;\n\n        this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n        this.checkSlots();\n    }\n\n    @Watch('selectable')\n    selectableHandler() {\n        if (this.selectable === false) {\n            mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], { checked: false });\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    get numberOfColumns() {\n        return (\n            (this.serializedHeaders?.length ?? 0) +\n            (this.selectable ? 1 : 0) +\n            (this.clickable ? 1 : 0) +\n            (this.hasExpandableRows ? 1 : 0) +\n            (this.hasDropdowns ? 1 : 0)\n        );\n    }\n\n    _badgeColumnContent(cell: Q2DataTableBadgeCell) {\n        if (cell.tags?.length) {\n            return (\n                <div class=\"tag-table\">\n                    {cell.tags.map(x => {\n                        return (\n                            <q2-tag\n                                theme={x.badgeTheme}\n                                label={x.value}\n                            />\n                        );\n                    })}\n                </div>\n            );\n        }\n\n        return (\n            <q2-badge\n                aria-label={cell.ariaLabel}\n                value={typeof cell.value !== 'boolean' ? cell.value : cell.value ? 1 : 0}\n                theme={cell.badgeTheme}\n                status={cell.badgeStatus}\n                size=\"large\"\n            />\n        );\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    getSelectRowLabel(row: Q2DataTableSerializedRow): string {\n        const { selectAriaLabel, cells } = row;\n\n        if (typeof selectAriaLabel === 'string') {\n            return selectAriaLabel;\n        }\n\n        if (Array.isArray(selectAriaLabel)) {\n            const labelParts = selectAriaLabel.map(key => {\n                const cell = cells[key];\n                const header = this.serializedHeaders.find(h => h.key === key);\n                if (cell?.value === undefined || !header) return undefined;\n                return `${header.title} ${cell.value}`;\n            });\n            const allKeysValid = labelParts.every(part => part !== undefined);\n\n            if (allKeysValid) {\n                return `Select row for ${labelParts.join(', ')}`;\n            }\n        }\n\n        return loc('tecton.element.dataTable.selectRow');\n    }\n\n    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        mirrorEmit(this, ['click', 'tctClick'], { row });\n    };\n\n    onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        if (this.clickable) {\n            this.onClickRow(event, row);\n        } else if (this.hasExpandableRows) {\n            this.onToggleRow(event, row);\n        }\n    };\n\n    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    onSelectRow = (event: CustomEvent<{ checked: boolean }>, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const { selectMode, serializedRows, selectedRows: currentlySelectedRows = [] } = this;\n        const { checked } = event.detail;\n\n        const selectedRow = { ...row, selected: checked };\n        let selectedRows;\n        if (selectMode === 'single') {\n            selectedRows = checked ? [selectedRow] : [];\n        } else {\n            selectedRows = checked\n                ? [...currentlySelectedRows, selectedRow]\n                : currentlySelectedRows.filter(row => row.id !== selectedRow.id);\n        }\n\n        const allRowsSelected = selectedRows.length === serializedRows.length;\n        const isIndeterminate = !allRowsSelected && selectedRows.length > 0;\n        const selectEvent = mirrorEmit(this, ['select', 'tctSelect'], {\n            row: selectedRow,\n            rows: selectedRows,\n            allSelected: allRowsSelected,\n        });\n        if (selectEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));\n        this.allRowsSelected = allRowsSelected;\n        this.someRowsSelected = isIndeterminate;\n    };\n\n    onSort = (header: Q2DataTableHeader) => {\n        const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n        const sortKey = header.key;\n        const sortEvent = mirrorEmit(this, ['sort', 'tctSort'], { header, direction });\n        if (sortEvent.defaultPrevented) return;\n\n        const shouldAutoSort = header.sortable !== 'manual';\n        if (!shouldAutoSort) return;\n\n        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n    };\n\n    onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const selectedRow = { ...row, expanded: !row.expanded };\n        const toggleEvent = mirrorEmit(this, ['toggle', 'tctToggle'], { row: selectedRow });\n        if (toggleEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.id === selectedRow.id) return selectedRow;\n            else return { ...row };\n        });\n    };\n\n    sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n        const { key, sorted } = header;\n        const direction = sorted || 'ASC';\n\n        const sortedRows = [...rows].sort((a, b) => {\n            const aValue = a.cells[key].value;\n            const bValue = b.cells[key].value;\n\n            if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n            if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n            return 0;\n        });\n\n        return sortedRows;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { caption } = this;\n        return (\n            <div class=\"container\">\n                <table>\n                    {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n                    {this.renderTableColGroup()}\n                    {this.renderTableHeader()}\n                    {this.renderEmptyState()}\n                    {this.renderTableRows()}\n                </table>\n            </div>\n        );\n    }\n\n    renderCellContent(cell: Q2DataTableCell) {\n        if (!cell) return;\n\n        const { type, ariaLabel, value } = cell;\n\n        if ([undefined, null].includes(value)) return;\n\n        switch (type) {\n            case 'badge':\n                return this._badgeColumnContent(cell as Q2DataTableBadgeCell);\n\n            case 'icon':\n                const valueAsString = typeof value === 'string' ? value : `${value}`;\n                return (\n                    <q2-icon\n                        label={ariaLabel}\n                        type={valueAsString}\n                    ></q2-icon>\n                );\n\n            case 'boolean':\n                return !!value ? (\n                    <q2-icon\n                        label={loc('tecton.element.dataTable.booleanTrue')}\n                        type=\"checkmark\"\n                    ></q2-icon>\n                ) : (\n                    <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n                );\n\n            case 'code':\n                return <code aria-label={ariaLabel}>{value}</code>;\n\n            default:\n                return <div aria-label={ariaLabel}>{value}</div>;\n        }\n    }\n\n    renderEmptyState() {\n        const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;\n        if (hasRowData || loading) return null;\n\n        return (\n            <tbody>\n                <tr class=\"empty-state\">\n                    <td colSpan={numberOfColumns}>\n                        <slot name=\"empty-table\">\n                            <div class=\"empty-state-content\">\n                                <q2-icon type={emptyIcon}></q2-icon>\n                                <p>{loc(emptyMessage)}</p>\n                            </div>\n                        </slot>\n                    </td>\n                </tr>\n            </tbody>\n        );\n    }\n\n    renderTableColGroup() {\n        const {\n            serializedHeaders: headers,\n            selectable,\n            selectAlign,\n            clickable,\n            hasExpandableRows,\n            hasDropdowns,\n        } = this;\n\n        if (!headers.length) return null;\n\n        return (\n            <colgroup>\n                {selectable && selectAlign === 'left' && <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                {selectable && selectAlign === 'right' && <col class=\"select-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        const selectCheckboxColumn = selectable ? (\n            <th class=\"select-column\">\n                {selectMode === 'multiple' ? (\n                    <q2-checkbox\n                        label={loc('tecton.element.dataTable.selectAllRows')}\n                        hide-label\n                        onChange={() =>\n                            mirrorEmit(this, ['selectAllRows', 'tctSelectAllRows'], {\n                                checked: !allRowsSelected,\n                            })\n                        }\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                    <span class=\"sr\">{loc('tecton.element.dataTable.selectRow')}</span>\n                )}\n            </th>\n        ) : null;\n\n        return (\n            <thead>\n                <tr>\n                    {selectable && this.selectAlign === 'left' && selectCheckboxColumn}\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                    {selectable && this.selectAlign === 'right' && selectCheckboxColumn}\n                    {clickable && (\n                        <th\n                            id=\"click\"\n                            class={hideClickable ? 'sr' : undefined}\n                        >\n                            <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n                        </th>\n                    )}\n                    {hasExpandableRows && (\n                        <th id=\"toggle\">\n                            <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n                        </th>\n                    )}\n                    {hasDropdowns && (\n                        <th>\n                            <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n                        </th>\n                    )}\n                </tr>\n            </thead>\n        );\n    }\n\n    renderTableRows() {\n        const {\n            serializedHeaders: headers,\n            serializedRows: rows,\n            selectable,\n            clickable,\n            striped,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n            numberOfColumns,\n            loading,\n        } = this;\n\n        if (loading) {\n            return (\n                <tbody>\n                    <tr class=\"loading-row\">\n                        <td colSpan={numberOfColumns}>\n                            <q2-loading inline></q2-loading>\n                        </td>\n                    </tr>\n                </tbody>\n            );\n        }\n\n        let isSelectDisabled = false;\n        let selectedRow;\n        if (selectMode === 'single') {\n            selectedRow = this.serializedRows.find(({ selected }) => !!selected);\n            isSelectDisabled = !!selectedRow;\n        }\n        const clickableClasses = [];\n        if (clickable) clickableClasses.push('click-column');\n        if (hideClickable) clickableClasses.push('sr');\n        const clickableClassString = clickableClasses.join(' ');\n\n        return (\n            <tbody>\n                {rows.map((row, index) => {\n                    const cellSlotPrefix = `row-${row.id}-cell`;\n                    const expandableRowName = `row-${row.id}-expandable-content`;\n                    const dropdownCellName = `row-${row.id}-dropdown`;\n                    const rowHasExpandableSlot =\n                        hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n                    const rowHasDropdownSlot =\n                        hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n                    const rowClasses = [];\n                    if (rowHasExpandableSlot) rowClasses.push('expandable');\n                    if (clickable) rowClasses.push('clickable');\n                    if (striped) rowClasses.push(`striped-${index % 2 ? 'even' : 'odd'}`);\n                    if (row.expanded) rowClasses.push('expanded');\n                    if (row.selected) rowClasses.push('selected');\n                    const rowIsClickable = clickable || rowHasExpandableSlot;\n\n                    const selectCheckboxCell = selectable ? (\n                        <td\n                            class=\"select-column\"\n                            onClick={this.onControlContainerClick}\n                        >\n                            <q2-checkbox\n                                label={this.getSelectRowLabel(row)}\n                                hide-label\n                                checked={row.selected}\n                                disabled={(isSelectDisabled && row !== selectedRow) || row.disabled}\n                                onChange={e => this.onSelectRow(e, row)}\n                                test-id=\"select-row-control\"\n                            ></q2-checkbox>\n                        </td>\n                    ) : null;\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 && this.selectAlign === 'left' && selectCheckboxCell}\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                                {selectable && this.selectAlign === 'right' && selectCheckboxCell}\n                                {clickable && (\n                                    <td class={clickableClassString}>\n                                        <q2-btn\n                                            intent=\"neutral\"\n                                            size=\"small\"\n                                            onClick={e => this.onClickRow(e, row)}\n                                            test-id=\"clickable-row-control\"\n                                        >\n                                            {loc('tecton.element.dataTable.clickRow')}\n                                        </q2-btn>\n                                    </td>\n                                )}\n                                {hasExpandableRows && (\n                                    <td\n                                        class=\"expandable-row-control-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasExpandableSlot && (\n                                            <q2-btn\n                                                onClick={e => this.onToggleRow(e, row)}\n                                                ariaExpanded={`${row.expanded}`}\n                                                ariaControls={expandableRowName}\n                                                ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n                                                test-id=\"expandable-row-control\"\n                                            >\n                                                <q2-icon\n                                                    type=\"chevron-down\"\n                                                    class=\"toggle-expandable-row\"\n                                                ></q2-icon>\n                                            </q2-btn>\n                                        )}\n                                    </td>\n                                )}\n                                {hasDropdowns && (\n                                    <td\n                                        class=\"dropdown-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n                                    </td>\n                                )}\n                            </tr>\n                            {rowHasExpandableSlot && (\n                                <tr\n                                    id={expandableRowName}\n                                    class=\"expandable-row\"\n                                    hidden={!row.expanded}\n                                    aria-hidden={!row.expanded}\n                                >\n                                    <td\n                                        colSpan={numberOfColumns}\n                                        headers=\"toggle\"\n                                    >\n                                        <div class=\"expandable-content\">\n                                            <slot name={expandableRowName}></slot>\n                                        </div>\n                                    </td>\n                                </tr>\n                            )}\n                        </Fragment>\n                    );\n                })}\n            </tbody>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAiB;;MC4CVC,IAAW;EADxB,WAAAC,CAAAC;;;;;;;;;;;;;;QAiBIC,KAAeC,kBAAY;IAG3BD,KAAcE,iBAAW;IAGzBF,KAAYG,eAAY;IAGxBH,KAAiBI,oBAAY;IAG7BJ,KAAUK,aAAY;IAGtBL,KAAiBM,oBAAwB;IAGzCN,KAAcO,iBAA+B;IAG7CP,KAAgBQ,mBAAY;mFAuB5BR,KAASS,YAAW;;;eAMpBT,KAAYU,eAAW;;;;;;;eAmFvBV,KAAWW,cAAqB;;;;;;;eAuBhCX,KAAUY,aAA0B;IAiapCZ,KAAUa,aAAG;;MACTb,KAAKI,wBAAuBU,KAAAC,IAAAf,KAAKgB,iBAAW,QAAAD,WAAA,aAAAA,EAAEE,cAAc,sCAAoC,QAAAH,WAAA,IAAAA,IAAA;MAChGd,KAAKG,mBAAkBe,KAAAC,IAAAnB,KAAKgB,iBAAW,QAAAG,WAAA,aAAAA,EAAEF,cAAc,4BAA0B,QAAAC,WAAA,IAAAA,IAAA;;;YAIjFlB,KAAKE,kBAAkB;AAAC;IA2B5BF,KAAAoB,aAAa,CAACC,GAAmBC;MAC7BD,EAAME;MACNC,EAAWxB,MAAM,EAAC,SAAS,cAAa;QAAEsB;;AAAM;IAGpDtB,KAAAyB,kBAAkB,CAACJ,GAAmBC;MAClC,IAAItB,KAAK0B,WAAW;QAChB1B,KAAKoB,WAAWC,GAAOC;aACpB,IAAItB,KAAKI,mBAAmB;QAC/BJ,KAAK2B,YAAYN,GAAOC;;;IAIhCtB,KAAA4B,0BAA2BP;MACvBA,EAAME;AAAiB;IAG3BvB,KAAA6B,cAAc,CAACR,GAA0CC;MACrDD,EAAME;MACN,OAAMX,YAAEA,GAAUL,gBAAEA,GAAgBuB,cAAcC,IAAwB,MAAO/B;MACjF,OAAMgC,SAAEA,KAAYX,EAAMY;MAE1B,MAAMC,IAAc;WAAKZ;QAAKa,UAAUH;;MACxC,IAAIF;MACJ,IAAIlB,MAAe,UAAU;QACzBkB,IAAeE,IAAU,EAACE,MAAe;aACtC;QACHJ,IAAeE,IACT,KAAID,GAAuBG,MAC3BH,EAAsBK,QAAOd,KAAOA,EAAIe,OAAOH,EAAYG;;MAGrE,MAAMpC,IAAkB6B,EAAaQ,WAAW/B,EAAe+B;MAC/D,MAAMC,KAAmBtC,KAAmB6B,EAAaQ,SAAS;MAClE,MAAME,IAAchB,EAAWxB,MAAM,EAAC,UAAU,eAAc;QAC1DsB,KAAKY;QACLO,MAAMX;QACNY,aAAazC;;MAEjB,IAAIuC,EAAYG,kBAAkB;MAElC3C,KAAKO,iBAAiBP,KAAKO,eAAeqC,KAAItB,KAAQA,EAAIe,OAAOH,EAAYG,KAAKH,IAAcZ;MAChGtB,KAAKC,kBAAkBA;MACvBD,KAAKQ,mBAAmB+B;AAAe;IAG3CvC,KAAA6C,SAAUC;MACN,MAAMC,IAAYD,EAAOE,WAAW,QAAQ,SAAS;MACrD,MAAMC,IAAUH,EAAOI;MACvB,MAAMC,IAAY3B,EAAWxB,MAAM,EAAC,QAAQ,aAAY;QAAE8C;QAAQC;;MAClE,IAAII,EAAUR,kBAAkB;MAEhC,MAAMS,IAAiBN,EAAOO,aAAa;MAC3C,KAAKD,GAAgB;MAErBpD,KAAKM,oBAAoBN,KAAKM,kBAAkBsC,KAAuBU;QACnE,MAAMN,IAASC,MAAYK,EAAiBJ,MAAMH,IAAYQ;QAC9D,OAAO;aAAKD;UAAkBN;;AAAQ;MAG1ChD,KAAKO,iBAAiBP,KAAKwD,SAASxD,KAAKO,gBAAgB;WAAKuC;QAAQE,QAAQD;;AAAY;IAG9F/C,KAAA2B,cAAc,CAACN,GAAmBC;MAC9BD,EAAME;MACN,MAAMW,IAAc;WAAKZ;QAAKmC,WAAWnC,EAAImC;;MAC7C,MAAMC,IAAclC,EAAWxB,MAAM,EAAC,UAAU,eAAc;QAAEsB,KAAKY;;MACrE,IAAIwB,EAAYf,kBAAkB;MAElC3C,KAAKO,iBAAiBP,KAAKO,eAAeqC,KAAItB;QAC1C,IAAIA,EAAIe,OAAOH,EAAYG,IAAI,OAAOH,QACjC,OAAO;aAAKZ;;AAAK;AACxB;AAgaT;;;;SA37BG,gBACIQ;;IACA,SAAOf,IAAAf,KAAKO,oBAAgB,QAAAQ,WAAA,aAAAA,EAAAqB,QAAO,EAAGD,mBAAiBA,QAAa;;EAGxE,gBAAIL,CAAa6B;IACbC,QAAQC,MAAM;;;;EAgJlB,oBAAAC;IACI,IAAI9D,KAAK+D,kBAAkB;MACvB/D,KAAK+D,iBAAiBC;MACtBhE,KAAK+D,mBAAmB;;IAE5B,IAAI/D,KAAKiE,gBAAgB;MACrBjE,KAAKiE,eAAeD;MACpBhE,KAAKiE,iBAAiB;;;EAI9B,iBAAAC;IACIlE,KAAKmE,eAAenE,KAAKoE;IACzBpE,KAAKqE,YAAYrE,KAAKyC;;EAG1B,gBAAA6B;IACI,WAAWC,qBAAqB,aAAa;MACzC,MAAMC,IAAW,IAAID,kBAAiB,MAAMvE,KAAKa;MACjD2D,EAASC,QAAQzE,KAAKgB,aAAa;QAAE0D,WAAW;QAAMC,SAAS;QAAMC,YAAY;;MACjF5E,KAAK+D,mBAAmBS;;IAE5B,WAAWK,mBAAmB,aAAa;MACvC7E,KAAKiE,iBAAiB,IAAIY,gBAAe,MAAMC;MAC/C9E,KAAKiE,eAAeQ,QAAQzE,KAAKgB;;;;;EAQzC,eAAA+D,CAAgB1D;IACZ,IAAIA,aAAiB2D,cAAc3D,EAAM4D;;EAI7C,eAAAC,CAAgB7D;IACZA,EAAME;IACN,OAAMS,SAAEA,KAAYX,EAAMY;IAC1B,MAAMH,IAAeE,IACfhC,KAAKO,eAAeqC,KAAItB;MACpB,IAAIA,EAAI6D,UAAU;QACd,OAAO7D;aACJ;QACH,OAAO;aACAA;UACHa,UAAUH;;;UAItB;IACN,MAAMQ,IAAchB,EAAWxB,MAAM,EAAC,UAAU,eAAc;MAC1DsB,KAAKiC;MACLd,MAAMX;MACNY,aAAaV;;IAEjB,IAAIQ,EAAYG,kBAAkB;IAElC3C,KAAKO,iBAAiBP,KAAKO,eAAeqC,KAAItB;MAC1C,IAAIA,EAAI6D,UAAU,OAAO7D;MACzBA,EAAIa,WAAWH;MACf,OAAOV;AAAG;IAEdtB,KAAKC,kBAAkB+B;IACvBhC,KAAKQ,mBAAmB;;;;;;;;;EAY5B,cAAM4E,CAASC;IACX,MAAMC,IAAMtF,KAAKgB,YAAYuE,WAAWtE,cAAc,QAAQoE;IAC7DC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BE;;;;;;SAS/B,oBAAMC,CAAeJ,GAAwBK;;IACzC,MAAMC,KAAc5E,IAAAf,KAAKgB,YAAYC,cAAc,aAAaoE,UAAcK,UAAY,QAAA3E,WAAA,aAAAA,EAAE6E;IAC5F,MAAMC,KAAO/E,IAAAd,KAAKgB,YAAYuE,WAAWtE,cACrC,iBAAiBoE,UAAcK,WAClC,QAAA5E,WAAA,aAAAA,EAAE8E;IACH,OAAOD,KAAeE,KAAQ;;;;;;SASlC,gBAAMC,CAAWhD;IACb,MAAMwC,IAAMtF,KAAKgB,YAAYuE,WAAWtE,cAAc,WAAW6B,EAAOI;IACvEoC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BE;;;;;;SAS/B,wBAAMO,CAAmBV;IACrB,MAAMC,IAAMtF,KAAKgB,YAAYuE,WAAWtE,cAAc,QAAQoE;IAC7DC,MAAwB,QAAxBA,WAAG,aAAHA,EAA0BE;;;;;;SAS/B,qBAAMQ,CAAgBX;IAClB,MAAMY,IAAMjG,KAAKgB,YAAYuE,WAAWtE,cACpC,QAAQoE;IAEXY,MAA6B,QAA7BA,WAAG,aAAHA,EAA+BT;;;;;;SASpC,yBAAMU;IACF,KAAKlG,KAAKmG,YAAY;IACtB,MAAMF,IAAMjG,KAAKgB,YAAYuE,WAAWtE,cAAc;IACrDgF,MAA6B,QAA7BA,WAAG,aAAHA,EAA+BT;;;;EAOpC,cAAArB,CAAeC,IAA+B;IAC1CpE,KAAKM,oBAAoB8D,EAAQxB,KAAuBE;MACpD,OAAMsD,OAAEA,KAAUtD;MAClB,KAAII,KAAEA,KAAQJ;;YAGd,KAAKI,GAAKA,IAAMkD,EAAMC,cAAcC,QAAQ,OAAO;MAEnD,OAAO;QACHpD;WACGJ;;AACN;;EAKT,WAAAuB,CAAY5B,IAAyB;IACjC,OAAMnC,mBAAEA,GAAiBiG,eAAEA,KAAkBvG;IAC7C,MAAMwG,IAAa;MACfnE,IAAI;MACJoE,OAAO;MACPtE,UAAU;MACVsB,UAAU;MACV0B,UAAU;;;QAId,IAAIuB,IAAgB;IACpB,IAAInE,IAAkB;IAEtB,MAAMhC,IAAiBkC,EAAKG,KAAI,EAAGP,OAAIoE,UAAOtE,aAAUsB,aAAU0B,aAAUwB;MACxE,MAAMC,IAAkBC,OAAOC,QAAQL,GAAOM,QAC1C,CAACC,IAAQC,GAASC;QACd,MAAMpE,IAASyD,EAAcU,MAAa;QAC1C,OAAME,OAAEA,GAAKC,MAAEA,IAAO,QAAMC,WAAEA,GAASC,eAAEA,KAAkBxE;QAE3D,MAAMyE,IAAU,UAAUzE,KAAUA,EAAOsE,SAAS;QACpD,MAAMI,IAA+B;UACjCC,OAAO;UACPC,WAAWnE;UACX6D;UACAD;UACAE;UACAC;UACAK,aAAaJ,IAAUzE,EAAO6E,cAAcpE;UAC5CqE,YAAYL,IAAUzE,EAAO8E,aAAarE;;QAG9C,MAAMsE,WACKX,MAAa,WACd;aAAKM;aAAgBN;YACrB;aAAKM;UAAaC,OAAOP;;QAEnCF,EAAMC,KAAWY;QACjB,OAAOb;AAAK,UAEhB;MAGJ,IAAIN,MAAkBvE,GAAUuE,IAAgB;MAChD,KAAKA,KAAiBvE,GAAUI,IAAkB;MAClD,OAAO;WACAiE;QACHnE;QACAF,YAAYA;QACZsB,YAAYA;QACZ0B,YAAYA;QACZwB;QACAF,OAAOG;;AACV;IAGL,MAAMkB,IAAexH,EAAkByH,MAAK,EAAG/E,eAAaA;IAC5D,MAAMI,MAAmB0E,KAAgBA,EAAazE,aAAa;IAEnErD,KAAKK,eAAeoC,EAAKH;IACzBtC,KAAKC,kBAAkBD,KAAKK,cAAcqG;IAC1C1G,KAAKQ,mBAAmBR,KAAKK,cAAckC;IAE3CvC,KAAKO,mBAAmB6C,IAAiBpD,KAAKwD,SAASjD,GAAgBuH,KAAgBvH;IACvFP,KAAKa;;EAIT,iBAAAmH;IACI,IAAIhI,KAAKmG,eAAe,OAAO;MAC3B3E,EAAWxB,MAAM,EAAC,iBAAiB,sBAAqB;QAAEgC,SAAS;;;;;;EAO3E,iBAAIuE;IACA,OAAOvG,KAAKM,kBAAkByG,QAA0C,CAACC,GAAOlE;MAC5EkE,EAAMlE,EAAOI,OAAOJ;MACpB,OAAOkE;AAAK,QACb;;EAGP,mBAAIiB;;IACA,SACKnH,KAAAC,IAAAf,KAAKM,uBAAmB,QAAAS,WAAA,aAAAA,EAAAuB,YAAU,QAAAxB,WAAA,IAAAA,IAAA,MAClCd,KAAKmG,aAAa,IAAI,MACtBnG,KAAK0B,YAAY,IAAI,MACrB1B,KAAKI,oBAAoB,IAAI,MAC7BJ,KAAKG,eAAe,IAAI;;EAIjC,mBAAA+H,CAAoBC;;IAChB,KAAIpH,IAAAoH,EAAKC,UAAM,QAAArH,WAAA,aAAAA,EAAAuB,QAAQ;MACnB,OACI+F,EAAA;QAAKC,OAAM;SACNH,EAAKC,KAAKxF,KAAI2F,KAEPF,EAAA;QACIG,OAAOD,EAAEX;QACTa,OAAOF,EAAEd;;;IAQjC,OACIY,EACgB;MAAA,cAAAF,EAAKT;MACjBD,cAAcU,EAAKV,UAAU,YAAYU,EAAKV,QAAQU,EAAKV,QAAQ,IAAI;MACvEe,OAAOL,EAAKP;MACZc,QAAQP,EAAKR;MACbgB,MAAK;;;EAcjB,iBAAAC,CAAkBtH;IACd,OAAMqF,iBAAEA,GAAeF,OAAEA,KAAUnF;IAEnC,WAAWqF,MAAoB,UAAU;MACrC,OAAOA;;IAGX,IAAIkC,MAAMC,QAAQnC,IAAkB;MAChC,MAAMoC,IAAapC,EAAgB/D,KAAIM;QACnC,MAAMiF,IAAO1B,EAAMvD;QACnB,MAAMJ,IAAS9C,KAAKM,kBAAkByH,MAAKM,KAAKA,EAAEnF,QAAQA;QAC1D,KAAIiF,MAAA,QAAAA,WAAA,aAAAA,EAAMV,WAAUlE,cAAcT,GAAQ,OAAOS;QACjD,OAAO,GAAGT,EAAOsD,SAAS+B,EAAKV;AAAO;MAE1C,MAAMuB,IAAeD,EAAWE,OAAMC,KAAQA,MAAS3F;MAEvD,IAAIyF,GAAc;QACd,OAAO,kBAAkBD,EAAWI,KAAK;;;IAIjD,OAAOC,EAAI;;EA8Ef,QAAA5F,CAASf,GAAkCK;IACvC,OAAMI,KAAEA,GAAGF,QAAEA,KAAWF;IACxB,MAAMC,IAAYC,KAAU;IAE5B,MAAMqG,IAAa,KAAI5G,IAAM6G,MAAK,CAACC,GAAGC;MAClC,MAAMC,IAASF,EAAE9C,MAAMvD,GAAKuE;MAC5B,MAAMiC,IAASF,EAAE/C,MAAMvD,GAAKuE;MAE5B,IAAIgC,IAASC,GAAQ,OAAO3G,MAAc,SAAQ,IAAK;MACvD,IAAI0G,IAASC,GAAQ,OAAO3G,MAAc,QAAQ,KAAI;MACtD,OAAO;AAAC;IAGZ,OAAOsG;;;;EAMX,MAAAM;IACI,OAAMC,SAAEA,KAAY5J;IACpB,OACIqI,EAAA;MAAAnF,KAAA;MAAKoF,OAAM;OACPD,EAAA;MAAAnF,KAAA;OACK0G,KAAWvB,EAAS;MAAAnF,KAAA;MAAAoF,OAAOtI,KAAK6J,cAAc,OAAOtG;OAAYqG,IACjE5J,KAAK8J,uBACL9J,KAAK+J,qBACL/J,KAAKgK,oBACLhK,KAAKiK;;EAMtB,iBAAAC,CAAkB/B;IACd,KAAKA,GAAM;IAEX,OAAMf,MAAEA,GAAIM,WAAEA,GAASD,OAAEA,KAAUU;IAEnC,IAAI,EAAC5E,WAAW,OAAM4G,SAAS1C,IAAQ;IAEvC,QAAQL;KACJ,KAAK;MACD,OAAOpH,KAAKkI,oBAAoBC;;KAEpC,KAAK;MACD,MAAMiC,WAAuB3C,MAAU,WAAWA,IAAQ,GAAGA;MAC7D,OACIY,EACI;QAAAI,OAAOf;QACPN,MAAMgD;;;KAIlB,KAAK;MACD,SAAS3C,IACLY,EAAA;QACII,OAAOW,EAAI;QACXhC,MAAK;WAGTiB,EAAiB;QAAA,cAAAe,EAAI;;;KAG7B,KAAK;MACD,OAAOf,EAAkB;QAAA,cAAAX;SAAYD;;KAEzC;MACI,OAAOY,EAAiB;QAAA,cAAAX;SAAYD;;;EAIhD,gBAAAuC;IACI,OAAM3J,YAAEA,GAAU4H,iBAAEA,GAAexH,WAAEA,GAASC,cAAEA,GAAY2J,SAAEA,KAAYrK;IAC1E,IAAIK,KAAcgK,GAAS,OAAO;IAElC,OACIhC,EAAA,eACIA,EAAI;MAAAC,OAAM;OACND,EAAI;MAAAiC,SAASrC;OACTI,EAAM;MAAAkC,MAAK;OACPlC,EAAK;MAAAC,OAAM;OACPD,EAAS;MAAAjB,MAAM3G;QACf4H,EAAI,WAAAe,EAAI1I;;EASpC,mBAAAoJ;IACI,OACIxJ,mBAAmB8D,GAAO+B,YAC1BA,GAAUxF,aACVA,GAAWe,WACXA,GAAStB,mBACTA,GAAiBD,cACjBA,KACAH;IAEJ,KAAKoE,EAAQ9B,QAAQ,OAAO;IAE5B,OACI+F,EAAA,kBACKlC,KAAcxF,MAAgB,UAAU0H,EAAK;MAAAC,OAAM;QACnDlE,EAAQxB,KAAI,EAAG4H,UAAOC,wBACnBpC,EAAA;MAAKqC,OAAO;QAAEF;QAAOC;;UAExB/I,KAAa2G,EAAA;MAAKC,OAAM;QACxBlI,KAAqBiI,EAAA;MAAKC,OAAM;QAChCnI,KAAgBkI,EAAA;MAAKC,OAAM;QAC3BnC,KAAcxF,MAAgB,WAAW0H,EAAA;MAAKC,OAAM;;;EAKjE,iBAAAyB;IACI,OACIzJ,mBAAmB8D,GAAO+B,YAC1BA,GAAUzE,WACVA,GAASiJ,eACTA,GAAa/J,YACbA,GAAUR,mBACVA,GAAiBD,cACjBA,GAAYF,iBACZA,GAAeO,kBACfA,GAAgBH,YAChBA,GAAUgK,SACVA,KACArK;IAEJ,KAAKoE,EAAQ9B,QAAQ,OAAO;IAE5B,MAAMsI,IAAuBzE,IACzBkC,EAAI;MAAAC,OAAM;OACL1H,MAAe,aACZyH,EAAA;MACII,OAAOW,EAAI;MAEX;MAAAyB,UAAU,MACNrJ,EAAWxB,MAAM,EAAC,iBAAiB,sBAAqB;QACpDgC,UAAU/B;;MAGlB+B,SAAS3B,KAAcJ,MAAoBO;MAC3CsK,eAAezK,KAAcG,MAAqBP;MAClDkF,UAAUkF,MAAYhK;MAAU,WACxB;SAGZgI,EAAA;MAAMC,OAAM;OAAMc,EAAI,0CAG9B;IAEJ,OACIf,EAAA,eACIA,EAAA,YACKlC,KAAcnG,KAAKW,gBAAgB,UAAUiK,GAC7CxG,EAAQxB,KAAIE;MACT,OAAMqE,OAAEA,GAAKnE,QAAEA,GAAMsE,eAAEA,KAAkBxE;MACzC,MAAMiI,IAAgB;MACtB,IAAI5D,GAAO4D,EAAcC,KAAK,SAAS7D;MACvC,IAAIG,GAAeyD,EAAcC,KAAK,kBAAkB1D;MACxD,MAAMtE,GAAQ+H,EAAcC,KAAK;MACjC,OACI3C,EAAA;QACIC,OAAOyC,EAAc5B,KAAK;QAC1B9G,IAAI,UAAUS,EAAOI;SAEpBJ,EAAOO,WACJgF,EACI;QAAA4C,SAAS,MAAMjL,KAAK6C,OAAOC;QACnB;QACRqC,UAAUnF,KAAKqK;SAEfhC,EACI;QAAAC,OAAM;QAAgB,cACVxF,EAAO4E,aAAanE;SAEhC8E,EAAM;QAAAkC,MAAM,eAAezH,EAAOI;SAAQJ,EAAOsD,UAE9CpD,IACCqF,EAAA;QACIC,OAAO,8BAA8BtF;QACrCoE,MAAK;QACLqB,OACIzF,MAAW,QACLoG,EAAI,8CACJA,EAAI;QAEN;WAGZf,EAAA;QACIC,OAAO;QACPlB,MAAK;QACLqB,OAAOW,EAAI;QACH;aAMxBf,EAAA;QACIC,OAAM;QAAgB,cACVxF,EAAO4E,aAAanE;SAEhC8E,EAAA;QAAMkC,MAAM,eAAezH,EAAOI;SAAQJ,EAAOsD;AAGxD,SAGZD,KAAcnG,KAAKW,gBAAgB,WAAWiK,GAC9ClJ,KACG2G,EAAA;MACIhG,IAAG;MACHiG,OAAOqC,IAAgB,OAAOpH;OAE9B8E,EAAM;MAAAC,OAAM;OAAMc,EAAI,wCAG7BhJ,KACGiI,EAAI;MAAAhG,IAAG;OACHgG,EAAM;MAAAC,OAAM;OAAMc,EAAI,yCAG7BjJ,KACGkI,EAAA,YACIA,EAAA;MAAMC,OAAM;OAAMc,EAAI;;EAQ9C,eAAAa;IACI,OACI3J,mBAAmB8D,GACnB7D,gBAAgBkC,GAAI0D,YACpBA,GAAUzE,WACVA,GAASwJ,SACTA,GAAOP,eACPA,GAAa/J,YACbA,GAAUR,mBACVA,GAAiBD,cACjBA,GAAY8H,iBACZA,GAAeoC,SACfA,KACArK;IAEJ,IAAIqK,GAAS;MACT,OACIhC,EAAA,eACIA,EAAI;QAAAC,OAAM;SACND,EAAI;QAAAiC,SAASrC;SACTI,EAAA;QAAY8C,QAAoB;;;IAOpD,IAAIC,IAAmB;IACvB,IAAIlJ;IACJ,IAAItB,MAAe,UAAU;MACzBsB,IAAclC,KAAKO,eAAewH,MAAK,EAAG5F,mBAAiBA;MAC3DiJ,MAAqBlJ;;IAEzB,MAAMmJ,IAAmB;IACzB,IAAI3J,GAAW2J,EAAiBL,KAAK;IACrC,IAAIL,GAAeU,EAAiBL,KAAK;IACzC,MAAMM,IAAuBD,EAAiBlC,KAAK;IAEnD,OACId,EACK,eAAA5F,EAAKG,KAAI,CAACtB,GAAKiK;MACZ,MAAMC,IAAiB,OAAOlK,EAAIe;MAClC,MAAMoJ,IAAoB,OAAOnK,EAAIe;MACrC,MAAMqJ,IAAmB,OAAOpK,EAAIe;MACpC,MAAMsJ,IACFvL,OAAuBJ,KAAKgB,YAAYC,cAAc,UAAUwK;MACpE,MAAMG,IACFzL,OAAkBH,KAAKgB,YAAYC,cAAc,UAAUyK;MAC/D,MAAMG,IAAa;MACnB,IAAIF,GAAsBE,EAAWb,KAAK;MAC1C,IAAItJ,GAAWmK,EAAWb,KAAK;MAC/B,IAAIE,GAASW,EAAWb,KAAK,WAAWO,IAAQ,IAAI,SAAS;MAC7D,IAAIjK,EAAImC,UAAUoI,EAAWb,KAAK;MAClC,IAAI1J,EAAIa,UAAU0J,EAAWb,KAAK;MAClC,MAAMc,IAAiBpK,KAAaiK;MAEpC,MAAMI,IAAqB5F,IACvBkC,EAAA;QACIC,OAAM;QACN2C,SAASjL,KAAK4B;SAEdyG,EACI;QAAAI,OAAOzI,KAAK4I,kBAAkBtH;QAE9B;QAAAU,SAASV,EAAIa;QACbgD,UAAWiG,KAAoB9J,MAAQY,KAAgBZ,EAAI6D;QAC3D0F,UAAUmB,KAAKhM,KAAK6B,YAAYmK,GAAG1K;QAC3B;YAGhB;MAEJ,OACI+G,EAAC4D,GAAQ,MACL5D,EACI;QAAAhG,IAAI,OAAOf,EAAIe;QACfiG,OAAOuD,EAAW1C,KAAK;QACvB8B,SAASa,KAAc,CAAKE,KAAKhM,KAAKyB,gBAAgBuK,GAAG1K;QACzD4K,UAAUJ,KAAiB,IAAKvI;SAE/B4C,KAAcnG,KAAKW,gBAAgB,UAAUoL,GAC7C3H,EAAQxB,KAAI,EAAGM;QACZ,MAAMiF,IAAO7G,EAAImF,MAAMvD;QACvB,MAAMmE,IAAYc,MAAI,QAAJA,WAAA,aAAAA,EAAMd;QACxB,MAAM8E,IAAYhE,MAAI,QAAJA,WAAA,aAAAA,EAAMhB;QACxB,MAAMiF,IAAoBjE,MAAI,QAAJA,WAAA,aAAAA,EAAMb;QAChC,MAAM+E,IAAc;QACpB,IAAIF,GAAWE,EAAYrB,KAAK,SAASmB;QACzC,IAAIC,GAAmBC,EAAYrB,KAAK,kBAAkBoB;QAC1D,IAAI/E,GAAWgF,EAAYrB,KAAK;QAChC,MAAMsB,IAAajF,IACb;UAAE,2BAA2B,GAAGA;YAChC9D;QAEN,OACI8E,EAAA;UACIC,OAAO+D,EAAYlD,KAAK;UACxBuB,OAAO4B;WAEPjE,EAAA;UAAMkC,MAAM,GAAGiB,KAAkBtI;WAC5BlD,KAAKkK,kBAAkB/B;AAE3B,WAGZhC,KAAcnG,KAAKW,gBAAgB,WAAWoL,GAC9CrK,KACG2G,EAAI;QAAAC,OAAOgD;SACPjD,EAAA;QACIkE,QAAO;QACP5D,MAAK;QACLsC,SAASe,KAAKhM,KAAKoB,WAAW4K,GAAG1K;QACzB;SAEP8H,EAAI,wCAIhBhJ,KACGiI,EACI;QAAAC,OAAM;QACN2C,SAASjL,KAAK4B;SAEb+J,KACGtD,EACI;QAAA4C,SAASe,KAAKhM,KAAK2B,YAAYqK,GAAG1K;QAClCkL,cAAc,GAAGlL,EAAImC;QACrBgJ,cAAchB;QACd/D,WAAW0B,EAAI;QAAqC,WAC5C;SAERf,EACI;QAAAjB,MAAK;QACLkB,OAAM;YAMzBnI,KACGkI,EACI;QAAAC,OAAM;QACN2C,SAASjL,KAAK4B;SAEbgK,KAAsBvD,EAAM;QAAAkC,MAAMmB;YAI9CC,KACGtD,EACI;QAAAhG,IAAIoJ;QACJnD,OAAM;QACNoE,SAASpL,EAAImC;QACA,gBAACnC,EAAImC;SAElB4E,EAAA;QACIiC,SAASrC;QACT7D,SAAQ;SAERiE,EAAK;QAAAC,OAAM;SACPD,EAAM;QAAAkC,MAAMkB;;AAKrB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-detail.entry.esm.js","sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n::slotted([slot]) {\n    display: flex;\n    align-items: center;\n    --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n    column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n    row-gap: var-list(--tct-detail-gap-row, 0px);\n\n    &-block {\n        display: flex;\n        width: 100%;\n    }\n\n    &-inline {\n        display: flex;\n    }\n\n    &-horizontal {\n        align-items: var(--tct-detail-vertical-alignment, baseline);\n        flex-direction: row;\n    }\n\n    &-stacked {\n        flex-direction: column;\n\n        &-alignment-left {\n            align-items: flex-start;\n        }\n\n        &-alignment-right {\n            align-items: flex-end;\n        }\n\n        &-alignment-center {\n            align-items: center;\n        }\n    }\n}\n\n.label {\n    flex: 1;\n    text-align: left;\n    line-height: 1.5;\n    color: var(--tct-detail-label-font-color, #141430);\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-label-small-font-color);\n            font-size: var(--tct-detail-label-small-font-size, 14px);\n            font-weight: var(--tct-detail-label-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-label-medium-font-color);\n            font-size: var(--tct-detail-label-medium-font-size, 14px);\n            font-weight: var(--tct-detail-label-medium-font-weight, 400);\n        }\n        &-large {\n            color: var(--tct-detail-label-large-font-color);\n            font-size: var(--tct-detail-label-large-font-size, 16px);\n            font-weight: var(--tct-detail-label-large-font-weight, 400);\n        }\n        &-xlarge {\n            color: var(--tct-detail-label-xlarge-font-color);\n            font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n            font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n        }\n        &-inline {\n            font-size: var(--tct-detail-label-inline-font-size, 1em);\n            font-weight: var(--tct-detail-label-inline-font-weight, 400);\n            color: inherit;\n        }\n    }\n}\n\n.description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    line-height: 1.5;\n    color: var(--tct-detail-description-font-color, #141430);\n    column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n    &-alignment-right {\n        justify-content: flex-end;\n    }\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-description-small-font-color);\n            font-size: var(--tct-detail-description-small-font-size, 14px);\n            font-weight: var(--tct-detail-description-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-description-medium-font-color);\n            font-size: var(--tct-detail-description-medium-font-size, 24px);\n            font-weight: var(--tct-detail-description-medium-font-weight, 600);\n        }\n        &-large {\n            color: var(--tct-detail-description-large-font-color);\n            font-size: var(--tct-detail-description-large-font-size, 28px);\n            font-weight: var(--tct-detail-description-large-font-weight, 600);\n        }\n        &-xlarge {\n            color: var(--tct-detail-description-xlarge-font-color);\n            font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n            font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n        }\n        &-inline {\n            font-size: var(--tct-detail-description-inline-font-size, 1em);\n            color: inherit;\n        }\n    }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({\n    tag: 'q2-detail',\n    styleUrl: 'q2-detail.scss',\n    shadow: true,\n})\nexport class Q2Detail {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Defines the alignment of the label and description when stacked, or when only the label or description is present. */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right' | 'center' = 'left';\n\n    /**\n     * Defines the text content of the description.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Defines the text content of the label.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the text size of the label and description.\n     *\n     * If not specified, the detail will display as inline text.\n     */\n    @Prop({ reflect: true })\n    size: null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n    /** Determines if the description should appear beneath the label. */\n    @Prop({ reflect: true })\n    stacked: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.setSlotSizeProps();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get descriptionClasses() {\n        const classes = ['description'];\n        if (this.size) {\n            classes.push(`description-size-${this.size}`);\n        } else {\n            classes.push(`description-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`description-alignment-right`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get detailClasses() {\n        const classes = ['detail'];\n        if (this.size) {\n            classes.push(`detail-block`);\n        } else {\n            classes.push(`detail-inline`);\n        }\n        if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {\n            classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n        } else {\n            classes.push('detail-horizontal');\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasDefaultSlotContent() {\n        const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n        const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n        const hostChildNodeCount = this.hostElement.childNodes.length;\n\n        return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n    }\n\n    get hasDescripiton() {\n        return !!this.description || this.hasDefaultSlotContent;\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.hostElement, 'label');\n    }\n\n    get labelClasses() {\n        const classes = ['label'];\n        if (this.size) {\n            classes.push(`label-size-${this.size}`);\n        } else {\n            classes.push(`label-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`label-align-left`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get onlyHasDescripiton() {\n        return this.hasDescripiton && !this.hasLabel;\n    }\n\n    get onlyHasLabel() {\n        return this.hasLabel && !this.hasDescripiton;\n    }\n\n    setSlotSizeProps() {\n        const slotElements = Array.from(\n            this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot=\"label\"] > *')\n        ) as { slotSize?: string; localName?: string }[];\n        slotElements.forEach(element => {\n            let size = this.size;\n            if (element.localName === 'q2-currency') {\n                switch (size) {\n                    case 'xsmall':\n                        size = 'small';\n                        break;\n                    case 'xlarge':\n                        size = 'large';\n                        break;\n                    default:\n                        break;\n                }\n            }\n            element.slotSize = size;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.detailClasses}>\n                {this.hasLabel && (\n                    <div\n                        class={this.labelClasses}\n                        aria-describedby={!!this.description ? 'label-description' : undefined}\n                    >\n                        {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                    </div>\n                )}\n                {this.hasDescripiton && (\n                    <div\n                        id=\"label-description\"\n                        class={this.descriptionClasses}\n                    >\n                        {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-detail.entry.esm.js","sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n::slotted([slot]) {\n    display: flex;\n    align-items: center;\n    --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n    column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n    row-gap: var-list(--tct-detail-gap-row, 0px);\n\n    &-block {\n        display: flex;\n        width: 100%;\n    }\n\n    &-inline {\n        display: flex;\n    }\n\n    &-horizontal {\n        align-items: var(--tct-detail-vertical-alignment, baseline);\n        flex-direction: row;\n    }\n\n    &-stacked {\n        flex-direction: column;\n\n        &-alignment-left {\n            align-items: flex-start;\n        }\n\n        &-alignment-right {\n            align-items: flex-end;\n        }\n\n        &-alignment-center {\n            align-items: center;\n        }\n    }\n}\n\n.label {\n    flex: 1;\n    text-align: left;\n    line-height: 1.5;\n    color: var(--tct-detail-label-font-color, #141430);\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-label-small-font-color);\n            font-size: var(--tct-detail-label-small-font-size, 14px);\n            font-weight: var(--tct-detail-label-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-label-medium-font-color);\n            font-size: var(--tct-detail-label-medium-font-size, 14px);\n            font-weight: var(--tct-detail-label-medium-font-weight, 400);\n        }\n        &-large {\n            color: var(--tct-detail-label-large-font-color);\n            font-size: var(--tct-detail-label-large-font-size, 16px);\n            font-weight: var(--tct-detail-label-large-font-weight, 400);\n        }\n        &-xlarge {\n            color: var(--tct-detail-label-xlarge-font-color);\n            font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n            font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n        }\n        &-inline {\n            font-size: var(--tct-detail-label-inline-font-size, 1em);\n            font-weight: var(--tct-detail-label-inline-font-weight, 400);\n            color: inherit;\n        }\n    }\n}\n\n.description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    line-height: 1.5;\n    color: var(--tct-detail-description-font-color, #141430);\n    column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n    &-alignment-right {\n        justify-content: flex-end;\n    }\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-description-small-font-color);\n            font-size: var(--tct-detail-description-small-font-size, 14px);\n            font-weight: var(--tct-detail-description-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-description-medium-font-color);\n            font-size: var(--tct-detail-description-medium-font-size, 24px);\n            font-weight: var(--tct-detail-description-medium-font-weight, 600);\n        }\n        &-large {\n            color: var(--tct-detail-description-large-font-color);\n            font-size: var(--tct-detail-description-large-font-size, 28px);\n            font-weight: var(--tct-detail-description-large-font-weight, 600);\n        }\n        &-xlarge {\n            color: var(--tct-detail-description-xlarge-font-color);\n            font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n            font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n        }\n        &-inline {\n            font-size: var(--tct-detail-description-inline-font-size, 1em);\n            color: inherit;\n        }\n    }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({\n    tag: 'q2-detail',\n    styleUrl: 'q2-detail.scss',\n    shadow: true,\n})\nexport class Q2Detail {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Defines the alignment of the label and description when stacked, or when only the label or description is present. */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right' | 'center' = 'left';\n\n    /**\n     * Defines the text content of the description.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Defines the text content of the label.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the text size of the label and description.\n     *\n     * If not specified, the detail will display as inline text.\n     */\n    @Prop({ reflect: true })\n    size: null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n    /** Determines if the description should appear beneath the label. */\n    @Prop({ reflect: true })\n    stacked: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.setSlotSizeProps();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get descriptionClasses() {\n        const classes = ['description'];\n        if (this.size) {\n            classes.push(`description-size-${this.size}`);\n        } else {\n            classes.push(`description-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`description-alignment-right`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get detailClasses() {\n        const classes = ['detail'];\n        if (this.size) {\n            classes.push(`detail-block`);\n        } else {\n            classes.push(`detail-inline`);\n        }\n        if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {\n            classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n        } else {\n            classes.push('detail-horizontal');\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasDefaultSlotContent() {\n        const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n        const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n        const hostChildNodeCount = this.hostElement.childNodes.length;\n\n        return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n    }\n\n    get hasDescripiton() {\n        return !!this.description || this.hasDefaultSlotContent;\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.hostElement, 'label');\n    }\n\n    get labelClasses() {\n        const classes = ['label'];\n        if (this.size) {\n            classes.push(`label-size-${this.size}`);\n        } else {\n            classes.push(`label-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`label-align-left`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get onlyHasDescripiton() {\n        return this.hasDescripiton && !this.hasLabel;\n    }\n\n    get onlyHasLabel() {\n        return this.hasLabel && !this.hasDescripiton;\n    }\n\n    setSlotSizeProps() {\n        const slotElements = Array.from(\n            this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot=\"label\"] > *')\n        ) as { slotSize?: string; localName?: string }[];\n        slotElements.forEach(element => {\n            let size = this.size;\n            if (element.localName === 'q2-currency') {\n                switch (size) {\n                    case 'xsmall':\n                        size = 'small';\n                        break;\n                    case 'xlarge':\n                        size = 'large';\n                        break;\n                    default:\n                        break;\n                }\n            }\n            element.slotSize = size;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.detailClasses}>\n                {this.hasLabel && (\n                    <div\n                        class={this.labelClasses}\n                        aria-describedby={!!this.description ? 'label-description' : undefined}\n                    >\n                        {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                    </div>\n                )}\n                {this.hasDescripiton && (\n                    <div\n                        id=\"label-description\"\n                        class={this.descriptionClasses}\n                    >\n                        {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["q2DetailCss","Q2Detail","constructor","hostRef","this","alignment","stacked","componentWillLoad","setSlotSizeProps","descriptionClasses","classes","size","push","join","detailClasses","onlyHasDescripiton","onlyHasLabel","hasDefaultSlotContent","hasInnerHtml","hostElement","innerHTML","trim","namedSlotCount","querySelectorAll","length","hostChildNodeCount","childNodes","hasDescripiton","description","hasLabel","label","hasLabelSlotContent","hasSlotContent","labelClasses","slotElements","Array","from","forEach","element","localName","slotSize","render","h","key","class","undefined","loc","name","id"],"sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n::slotted([slot]) {\n    display: flex;\n    align-items: center;\n    --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n    column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n    row-gap: var-list(--tct-detail-gap-row, 0px);\n\n    &-block {\n        display: flex;\n        width: 100%;\n    }\n\n    &-inline {\n        display: flex;\n    }\n\n    &-horizontal {\n        align-items: var(--tct-detail-vertical-alignment, baseline);\n        flex-direction: row;\n    }\n\n    &-stacked {\n        flex-direction: column;\n\n        &-alignment-left {\n            align-items: flex-start;\n        }\n\n        &-alignment-right {\n            align-items: flex-end;\n        }\n\n        &-alignment-center {\n            align-items: center;\n        }\n    }\n}\n\n.label {\n    flex: 1;\n    text-align: left;\n    line-height: 1.5;\n    color: var(--tct-detail-label-font-color, #141430);\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-label-small-font-color);\n            font-size: var(--tct-detail-label-small-font-size, 14px);\n            font-weight: var(--tct-detail-label-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-label-medium-font-color);\n            font-size: var(--tct-detail-label-medium-font-size, 14px);\n            font-weight: var(--tct-detail-label-medium-font-weight, 400);\n        }\n        &-large {\n            color: var(--tct-detail-label-large-font-color);\n            font-size: var(--tct-detail-label-large-font-size, 16px);\n            font-weight: var(--tct-detail-label-large-font-weight, 400);\n        }\n        &-xlarge {\n            color: var(--tct-detail-label-xlarge-font-color);\n            font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n            font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n        }\n        &-inline {\n            font-size: var(--tct-detail-label-inline-font-size, 1em);\n            font-weight: var(--tct-detail-label-inline-font-weight, 400);\n            color: inherit;\n        }\n    }\n}\n\n.description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    line-height: 1.5;\n    color: var(--tct-detail-description-font-color, #141430);\n    column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n    &-alignment-right {\n        justify-content: flex-end;\n    }\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-description-small-font-color);\n            font-size: var(--tct-detail-description-small-font-size, 14px);\n            font-weight: var(--tct-detail-description-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-description-medium-font-color);\n            font-size: var(--tct-detail-description-medium-font-size, 24px);\n            font-weight: var(--tct-detail-description-medium-font-weight, 600);\n        }\n        &-large {\n            color: var(--tct-detail-description-large-font-color);\n            font-size: var(--tct-detail-description-large-font-size, 28px);\n            font-weight: var(--tct-detail-description-large-font-weight, 600);\n        }\n        &-xlarge {\n            color: var(--tct-detail-description-xlarge-font-color);\n            font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n            font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n        }\n        &-inline {\n            font-size: var(--tct-detail-description-inline-font-size, 1em);\n            color: inherit;\n        }\n    }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({\n    tag: 'q2-detail',\n    styleUrl: 'q2-detail.scss',\n    shadow: true,\n})\nexport class Q2Detail {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Defines the alignment of the label and description when stacked, or when only the label or description is present. */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right' | 'center' = 'left';\n\n    /**\n     * Defines the text content of the description.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Defines the text content of the label.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the text size of the label and description.\n     *\n     * If not specified, the detail will display as inline text.\n     */\n    @Prop({ reflect: true })\n    size: null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n    /** Determines if the description should appear beneath the label. */\n    @Prop({ reflect: true })\n    stacked: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.setSlotSizeProps();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get descriptionClasses() {\n        const classes = ['description'];\n        if (this.size) {\n            classes.push(`description-size-${this.size}`);\n        } else {\n            classes.push(`description-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`description-alignment-right`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get detailClasses() {\n        const classes = ['detail'];\n        if (this.size) {\n            classes.push(`detail-block`);\n        } else {\n            classes.push(`detail-inline`);\n        }\n        if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {\n            classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n        } else {\n            classes.push('detail-horizontal');\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasDefaultSlotContent() {\n        const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n        const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n        const hostChildNodeCount = this.hostElement.childNodes.length;\n\n        return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n    }\n\n    get hasDescripiton() {\n        return !!this.description || this.hasDefaultSlotContent;\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.hostElement, 'label');\n    }\n\n    get labelClasses() {\n        const classes = ['label'];\n        if (this.size) {\n            classes.push(`label-size-${this.size}`);\n        } else {\n            classes.push(`label-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`label-align-left`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get onlyHasDescripiton() {\n        return this.hasDescripiton && !this.hasLabel;\n    }\n\n    get onlyHasLabel() {\n        return this.hasLabel && !this.hasDescripiton;\n    }\n\n    setSlotSizeProps() {\n        const slotElements = Array.from(\n            this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot=\"label\"] > *')\n        ) as { slotSize?: string; localName?: string }[];\n        slotElements.forEach(element => {\n            let size = this.size;\n            if (element.localName === 'q2-currency') {\n                switch (size) {\n                    case 'xsmall':\n                        size = 'small';\n                        break;\n                    case 'xlarge':\n                        size = 'large';\n                        break;\n                    default:\n                        break;\n                }\n            }\n            element.slotSize = size;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.detailClasses}>\n                {this.hasLabel && (\n                    <div\n                        class={this.labelClasses}\n                        aria-describedby={!!this.description ? 'label-description' : undefined}\n                    >\n                        {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                    </div>\n                )}\n                {this.hasDescripiton && (\n                    <div\n                        id=\"label-description\"\n                        class={this.descriptionClasses}\n                    >\n                        {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;MCcPC,IAAQ;EALrB,WAAAC,CAAAC;;;;iIAgBIC,KAASC,YAAgC;6EA4BzCD,KAAOE,UAAY;AAqItB;;;EAhIG,iBAAAC;IACIH,KAAKI;;;;EAMT,sBAAIC;IACA,MAAMC,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK,oBAAoBR,KAAKO;WACnC;MACHD,EAAQE,KAAK;;IAEjB,KAAKR,KAAKE,SAAS;MACfI,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,iBAAIC;IACA,MAAMJ,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK;WACV;MACHF,EAAQE,KAAK;;IAEjB,IAAIR,KAAKE,WAAWF,KAAKW,sBAAsBX,KAAKY,cAAc;MAC9DN,EAAQE,KAAK,kBAAkB,4BAA4BR,KAAKC;WAC7D;MACHK,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,yBAAII;IACA,MAAMC,MAAiBd,KAAKe,YAAYC,UAAUC;IAClD,MAAMC,IAAiBlB,KAAKe,YAAYI,iBAAiB,mBAAmBC;IAC5E,MAAMC,IAAqBrB,KAAKe,YAAYO,WAAWF;IAEvD,OAAON,KAAgBO,IAAqBH;;EAGhD,kBAAIK;IACA,SAASvB,KAAKwB,eAAexB,KAAKa;;EAGtC,YAAIY;IACA,SAASzB,KAAK0B,SAAS1B,KAAK2B;;EAGhC,uBAAIA;IACA,OAAOC,EAAe5B,KAAKe,aAAa;;EAG5C,gBAAIc;IACA,MAAMvB,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK,cAAcR,KAAKO;WAC7B;MACHD,EAAQE,KAAK;;IAEjB,KAAKR,KAAKE,SAAS;MACfI,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,sBAAIE;IACA,OAAOX,KAAKuB,mBAAmBvB,KAAKyB;;EAGxC,gBAAIb;IACA,OAAOZ,KAAKyB,aAAazB,KAAKuB;;EAGlC,gBAAAnB;IACI,MAAM0B,IAAeC,MAAMC,KACvBhC,KAAKe,YAAYI,iBAAiB;IAEtCW,EAAaG,SAAQC;MACjB,IAAI3B,IAAOP,KAAKO;MAChB,IAAI2B,EAAQC,cAAc,eAAe;QACrC,QAAQ5B;SACJ,KAAK;UACDA,IAAO;UACP;;SACJ,KAAK;UACDA,IAAO;UACP;;;MAKZ2B,EAAQE,WAAW7B;AAAI;;;;EAO/B,MAAA8B;IACI,OACIC,EAAK;MAAAC,KAAA;MAAAC,OAAOxC,KAAKU;OACZV,KAAKyB,YACFa,EAAA;MAAAC,KAAA;MACIC,OAAOxC,KAAK6B;MAAY,sBACJ7B,KAAKwB,cAAc,sBAAsBiB;SAE1DzC,KAAK0B,QAAQgB,EAAI1C,KAAK0B,SAAS1B,KAAK2B,sBAAsBW,EAAM;MAAAK,MAAK;SAAa,KAG5F3C,KAAKuB,kBACFe,EAAA;MAAAC,KAAA;MACIK,IAAG;MACHJ,OAAOxC,KAAKK;SAETL,KAAKwB,cAAckB,EAAI1C,KAAKwB,eAAexB,KAAKa,wBAAwByB,EAAA,gBAAW","ignoreList":[]}
+{"version":3,"names":["q2DetailCss","Q2Detail","constructor","hostRef","this","alignment","stacked","componentWillLoad","setSlotSizeProps","descriptionClasses","classes","size","push","join","detailClasses","onlyHasDescripiton","onlyHasLabel","hasDefaultSlotContent","hasInnerHtml","hostElement","innerHTML","trim","namedSlotCount","querySelectorAll","length","hostChildNodeCount","childNodes","hasDescripiton","description","hasLabel","label","hasLabelSlotContent","hasSlotContent","labelClasses","slotElements","Array","from","forEach","element","localName","slotSize","render","h","key","class","undefined","loc","name","id"],"sources":["src/components/q2-detail/q2-detail.scss?tag=q2-detail&encapsulation=shadow","src/components/q2-detail/q2-detail.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n::slotted([slot]) {\n    display: flex;\n    align-items: center;\n    --tct-icon-size: var(--tct-detail-label-icon-size, 16px);\n}\n\n.detail {\n    column-gap: var-list(--tct-detail-gap-column, --app-scale-1x, 5px);\n    row-gap: var-list(--tct-detail-gap-row, 0px);\n\n    &-block {\n        display: flex;\n        width: 100%;\n    }\n\n    &-inline {\n        display: flex;\n    }\n\n    &-horizontal {\n        align-items: var(--tct-detail-vertical-alignment, baseline);\n        flex-direction: row;\n    }\n\n    &-stacked {\n        flex-direction: column;\n\n        &-alignment-left {\n            align-items: flex-start;\n        }\n\n        &-alignment-right {\n            align-items: flex-end;\n        }\n\n        &-alignment-center {\n            align-items: center;\n        }\n    }\n}\n\n.label {\n    flex: 1;\n    text-align: left;\n    line-height: 1.5;\n    color: var(--tct-detail-label-font-color, #141430);\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-label-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-label-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-label-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-label-small-font-color);\n            font-size: var(--tct-detail-label-small-font-size, 14px);\n            font-weight: var(--tct-detail-label-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-label-medium-font-color);\n            font-size: var(--tct-detail-label-medium-font-size, 14px);\n            font-weight: var(--tct-detail-label-medium-font-weight, 400);\n        }\n        &-large {\n            color: var(--tct-detail-label-large-font-color);\n            font-size: var(--tct-detail-label-large-font-size, 16px);\n            font-weight: var(--tct-detail-label-large-font-weight, 400);\n        }\n        &-xlarge {\n            color: var(--tct-detail-label-xlarge-font-color);\n            font-size: var(--tct-detail-label-xlarge-font-size, 18px);\n            font-weight: var(--tct-detail-label-xlarge-font-weight, 400);\n        }\n        &-inline {\n            font-size: var(--tct-detail-label-inline-font-size, 1em);\n            font-weight: var(--tct-detail-label-inline-font-weight, 400);\n            color: inherit;\n        }\n    }\n}\n\n.description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    line-height: 1.5;\n    color: var(--tct-detail-description-font-color, #141430);\n    column-gap: var-list(--tct-detail-description-gap-column, --app-scale-1x, 5px);\n\n    &-alignment-right {\n        justify-content: flex-end;\n    }\n\n    &-size {\n        &-xsmall {\n            color: var(--tct-detail-description-xsmall-font-color, #6f6f82);\n            font-size: var(--tct-detail-description-xsmall-font-size, 14px);\n            font-weight: var(--tct-detail-description-xsmall-font-weight, 400);\n        }\n        &-small {\n            color: var(--tct-detail-description-small-font-color);\n            font-size: var(--tct-detail-description-small-font-size, 14px);\n            font-weight: var(--tct-detail-description-small-font-weight, 400);\n        }\n        &-medium {\n            color: var(--tct-detail-description-medium-font-color);\n            font-size: var(--tct-detail-description-medium-font-size, 24px);\n            font-weight: var(--tct-detail-description-medium-font-weight, 600);\n        }\n        &-large {\n            color: var(--tct-detail-description-large-font-color);\n            font-size: var(--tct-detail-description-large-font-size, 28px);\n            font-weight: var(--tct-detail-description-large-font-weight, 600);\n        }\n        &-xlarge {\n            color: var(--tct-detail-description-xlarge-font-color);\n            font-size: var(--tct-detail-description-xlarge-font-size, 32px);\n            font-weight: var(--tct-detail-description-xlarge-font-weight, 700);\n        }\n        &-inline {\n            font-size: var(--tct-detail-description-inline-font-size, 1em);\n            color: inherit;\n        }\n    }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @name Detail\n * @category Display\n * @summary Use for displaying label-value pairs like account details or miscellaneous info.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({\n    tag: 'q2-detail',\n    styleUrl: 'q2-detail.scss',\n    shadow: true,\n})\nexport class Q2Detail {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Defines the alignment of the label and description when stacked, or when only the label or description is present. */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right' | 'center' = 'left';\n\n    /**\n     * Defines the text content of the description.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Defines the text content of the label.\n     *\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the text size of the label and description.\n     *\n     * If not specified, the detail will display as inline text.\n     */\n    @Prop({ reflect: true })\n    size: null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n    /** Determines if the description should appear beneath the label. */\n    @Prop({ reflect: true })\n    stacked: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.setSlotSizeProps();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get descriptionClasses() {\n        const classes = ['description'];\n        if (this.size) {\n            classes.push(`description-size-${this.size}`);\n        } else {\n            classes.push(`description-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`description-alignment-right`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get detailClasses() {\n        const classes = ['detail'];\n        if (this.size) {\n            classes.push(`detail-block`);\n        } else {\n            classes.push(`detail-inline`);\n        }\n        if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {\n            classes.push('detail-stacked', `detail-stacked-alignment-${this.alignment}`);\n        } else {\n            classes.push('detail-horizontal');\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasDefaultSlotContent() {\n        const hasInnerHtml = !!this.hostElement.innerHTML.trim();\n        const namedSlotCount = this.hostElement.querySelectorAll(':scope > [slot]').length;\n        const hostChildNodeCount = this.hostElement.childNodes.length;\n\n        return hasInnerHtml && hostChildNodeCount > namedSlotCount;\n    }\n\n    get hasDescripiton() {\n        return !!this.description || this.hasDefaultSlotContent;\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.hostElement, 'label');\n    }\n\n    get labelClasses() {\n        const classes = ['label'];\n        if (this.size) {\n            classes.push(`label-size-${this.size}`);\n        } else {\n            classes.push(`label-size-inline`);\n        }\n        if (!this.stacked) {\n            classes.push(`label-align-left`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get onlyHasDescripiton() {\n        return this.hasDescripiton && !this.hasLabel;\n    }\n\n    get onlyHasLabel() {\n        return this.hasLabel && !this.hasDescripiton;\n    }\n\n    setSlotSizeProps() {\n        const slotElements = Array.from(\n            this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot=\"label\"] > *')\n        ) as { slotSize?: string; localName?: string }[];\n        slotElements.forEach(element => {\n            let size = this.size;\n            if (element.localName === 'q2-currency') {\n                switch (size) {\n                    case 'xsmall':\n                        size = 'small';\n                        break;\n                    case 'xlarge':\n                        size = 'large';\n                        break;\n                    default:\n                        break;\n                }\n            }\n            element.slotSize = size;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.detailClasses}>\n                {this.hasLabel && (\n                    <div\n                        class={this.labelClasses}\n                        aria-describedby={!!this.description ? 'label-description' : undefined}\n                    >\n                        {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                    </div>\n                )}\n                {this.hasDescripiton && (\n                    <div\n                        id=\"label-description\"\n                        class={this.descriptionClasses}\n                    >\n                        {!!this.description ? loc(this.description) : this.hasDefaultSlotContent ? <slot /> : ''}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;MCcPC,IAAQ;EALrB,WAAAC,CAAAC;;;;iIAgBIC,KAASC,YAAgC;6EA4BzCD,KAAOE,UAAY;AAqItB;;;EAhIG,iBAAAC;IACIH,KAAKI;;;;EAMT,sBAAIC;IACA,MAAMC,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK,oBAAoBR,KAAKO;WACnC;MACHD,EAAQE,KAAK;;IAEjB,KAAKR,KAAKE,SAAS;MACfI,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,iBAAIC;IACA,MAAMJ,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK;WACV;MACHF,EAAQE,KAAK;;IAEjB,IAAIR,KAAKE,WAAWF,KAAKW,sBAAsBX,KAAKY,cAAc;MAC9DN,EAAQE,KAAK,kBAAkB,4BAA4BR,KAAKC;WAC7D;MACHK,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,yBAAII;IACA,MAAMC,MAAiBd,KAAKe,YAAYC,UAAUC;IAClD,MAAMC,IAAiBlB,KAAKe,YAAYI,iBAAiB,mBAAmBC;IAC5E,MAAMC,IAAqBrB,KAAKe,YAAYO,WAAWF;IAEvD,OAAON,KAAgBO,IAAqBH;;EAGhD,kBAAIK;IACA,SAASvB,KAAKwB,eAAexB,KAAKa;;EAGtC,YAAIY;IACA,SAASzB,KAAK0B,SAAS1B,KAAK2B;;EAGhC,uBAAIA;IACA,OAAOC,EAAe5B,KAAKe,aAAa;;EAG5C,gBAAIc;IACA,MAAMvB,IAAU,EAAC;IACjB,IAAIN,KAAKO,MAAM;MACXD,EAAQE,KAAK,cAAcR,KAAKO;WAC7B;MACHD,EAAQE,KAAK;;IAEjB,KAAKR,KAAKE,SAAS;MACfI,EAAQE,KAAK;;IAGjB,OAAOF,EAAQG,KAAK;;EAGxB,sBAAIE;IACA,OAAOX,KAAKuB,mBAAmBvB,KAAKyB;;EAGxC,gBAAIb;IACA,OAAOZ,KAAKyB,aAAazB,KAAKuB;;EAGlC,gBAAAnB;IACI,MAAM0B,IAAeC,MAAMC,KACvBhC,KAAKe,YAAYI,iBAAiB;IAEtCW,EAAaG,SAAQC;MACjB,IAAI3B,IAAOP,KAAKO;MAChB,IAAI2B,EAAQC,cAAc,eAAe;QACrC,QAAQ5B;SACJ,KAAK;UACDA,IAAO;UACP;;SACJ,KAAK;UACDA,IAAO;UACP;;;MAKZ2B,EAAQE,WAAW7B;AAAI;;;;EAO/B,MAAA8B;IACI,OACIC,EAAK;MAAAC,KAAA;MAAAC,OAAOxC,KAAKU;OACZV,KAAKyB,YACFa,EAAA;MAAAC,KAAA;MACIC,OAAOxC,KAAK6B;MAAY,sBACJ7B,KAAKwB,cAAc,sBAAsBiB;SAE1DzC,KAAK0B,QAAQgB,EAAI1C,KAAK0B,SAAS1B,KAAK2B,sBAAsBW,EAAM;MAAAK,MAAK;SAAa,KAG5F3C,KAAKuB,kBACFe,EAAA;MAAAC,KAAA;MACIK,IAAG;MACHJ,OAAOxC,KAAKK;SAETL,KAAKwB,cAAckB,EAAI1C,KAAKwB,eAAexB,KAAKa,wBAAwByB,EAAA,gBAAW","ignoreList":[]}