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

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

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown-item.entry.esm.js","sources":["src/utils/mirror-emit.ts","src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["import { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item-button {\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    flex: 1;\n    text-align: left;\n    padding: var-list(var-prefixer(dropdown-item-padding), --comp-default-dropdown-item-padding);\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n    }\n\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\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    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     * @deprecated\n     */\n    @Event()\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus();\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-item-wrapper\"\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;AAEA;;;;;;;AAOG;AACH,MAAM,UAAU,GAAG,CAA4B,OAA2B,EAAE,MAAqB,EAAE,MAAS,KAAI;AAC5G,IAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;;AACnB,QAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAoB;AACpD,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,MAAM,CAAC;AAC7B,KAAC,CAAC;AACN,CAAC;;AChBD,MAAM,iBAAiB,GAAG,utGAAutG;;MCiBpuG,cAAc,GAAA,MAAA;AAD3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAoII,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAa;YAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU;AAAE,gBAAA,OAAO,EAAE;YAE1B,OAAO,UAAU,CAAC;kBACZ,GAAG,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa;kBAC9C,GAAG,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,aAAa,CAAC;AAC7D,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AACrC,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY;gBAAE,IAAI,CAAC,cAAc,EAAE;AACzD,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,wBAAwB,EAAE;YAEhC,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;AACpC,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAC1B,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;YACrC,KAAK,CAAC,eAAe,EAAE;AAC3B,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAoB,KAAI;AAC1C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,SAAS,EAAE;AACnD,SAAC;AA+DJ;;;IAvJG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE;;IAG7C,gBAAgB,GAAA;QACZ,IAAI,IAAI,CAAC,SAAS;YAAE;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAChC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;;;;;IAQxB,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,UAAU;;AAG/E,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAO,GAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;;IAG7E,SAAS,GAAA;AACL,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE;;IAGhC,cAAc,GAAA;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;;IAiD5C,aAAa,GAAA;AACT,QAAA,QACI,WACI,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,cAAc,EAAA,EAEnB,CACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,gBAC1B,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAChC,KAAK,EAAC,oCAAoC,EAC1C,QAAQ,EAAC,IAAI,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EACjB,cAAc,EAAA,EAEtB,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CAC9B,EACR,IAAI,CAAC,SAAS,KACX,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAC,2CAA2C,EACjD,QAAQ,EAAC,IAAI,EAAA,YAAA,EACD,IAAI,CAAC,WAAW,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,SAAA,EACtB,oBAAoB,EAAA,EAE5B,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAA,CAAG,CACnB,CACZ,CACC;;IAId,kBAAkB,GAAA;QACd,QACI,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,WAAW,EAAA,SAAA,EACR,uBAAuB,EAAA,CACjC;;IAIV,MAAM,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;AAGpC,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;;;;;;;;;;"}
+{"version":3,"file":"q2-dropdown-item.entry.esm.js","sources":["src/utils/mirror-emit.ts","src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["import { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item-button {\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    text-align: left;\n    width: 100%;\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    cursor: pointer;\n\n    display: grid;\n    align-items: center;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    grid-template-areas: 'icon content';\n\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\nslot {\n    grid-area: 'content';\n}\n\n.remove-dropdown-item:focus-visible,\n.dropdown-item:focus-visible {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus\n     {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n        color: var(--tct-option-active-color, inherit);\n    }\n\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\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    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     * @deprecated\n     */\n    @Event()\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus();\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-item-wrapper\"\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    {/* .icon is a placeholder to make the dd-item match the structure of option */}\n                    <div class=\"icon\"></div>\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n                role=\"separator\"\n            ></div>\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { r as t, c as o, h as r, g as e } from "./index-CGkHOjh1.js";
+import { r as t, c as o, h as e, g as r } from "./index-CGkHOjh1.js";
 
-import { l as i, d as a, o as d } from "./index-YJ5sXwiE.js";
+import { l as i, d as a, o as n } from "./index-YJ5sXwiE.js";
 
 /**
  * Emits specified events from a given component context with the provided detail.
@@ -9,20 +9,20 @@ import { l as i, d as a, o as d } from "./index-YJ5sXwiE.js";
  * @param context - The component context that contains the event emitters.
  * @param events - An array of event names to be emitted.
  * @param detail - The detail payload to be passed to each emitted event.
- */ const mirrorEmit = (t, o, r) => {
+ */ const mirrorEmit = (t, o, e) => {
   o.forEach((o => {
-    var e;
+    var r;
     const i = t[o];
     if (!i) return;
-    (e = i.emit) === null || e === void 0 ? void 0 : e.call(i, r);
+    (r = i.emit) === null || r === void 0 ? void 0 : r.call(i, e);
   }));
 };
 
-const n = "*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
+const s = '*{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}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));text-align:left;width:100%;--comp-padding:0 var(--app-scale-2x, 10px);padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:grid;align-items:center;grid-template-columns:var(--comp-selected-icon-size) 1fr;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}slot{grid-area:"content"}.remove-dropdown-item:focus-visible,.dropdown-item:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}';
 
-const s = class {
-  constructor(r) {
-    t(this, r);
+const d = class {
+  constructor(e) {
+    t(this, e);
     this.click = o(this, "click", 7);
     this.tctClick = o(this, "tctClick", 7);
     this.handleQ2LocValue = () => {
@@ -65,7 +65,7 @@ const s = class {
   }
   componentDidLoad() {
     if (this.separator) return;
-    d(this.hostElement);
+    n(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -96,10 +96,10 @@ const s = class {
   // #endregion
   // #region Render Methods
   renderItemDOM() {
-    return r("div", {
+    return e("div", {
       class: "dropdown-item-wrapper",
       role: "presentation"
-    }, r("button", {
+    }, e("button", {
       ref: t => this.dropdownItemBtn = t,
       "aria-label": i(this.innerLabel),
       class: "dropdown-item-button dropdown-item",
@@ -110,7 +110,9 @@ const s = class {
       onKeyDown: this.onItemKeydown,
       onFocus: this.onItemFocus,
       "test-id": "dropdownItem"
-    }, r("slot", null, i(this.innerLabel))), this.removable && r("button", {
+    }, e("div", {
+      class: "icon"
+    }), e("slot", null, i(this.innerLabel))), this.removable && e("button", {
       ref: t => this.removeBtn = t,
       class: "dropdown-item-button remove-dropdown-item",
       tabindex: "-1",
@@ -120,15 +122,15 @@ const s = class {
       onKeyDown: this.onRemoveBtnKeydown,
       onFocus: this.onRemoveBtnFocus,
       "test-id": "removeDropdownItem"
-    }, r("q2-icon", {
+    }, e("q2-icon", {
       type: "close"
     })));
   }
   renderSeparatorDOM() {
-    return r("div", {
-      class: "dropdown-separator",
-      role: "separator",
-      "test-id": "dropdownItemSeparator"
+    return e("div", {
+      class: "separator",
+      "test-id": "dropdownItemSeparator",
+      role: "separator"
     });
   }
   render() {
@@ -138,7 +140,7 @@ const s = class {
     return this.renderItemDOM();
   }
   get hostElement() {
-    return e(this);
+    return r(this);
   }
   static get watchers() {
     return {
@@ -147,8 +149,8 @@ const s = class {
   }
 };
 
-s.style = n;
+d.style = s;
 
-export { s as q2_dropdown_item };
+export { d as q2_dropdown_item };
 //# sourceMappingURL=q2-dropdown-item.entry.esm.js.map
 //# sourceMappingURL=q2-dropdown-item.entry.js.map