q2-tecton-elements 1.38.2 → 1.39.0

package/dist/q2-tecton-elements/p-145849d0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2Pill","this","scheduledAfterRender","syncValueProperties","value","selectedOptions","length","selectedOptionsChanged","valueChanged","getOption","async","optionList","options","getOptions","find","option","hostElement","querySelector","updateSelectedOptionElements","selectedValues","map","_a","optionCount","active","selectedOptionElements","filter","includes","determineOptionCount","numberOfOptions","querySelectorAll","clearSelectedOptions","open","primaryBtn","focus","change","emit","values","push","resizeIframe","handleClick","event","stopPropagation","disabled","shouldShowActionSheet","executeActionSheet","popoverElement","toggle","label","isActive","display","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","handleExternalKeydown","handleButtonFocusout","relatedTarget","tagName","handleChange","handleSelectionChanges","detail","handleWrapperClick","click","onClickElsewhere","target","localName","window","Tecton","useActionSheets","componentWillLoad","observer","MutationObserver","observe","childList","attributes","mutationObserver","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","disconnectedCallback","disconnect","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","result","showActionSheetList","changeDetails","multiple","onchange","undefined","selectedOption","newValue","firstValue","_b","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","handleSelectedDisplay","generateIcon","isButton","TagName","iconName","h","class","onClick","type","generateHiddenElement","id","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","onReady","optionListLabel"],"sources":["./src/components/q2-pill/styles.scss?tag=q2-pill&encapsulation=shadow","./src/components/q2-pill/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    :host(:not(:empty)) &,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #61c4ff)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #61c4ff)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #d9e1e6)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #d9e1e6)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #f4fafe)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #f4fafe)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    :host(:not(:empty)) &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentColor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list';\n\n@Component({\n    tag: 'q2-pill',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Pill implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true, mutable: true }) active: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) multiple: boolean;\n    @Prop({ reflect: true }) maxLength: number;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) value: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop({ mutable: true }) selectedOptions: IOptionValue[] = [];\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string;\n\n    @State() optionCount: number;\n    @State() selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    @Element() hostElement: HTMLElement;\n    @Event() change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n    scheduledAfterRender: (() => void)[] = [];\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n    popoverElement: HTMLQ2PopoverElement;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength)\n            return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n        else return buttonContent;\n    }\n\n    /// Helpers ///\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) || [];\n    };\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    async executeActionSheet(event: MouseEvent | KeyboardEvent) {\n        const result = await showActionSheetList(this, event);\n        this.handleSelectionChanges(result);\n    }\n\n    async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = await this.getOption(value);\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value,\n            values,\n            active: isActive,\n        });\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    /// Watchers ///\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (multiple) return;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = await this.getOption(newValue);\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n    /// Event Handlers ///\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    /// DOM ///\n    generateIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={isButton && this.clearSelectedOptions}\n                disabled={isButton && this.disabled}\n                aria-label={isButton && loc('tecton.element.pill.clearSelection')}\n                type={isButton && 'button'}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role=\"combobox\"\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleButtonFocusout}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={optionCount && 'option-list'}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.maxLength && this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.generateIcon()}\n                    {this.generateHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                    >\n                        <q2-option-list\n                            type=\"listbox\"\n                            ref={el => (this.optionList = el)}\n                            id=\"option-list\"\n                            onChange={this.handleChange}\n                            multiple={this.multiple}\n                            selectedOptions={this.selectedOptions}\n                            onReady={() => this.updateSelectedOptionElements()}\n                            label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        >\n                            <slot />\n                        </q2-option-list>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-2812f9d2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","Q2DataTable","this","checkSlots","hasExpandableRows","_b","_a","hostElement","querySelector","hasDropdowns","_d","_c","checkSlotCount","onSort","header","direction","sorted","sortKey","key","sortEvent","sort","emit","defaultPrevented","serializedHeaders","map","serializedHeader","undefined","Object","assign","serializedRows","sortRows","onSelectAllRows","event","stopPropagation","checked","detail","selectedRows","row","selected","selectEvent","select","rows","allSelected","allRowsSelected","onSelectRow","selectMode","currentlySelectedRows","selectedRow","filter","id","length","onClickTableRow","clickable","onClickRow","onToggleRow","click","expanded","toggleEvent","toggle","onControlContainerClick","componentWillLoad","headersHandler","headers","rowsHandler","componentDidLoad","MutationObserver","observer","observe","childList","subtree","attributes","mutationObserver","ResizeObserver","resizeObserver","resizeIframe","disconnectedCallback","disconnect","find","numberOfColumns","selectable","mappedHeaders","reduce","accum","sortedRows","a","b","aValue","cells","value","bValue","title","toLowerCase","replace","defaultRow","serializedCells","entries","cellKey","cellData","align","type","lineClamp","isBadge","defaultCell","ariaLabel","badgeStatus","badgeTheme","result","sortedHeader","onClickListener","PointerEvent","stopImmediatePropagation","render","caption","h","class","hideCaption","renderTableColGroup","renderTableHeader","renderTableRows","width","backgroundColor","style","hideClickable","label","loc","onChange","disabled","loading","headerClasses","push","join","sortable","onClick","colSpan","inline","isSelectDisabled","clickableClasses","clickableClassString","cellSlotPrefix","expandableRowName","dropdownCellName","rowHasExpandableSlot","rowHasDropdownSlot","rowClasses","rowIsClickable","Fragment","e","tabIndex","cell","cellAlign","cellClasses","cellStyles","name","renderCellContent","intent","size","ariaExpanded","ariaControls","hidden","includes","valueAsInt","parseFloat","theme","status","valueAsString"],"sources":["./src/components/q2-data-table/styles.scss?tag=q2-data-table&encapsulation=shadow","./src/components/q2-data-table/index.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(--tct-data-table-select-column-width, --tct-table-select-column-width, --tct-checkbox-size, 20px)};\n    --comp-dropdown-column-width: #{var-list(--tct-data-table-dropdown-column-width, --tct-table-dropdown-column-width, --tct-btn-icon-width, 44px)};\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(--tct-data-table-shadow, --tct-table-shadow, --app-shadow-1, unquote('0 2px 4px rgba(0, 0, 0, 0.3)'));\n    }\n\n    :host([density='compact']) & {\n        --comp-cell-padding: #{var-list(--tct-data-table-cell-padding-compact, --tct-table-cell-padding-compact, --app-scale-1x, 5px)};\n    }\n\n    :host([density='comfortable']) & {\n        --comp-cell-padding: #{var-list(--tct-data-table-cell-padding-comfortable, --tct-table-cell-padding-comfortable, --app-scale-5x, 25px)};\n    }\n}\n\ntable {\n    table-layout: var-list(--tct-data-table-layout, --tct-table-layout, auto);\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: var-list(--tct-data-table-width, --tct-table-width);\n    min-width: 100%;\n    background: var-list(--tct-data-table-background, --tct-table-background, --t-base, #ffffff);\n    caption-side: var-list(--tct-data-table-caption-side, --tct-table-caption-side, bottom);\n}\n\nthead {\n    border-width: var-list(--tct-data-table-header-border-width, --tct-table-header-border-width, unquote('0 0 2px 0'));\n    border-style: var-list(--tct-data-table-header-border-style, --tct-table-header-border-style, solid);\n    border-color: var-list(--tct-data-table-header-border-color, --tct-table-header-border-color, --t-gray-9, #999999);\n    background: var-list(--tct-data-table-header-background, --tct-table-header-background);\n}\n\ncol {\n    &.select-column {\n        width: var(--comp-select-column-width);\n    }\n\n    &.expandable-row-control-column {\n        width: var(--comp-expandable-row-control-column-width);\n    }\n\n    &.dropdown-column {\n        width: var(--comp-dropdown-column-width);\n    }\n}\n\ntd,\nth {\n    padding: var(--comp-cell-padding);\n    text-align: start;\n\n    &.align-end {\n        text-align: end;\n    }\n    &.align-center {\n        text-align: center;\n    }\n}\n\nth {\n    .header-content {\n        font-weight: var-list(--tct-data-table-header-font-weight, --tct-table-header-font-weight, 400);\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(--tct-data-table-header-sorted-font-weight, --tct-table-header-sorted-font-weight, 600);\n        }\n    }\n\n    .sorted-indicator {\n        --comp-header-sortable-icon-size: #{var-list(--tct-data-table-header-sortable-icon-size, --tct-table-header-sortable-icon-size, --app-scale-3x, 15px)};\n        --tct-icon-stroke-width: 2;\n\n        width: var(--comp-header-sortable-icon-size);\n        height: var(--comp-header-sortable-icon-size);\n\n        &.direction-ASC {\n            transform: rotate(180deg);\n        }\n    }\n\n    q2-btn {\n        .header-content {\n            display: flex;\n            align-items: center;\n            gap: var-list(--tct-data-table-header-content-gap, --tct-table-header-content-gap, --app-scale-2x, 10px);\n        }\n    }\n}\n\ntr {\n    &.expandable,\n    &.clickable {\n        cursor: pointer;\n\n        &:focus {\n            outline: none;\n            box-shadow: none;\n        }\n    }\n\n    &.expandable {\n        &:hover {\n            background: var-list(--tct-data-table-expandable-row-hover-background, --tct-table-expandable-row-hover-background, --t-gray-14, #f2f2f2);\n        }\n    }\n\n    &.clickable {\n        &:hover {\n            background: var-list(--tct-data-table-clickable-row-hover-background, --tct-table-clickable-row-hover-background, --t-gray-14, #f2f2f2);\n        }\n    }\n\n    &.selected {\n        background: var-list(--tct-data-table-selected-row-background, --tct-table-selected-row-background, --t-gray-14, #f2f2f2);\n    }\n\n    &.expanded {\n        background: var-list(--tct-data-table-expanded-row-background, --tct-table-expanded-row-background, --t-gray-14, #f2f2f2);\n\n        .toggle-expandable-row {\n            transform: rotate(180deg);\n        }\n    }\n\n    :host([bordered]:not([bordered='false'])) tbody & {\n        border-width: var-list(--tct-data-table-row-border-width, --tct-table-row-border-width, unquote('0 0 1px 0'));\n        border-style: var-list(--tct-data-table-row-border-style, --tct-table-row-border-style, solid);\n        border-color: var-list(--tct-data-table-row-border-color, --tct-table-row-border-color, --t-gray-9, #999999);\n    }\n\n    &.loading-row {\n        background: var-list(--tct-data-table-loading-row-background, --tct-table-loading-row-background, --t-base, #ffffff);\n        td {\n            text-align: center;\n        }\n\n        q2-loading {\n            font-size: 4em;\n        }\n    }\n\n    &.expandable-row {\n        background: var-list(--tct-data-table-expanded-row-background, --tct-table-expanded-row-background, --t-gray-14, #f2f2f2);\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(--tct-data-table-expandable-row-control-column-padding, --tct-table-expandable-row-control-column-padding, unquote('0 var(--app-scale-1x, 5px)'));\n        text-align: center;\n    }\n\n    &.dropdown-column {\n        padding: var-list(--tct-data-table-dropdown-column-padding, --tct-table-dropdown-column-padding, unquote('0 var(--app-scale-1x, 5px)'));\n        text-align: center;\n    }\n\n    &.click-column:not(.sr) {\n        padding: var-list(--tct-data-table-clickable-column-padding, --tct-table-clickable-column-padding, unquote('0 var(--app-scale-1x, 5px)'));\n        text-align: center;\n    }\n}\n\ncaption {\n    padding: var-list(--tct-data-table-caption-padding, --tct-table-caption-padding, --app-scale-2x, 10px);\n    font-size: var-list(--tct-data-table-caption-font-size, --tct-table-caption-font-size, inherit);\n    font-weight: var-list(--tct-data-table-caption-font-weight, --tct-table-caption-font-weight, 600);\n    text-align: var-list(--tct-data-table-caption-text-align, --tct-table-caption-text-align, center);\n    color: var-list(--tct-data-table-caption-color, --tct-table-caption-color, inherit);\n}\n\nq2-checkbox {\n    padding: 0;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Event,\n    Element,\n    EventEmitter,\n    Fragment,\n    Listen,\n} from '@stencil/core';\nimport { loc, resizeIframe } from '../../utils';\n\nexport type Q2DataTableCellAlignOptions = 'start' | 'center' | 'end';\nexport type Q2DataTableCellType =\n    | {\n          type?: 'text' | 'number' | 'icon' | 'boolean' | 'code';\n      }\n    | {\n          type?: 'badge';\n          badgeStatus?: HTMLQ2BadgeElement['status'];\n          badgeTheme?: HTMLQ2BadgeElement['theme'];\n      };\n\nexport type Q2DataTableHeader = {\n    title: string;\n    align?: Q2DataTableCellAlignOptions;\n    key?: string;\n    sortable?: boolean;\n    width?: string;\n    backgroundColor?: string;\n    sorted?: 'ASC' | 'DESC';\n    ariaLabel?: string;\n    lineClamp?: number;\n} & Partial<Q2DataTableCellType>;\n\nexport type Q2DataTableCell = {\n    value: string | number | boolean;\n    align?: Q2DataTableCellAlignOptions;\n    ariaLabel?: string;\n    lineClamp?: number;\n} & Q2DataTableCellType;\n\nexport type Q2DataTableBaseRow = {\n    id: string | number;\n    selected?: boolean;\n    expanded?: boolean;\n};\n\nexport type Q2DataTableCells = Record<string, string | number | Q2DataTableCell>;\nexport type Q2DataTableSerializedCells = Record<string, Q2DataTableCell>;\n\nexport type Q2DataTableRow = Q2DataTableBaseRow & {\n    cells: Q2DataTableCells;\n};\nexport type Q2DataTableSerializedRow = Q2DataTableBaseRow & {\n    cells: Q2DataTableSerializedCells;\n};\n\n@Component({\n    tag: 'q2-data-table',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2DataTable implements ComponentInterface {\n    @Prop({ mutable: true, reflect: true }) density: 'compact' | 'normal' | 'comfortable';\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n    @Prop({ mutable: true, reflect: true }) shadowed: boolean;\n    @Prop({ mutable: true, reflect: true }) selectable: boolean;\n    @Prop({ mutable: true, reflect: true }) clickable: boolean;\n    @Prop({ mutable: true, reflect: true }) loading: boolean;\n    @Prop({ mutable: true, reflect: true }) hideCaption: boolean;\n    @Prop({ mutable: true }) caption: string;\n    @Prop({ mutable: true }) selectMode: 'multiple' | 'single' = 'multiple';\n    @Prop({ mutable: true }) hideClickable: boolean;\n\n    @Prop({ mutable: true }) headers: Q2DataTableHeader[];\n    @Prop({ mutable: true }) rows: Q2DataTableRow[];\n\n    @Element() hostElement: HTMLElement;\n\n    @State() serializedHeaders: Q2DataTableHeader[] = [];\n    @State() serializedRows: Q2DataTableSerializedRow[] = [];\n    @State() hasExpandableRows: boolean = false;\n    @State() hasDropdowns: boolean = false;\n    @State() allRowsSelected: boolean = false;\n    @State() checkSlotCount: number = 0;\n\n    @Event() select: EventEmitter<{\n        row: Q2DataTableSerializedRow;\n        rows: Q2DataTableSerializedRow[];\n        allSelected: boolean;\n    }>;\n    @Event() click: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n    @Event() toggle: EventEmitter<{ row: Q2DataTableSerializedRow }>;\n    @Event() sort: EventEmitter<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>;\n\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        this.headersHandler(this.headers);\n        this.rowsHandler(this.rows);\n    }\n\n    componentDidLoad(): void {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => this.checkSlots());\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        if (typeof ResizeObserver !== 'undefined') {\n            this.resizeObserver = new ResizeObserver(() => resizeIframe());\n            this.resizeObserver.observe(this.hostElement);\n        }\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (this.resizeObserver) {\n            this.resizeObserver.disconnect();\n            this.resizeObserver = null;\n        }\n    }\n\n    /// Getters ///\n    get selectedRows() {\n        return this.serializedRows.filter(({ selected }) => selected);\n    }\n\n    get selectedRow() {\n        return this.selectedRows.find(({ selected }) => !!selected);\n    }\n\n    get numberOfColumns() {\n        return (\n            (this.serializedHeaders?.length ?? 0) +\n            (this.selectable ? 1 : 0) +\n            (this.clickable ? 1 : 0) +\n            (this.hasExpandableRows ? 1 : 0) +\n            (this.hasDropdowns ? 1 : 0)\n        );\n    }\n\n    get mappedHeaders() {\n        return this.serializedHeaders.reduce<Record<string, Q2DataTableHeader>>((accum, header) => {\n            accum[header.key] = header;\n            return accum;\n        }, {});\n    }\n\n    /// Helpers ///\n    sortRows(rows: Q2DataTableSerializedRow[], header: Q2DataTableHeader) {\n        const { key, sorted } = header;\n        const direction = sorted || 'ASC';\n\n        const sortedRows = [...rows].sort((a, b) => {\n            const aValue = a.cells[key].value;\n            const bValue = b.cells[key].value;\n\n            if (aValue < bValue) return direction === 'ASC' ? -1 : 1;\n            if (aValue > bValue) return direction === 'ASC' ? 1 : -1;\n            return 0;\n        });\n\n        return sortedRows;\n    }\n\n    checkSlots = () => {\n        this.hasExpandableRows = !!(this.hostElement?.querySelector(`[slot$=\"-expandable-content\"]`) ?? false);\n        this.hasDropdowns = !!(this.hostElement?.querySelector(`[slot$=\"-dropdown\"]`) ?? false);\n\n        // The booleans above may not change, event if the slot content\n        // So we increment this property to force a re-render and ensure proper rendering\n        this.checkSlotCount += 1;\n    };\n\n    /// Watchers ///\n    @Watch('headers')\n    headersHandler(headers: Q2DataTableHeader[] = []) {\n        this.serializedHeaders = headers.map<Q2DataTableHeader>(header => {\n            const { title } = header;\n            let { key } = header;\n\n            // If no key is provided, generate one from the title\n            if (!key) key = title.toLowerCase().replace(/\\s/g, '-');\n\n            return {\n                key,\n                ...header,\n            };\n        });\n    }\n\n    @Watch('rows')\n    rowsHandler(rows: Q2DataTableRow[] = []) {\n        const { serializedHeaders, mappedHeaders } = this;\n        const defaultRow = {\n            id: null,\n            cells: {},\n            selected: false,\n            expanded: false,\n        };\n\n        const serializedRows = rows.map(({ id, cells, selected, expanded }) => {\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 } = 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                        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            return { ...defaultRow, id, selected: !!selected, expanded: !!expanded, cells: serializedCells };\n        });\n\n        const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);\n\n        this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;\n        this.checkSlots();\n    }\n\n    /// Listeners ///\n    @Listen('click')\n    onClickListener(event: MouseEvent) {\n        if (event instanceof PointerEvent) event.stopImmediatePropagation();\n    }\n\n    /// Event Handlers ///\n    onSort = (header: Q2DataTableHeader) => {\n        const direction = header.sorted === 'ASC' ? 'DESC' : 'ASC';\n        const sortKey = header.key;\n        const sortEvent = this.sort.emit({ header, direction });\n        if (sortEvent.defaultPrevented) return;\n\n        this.serializedHeaders = this.serializedHeaders.map<Q2DataTableHeader>(serializedHeader => {\n            const sorted = sortKey === serializedHeader.key ? direction : undefined;\n            return { ...serializedHeader, sorted };\n        });\n        this.serializedRows = this.sortRows(this.serializedRows, { ...header, sorted: direction });\n    };\n\n    onSelectAllRows = (event: CustomEvent<{ checked: boolean }>) => {\n        event.stopPropagation();\n        const { checked } = event.detail;\n        const selectedRows = checked\n            ? this.serializedRows.map(row => ({\n                  ...row,\n                  selected: checked,\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            row.selected = checked;\n            return row;\n        });\n        this.allRowsSelected = checked;\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 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    };\n\n    onClickTableRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        if (this.clickable) {\n            this.onClickRow(event, row);\n        } else if (this.hasExpandableRows) {\n            this.onToggleRow(event, row);\n        }\n    };\n\n    onClickRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        this.click.emit({ row });\n    };\n\n    onToggleRow = (event: MouseEvent, row: Q2DataTableSerializedRow) => {\n        event.stopPropagation();\n        const selectedRow = { ...row, expanded: !row.expanded };\n        const toggleEvent = this.toggle.emit({ row: selectedRow });\n        if (toggleEvent.defaultPrevented) return;\n\n        this.serializedRows = this.serializedRows.map(row => {\n            if (row.id === selectedRow.id) return selectedRow;\n            else return { ...row };\n        });\n    };\n\n    onControlContainerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    /// DOM ///\n\n    render() {\n        const { caption } = this;\n        return (\n            <div class=\"container\">\n                <table>\n                    {caption && <caption class={this.hideCaption ? 'sr' : undefined}>{caption}</caption>}\n                    {this.renderTableColGroup()}\n                    {this.renderTableHeader()}\n                    {this.renderTableRows()}\n                </table>\n            </div>\n        );\n    }\n\n    renderTableColGroup() {\n        const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;\n\n        if (!headers.length) return null;\n\n        return (\n            <colgroup>\n                {selectable && <col class=\"select-column\" />}\n                {headers.map(({ width, backgroundColor }) => (\n                    <col style={{ width, backgroundColor }} />\n                ))}\n                {clickable && <col class=\"click-column\" />}\n                {hasExpandableRows && <col class=\"expandable-row-control-column\" />}\n                {hasDropdowns && <col class=\"dropdown-column\" />}\n            </colgroup>\n        );\n    }\n\n    renderTableHeader() {\n        const {\n            serializedHeaders: headers,\n            selectable,\n            clickable,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n        } = 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.onSelectAllRows}\n                                    checked={this.allRowsSelected}\n                                    disabled={this.loading}\n                                    test-id=\"select-all-rows-control\"\n                                ></q2-checkbox>\n                            )}\n                        </th>\n                    )}\n                    {headers.map(header => {\n                        const { align, sorted } = header;\n                        const headerClasses = [];\n                        if (align) headerClasses.push(`align-${align}`);\n                        if (!!sorted) headerClasses.push('sorted');\n                        return (\n                            <th\n                                class={headerClasses.join(' ')}\n                                id={`header-${header.key}`}\n                            >\n                                {header.sortable ? (\n                                    <q2-btn\n                                        onClick={() => this.onSort(header)}\n                                        test-id=\"sort-control\"\n                                        disabled={this.loading}\n                                    >\n                                        <div\n                                            class=\"header-content\"\n                                            aria-label={header.ariaLabel || undefined}\n                                        >\n                                            {header.title}\n\n                                            {!!sorted ? (\n                                                <q2-icon\n                                                    class={`sorted-indicator direction-${sorted}`}\n                                                    type=\"arrow-down\"\n                                                    label={\n                                                        sorted === 'ASC'\n                                                            ? loc('tecton.element.dataTable.sortedAscending')\n                                                            : loc('tecton.element.dataTable.sortedDescending')\n                                                    }\n                                                    test-id=\"sorted-indicator\"\n                                                ></q2-icon>\n                                            ) : (\n                                                <q2-icon\n                                                    class={`sorted-indicator`}\n                                                    type=\"sort\"\n                                                    label={loc('tecton.element.dataTable.clickToSort')}\n                                                    test-id=\"sorted-indicator\"\n                                                ></q2-icon>\n                                            )}\n                                        </div>\n                                    </q2-btn>\n                                ) : (\n                                    <div\n                                        class=\"header-content\"\n                                        aria-label={header.ariaLabel || undefined}\n                                    >\n                                        {header.title}\n                                    </div>\n                                )}\n                            </th>\n                        );\n                    })}\n                    {clickable && (\n                        <th\n                            id=\"click\"\n                            class={hideClickable ? 'sr' : undefined}\n                        >\n                            <span class=\"sr\">{loc('tecton.element.dataTable.clickRow')}</span>\n                        </th>\n                    )}\n                    {hasExpandableRows && (\n                        <th id=\"toggle\">\n                            <span class=\"sr\">{loc('tecton.element.dataTable.toggleRow')}</span>\n                        </th>\n                    )}\n                    {hasDropdowns && (\n                        <th>\n                            <span class=\"sr\">{loc('tecton.element.dataTable.dropdown')}</span>\n                        </th>\n                    )}\n                </tr>\n            </thead>\n        );\n    }\n\n    renderTableRows() {\n        const {\n            serializedHeaders: headers,\n            serializedRows: rows,\n            selectable,\n            clickable,\n            hideClickable,\n            selectMode,\n            hasExpandableRows,\n            hasDropdowns,\n            numberOfColumns,\n            loading,\n        } = this;\n\n        if (loading) {\n            return (\n                <tbody>\n                    <tr class=\"loading-row\">\n                        <td colSpan={numberOfColumns}>\n                            <q2-loading inline></q2-loading>\n                        </td>\n                    </tr>\n                </tbody>\n            );\n        }\n\n        if (!rows.length) return;\n\n        let isSelectDisabled = false;\n        let selectedRow;\n        if (selectMode === 'single') {\n            selectedRow = this.selectedRow;\n            isSelectDisabled = !!selectedRow;\n        }\n        const clickableClasses = [];\n        if (clickable) clickableClasses.push('click-column');\n        if (hideClickable) clickableClasses.push('sr');\n        const clickableClassString = clickableClasses.join(' ');\n\n        return (\n            <tbody>\n                {rows.map(row => {\n                    const cellSlotPrefix = `row-${row.id}-cell`;\n                    const expandableRowName = `row-${row.id}-expandable-content`;\n                    const dropdownCellName = `row-${row.id}-dropdown`;\n                    const rowHasExpandableSlot =\n                        hasExpandableRows && !!this.hostElement.querySelector(`[slot=\"${expandableRowName}\"]`);\n                    const rowHasDropdownSlot =\n                        hasDropdowns && !!this.hostElement.querySelector(`[slot=\"${dropdownCellName}\"]`);\n                    const rowClasses = [];\n                    if (rowHasExpandableSlot) rowClasses.push('expandable');\n                    if (clickable) rowClasses.push('clickable');\n                    if (row.expanded) rowClasses.push('expanded');\n                    if (row.selected) rowClasses.push('selected');\n                    const rowIsClickable = clickable || rowHasExpandableSlot;\n\n                    return (\n                        <Fragment>\n                            <tr\n                                id={`row-${row.id}`}\n                                class={rowClasses.join(' ')}\n                                onClick={rowIsClickable && (e => this.onClickTableRow(e, row))}\n                                tabIndex={rowIsClickable ? -1 : undefined}\n                            >\n                                {selectable && (\n                                    <td\n                                        class=\"select-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        <q2-checkbox\n                                            label={loc('tecton.element.dataTable.selectRow')}\n                                            hide-label\n                                            checked={row.selected}\n                                            disabled={isSelectDisabled && row !== selectedRow}\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 cellClasses = [];\n                                    if (cellAlign) cellClasses.push(`align-${cellAlign}`);\n                                    if (lineClamp) cellClasses.push('clamped');\n                                    const cellStyles = lineClamp\n                                        ? { '--comp-line-clamp-count': `${lineClamp}` }\n                                        : undefined;\n\n                                    return (\n                                        <td\n                                            class={cellClasses.join(' ')}\n                                            style={cellStyles}\n                                        >\n                                            <slot name={`${cellSlotPrefix}-${key}`}>\n                                                {this.renderCellContent(cell)}\n                                            </slot>\n                                        </td>\n                                    );\n                                })}\n                                {clickable && (\n                                    <td class={clickableClassString}>\n                                        <q2-btn\n                                            intent=\"neutral\"\n                                            size=\"small\"\n                                            onClick={e => this.onClickRow(e, row)}\n                                            test-id=\"clickable-row-control\"\n                                        >\n                                            {loc('tecton.element.dataTable.clickRow')}\n                                        </q2-btn>\n                                    </td>\n                                )}\n                                {hasExpandableRows && (\n                                    <td\n                                        class=\"expandable-row-control-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasExpandableSlot && (\n                                            <q2-btn\n                                                onClick={e => this.onToggleRow(e, row)}\n                                                ariaExpanded={`${row.expanded}`}\n                                                ariaControls={expandableRowName}\n                                                ariaLabel={loc('tecton.element.dataTable.toggleRow')}\n                                                test-id=\"expandable-row-control\"\n                                            >\n                                                <q2-icon\n                                                    type=\"chevron-down\"\n                                                    class=\"toggle-expandable-row\"\n                                                ></q2-icon>\n                                            </q2-btn>\n                                        )}\n                                    </td>\n                                )}\n                                {hasDropdowns && (\n                                    <td\n                                        class=\"dropdown-column\"\n                                        onClick={this.onControlContainerClick}\n                                    >\n                                        {rowHasDropdownSlot && <slot name={dropdownCellName}></slot>}\n                                    </td>\n                                )}\n                            </tr>\n                            {rowHasExpandableSlot && (\n                                <tr\n                                    id={expandableRowName}\n                                    class=\"expandable-row\"\n                                    hidden={!row.expanded}\n                                    aria-hidden={!row.expanded}\n                                >\n                                    <td\n                                        colSpan={numberOfColumns}\n                                        headers=\"toggle\"\n                                    >\n                                        <div class=\"expandable-content\">\n                                            <slot name={expandableRowName}></slot>\n                                        </div>\n                                    </td>\n                                </tr>\n                            )}\n                        </Fragment>\n                    );\n                })}\n            </tbody>\n        );\n    }\n\n    renderCellContent(cell: Q2DataTableCell) {\n        if (!cell) return;\n\n        const { type, ariaLabel, value } = cell;\n\n        if ([undefined, null].includes(value)) return;\n\n        switch (type) {\n            case 'badge':\n                let valueAsInt;\n                switch (typeof value) {\n                    case 'string':\n                        valueAsInt = parseFloat(value);\n                        break;\n\n                    case 'boolean':\n                        valueAsInt = value ? 1 : 0;\n                        break;\n\n                    default:\n                        valueAsInt = value;\n                        break;\n                }\n\n                return (\n                    <q2-badge\n                        aria-label={ariaLabel}\n                        value={valueAsInt}\n                        theme={cell.badgeTheme}\n                        status={cell.badgeStatus}\n                        size=\"large\"\n                    ></q2-badge>\n                );\n\n            case 'icon':\n                const valueAsString = typeof value === 'string' ? value : `${value}`;\n                return (\n                    <q2-icon\n                        label={ariaLabel}\n                        type={valueAsString}\n                    ></q2-icon>\n                );\n\n            case 'boolean':\n                return !!value ? (\n                    <q2-icon\n                        label={loc('tecton.element.dataTable.booleanTrue')}\n                        type=\"checkmark\"\n                    ></q2-icon>\n                ) : (\n                    <div aria-label={loc('tecton.element.dataTable.booleanFalse')}></div>\n                );\n\n            case 'code':\n                return <code aria-label={ariaLabel}>{value}</code>;\n\n            default:\n                return <div aria-label={ariaLabel}>{value}</div>;\n        }\n    }\n}\n"],"mappings":"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"}