q2-tecton-elements 1.37.1 → 1.38.1

package/dist/components/q2-checkbox-group.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as createGuid, l as loc } from './index16.js';
 import { d as defineCustomElement$2 } from './index8.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
 
 const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup extends HTMLElement {
   constructor() {
@@ -75,6 +75,11 @@ const Q2CheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2CheckboxGroup
     });
   }
   /// Methods ///
+  /**
+   * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.
+   *
+   * @testOnly
+   */
   setValue(values) {
     const valuesSet = new Set(Array.isArray(values) ? values : [values]);
     this.checkboxElements.forEach(check => {

package/dist/components/q2-checkbox-group.js.map

@@ -1 +1 @@
-{"file":"q2-checkbox-group.js","mappings":"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","names":["Q2CheckboxGroup"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"version":3}
+{"file":"q2-checkbox-group.js","mappings":"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","names":["Q2CheckboxGroup"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-checkbox-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: object;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean = false;\n    @Prop({ reflect: true }) optional: boolean = false;\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated();\n        this.updateDisabled();\n    };\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    ///// LIFECYCLE HOOK ///////\n\n    componentWillLoad() {\n        this.updateReadonly(this.readonly);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueUpdated() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    @Watch('disabled')\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    @Watch('readonly')\n    updateReadonly(newReadonly: boolean) {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = newReadonly;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.label || this.optional ? (\n                    <div class=\"group-legend\">\n                        {this.label && loc(this.label)}\n                        {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n                    </div>\n                ) : (\n                    ''\n                )}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? (\n                        <legend class=\"sr-only\">\n                            {this.label && loc(this.label)}\n                            {this.optional ? (\n                                <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n                            ) : (\n                                ''\n                            )}\n                        </legend>\n                    ) : (\n                        ''\n                    )}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"version":3}

package/dist/components/q2-data-table.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './index6.js';
 import { d as defineCustomElement$3 } from './index8.js';
 import { d as defineCustomElement$2 } from './index10.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}td,th{padding:var(--comp-cell-padding);text-align:start}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 400));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host([bordered]:not([bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}td,th{padding:var(--comp-cell-padding);text-align:start}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 400));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host([bordered]:not([bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
 
 const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class Q2DataTable extends HTMLElement {
   constructor() {

package/dist/components/q2-data-table.js.map

@@ -1 +1 @@
-{"file":"q2-data-table.js","mappings":"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","names":["Q2DataTable"],"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"],"version":3}
+{"file":"q2-data-table.js","mappings":"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","names":["Q2DataTable"],"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"],"version":3}

package/dist/components/q2-dropdown.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index10.js';
 import { d as defineCustomElement$2 } from './index15.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 
 const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends HTMLElement {
   constructor() {

package/dist/components/q2-dropdown.js.map

@@ -1 +1 @@
-{"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown"],"sources":["./src/components/q2-dropdown/styles.scss?tag=q2-dropdown&encapsulation=shadow","./src/components/q2-dropdown/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { handleAriaLabel, handleRenamedProp, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-dropdown',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n    @Prop({ reflect: true }) icon: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) context: string;\n    @Prop({ reflect: true }) contextValue: string;\n    @Prop({ reflect: true }) resolvedType: string;\n    @Prop({ reflect: true }) additionalContext: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop() popoverMinHeight: number = 150;\n    @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\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    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.focusToggle();\n            this.closeDropdown();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                    >\n                        <slot />\n                        {this.open && (\n                            <q2-btn\n                                class=\"sr close-dropdown\"\n                                onFocus={this.closeDropdown}\n                            />\n                        )}\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-dropdown.js","mappings":"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","names":["Q2Dropdown"],"sources":["./src/components/q2-dropdown/styles.scss?tag=q2-dropdown&encapsulation=shadow","./src/components/q2-dropdown/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { handleAriaLabel, handleRenamedProp, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-dropdown',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n    @Prop({ reflect: true }) icon: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) context: string;\n    @Prop({ reflect: true }) contextValue: string;\n    @Prop({ reflect: true }) resolvedType: string;\n    @Prop({ reflect: true }) additionalContext: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop() popoverMinHeight: number = 150;\n    @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\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    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.focusToggle();\n            this.closeDropdown();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                    >\n                        <slot />\n                        {this.open && (\n                            <q2-btn\n                                class=\"sr close-dropdown\"\n                                onFocus={this.closeDropdown}\n                            />\n                        )}\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-editable-field.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './index8.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index10.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 
 const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField extends HTMLElement {
   constructor() {
@@ -66,7 +66,7 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
     this.cancelClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
-      this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;
+      this.inputElement.setValue(this.defaultValue);
     };
     this.value = '';
     this.editing = false;
@@ -141,24 +141,47 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
     this.hostElement.shadowRoot.querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();
   }
   /// Methods ///
+  /**
+   * Emulates clicking the edit button, which will display the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickEdit() {
     var _a;
     if (this.editing)
       return;
     (_a = this.editBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
+   *
+   * @testOnly
+   */
   clickCancel() {
     var _a;
     if (!this.editing)
       return;
     (_a = this.cancelBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
+   *
+   * @testOnly
+   */
   clickSave() {
     var _a;
     if (!this.editing)
       return;
     (_a = this.saveBtnElement) === null || _a === void 0 ? void 0 : _a.click();
   }
+  /**
+   * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.
+   *
+   * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\
+   * `change` event will be emitted.
+   *
+   * @testOnly
+   */
   async setValue(value, options = { clickSave: true }) {
     await this.clickEdit();
     await waitForNextPaint();