q2-tecton-elements 1.51.1 → 1.52.1

package/dist/cjs/q2-checkbox-group.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-14c3693c.js');
-const index$1 = require('./index-9aa4a776.js');
+const index = require('./index-e7e68b1e.js');
+const index$1 = require('./index-07285783.js');
 
-const q2CheckboxGroupCss = "*{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, #d20a0a));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px));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 q2CheckboxGroupCss = "*{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-checkbox-group-margin-top, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-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 Q2CheckboxGroupStyle0 = q2CheckboxGroupCss;
 
 const Q2CheckboxGroup = class {
@@ -98,7 +98,7 @@ const Q2CheckboxGroup = class {
         return this.value || {};
     }
     inputDom() {
-        return index.h("slot", null);
+        return (index.h("div", { class: "slot-container" }, index.h("slot", null)));
     }
     updateDisabled() {
         const groupDisabled = this.disabled;
@@ -125,7 +125,8 @@ const Q2CheckboxGroup = class {
     // #region Render Methods
     render() {
         const showLabel = this.label || this.optional || this.readonly;
-        return (index.h("div", { key: 'ee1eeb52e7e665ae80d9313014ba80a2a4abb5cd' }, showLabel && !this.hideLabel && index.h("div", { key: '153df1bc19ac7236cbcb8a7f9f5536e601d07b0c', class: "group-legend" }, index$1.renderLabel(this)), index.h("fieldset", { key: 'a118e02dd1b3183cd00c77d38686d38da58a8cc7', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}` }, this.label || this.optional ? index.h("legend", { class: "sr-only" }, index$1.renderLabel(this)) : '', this.hasError ? (index.h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, index.h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
+        return (index.h(index.Fragment, { key: 'e2e313379cf001e419e0f4af7852e09f16931d28' }, showLabelRow && (index.h("div", { key: '65dce898067eaacb01fcdffa8aefa7faed0aa3d7', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '9c627891b5ca932a7ae6d7c519b387f339f3d3f0', class: "group-legend" }, index$1.renderLabel(this)), this.hasError && (index.h("q2-icon", { key: '940512e2c8b756743242356c8b189981a4f0b576', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '797c6e7b149685201dd3f8717a86674941801199', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && index.h("legend", { key: '817cf2050f2e7435782046802c7af359354f4d0f', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-checkbox-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-checkbox-group.entry.cjs.js","mappings":"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","names":["createGuid","h","renderLabel"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.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, #d20a0a));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 4px));\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, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return <slot />;\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    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{renderLabel(this)}</legend> : ''}\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    // #endregion\n}\n"],"version":3}
+{"file":"q2-checkbox-group.entry.cjs.js","mappings":"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","names":["createGuid","h","Fragment","renderLabel"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-checkbox-group-margin-top, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: var(--tct-checkbox-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\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.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-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    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\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    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-checkbox.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-14c3693c.js');
-const index$1 = require('./index-9aa4a776.js');
+const index = require('./index-e7e68b1e.js');
+const index$1 = require('./index-07285783.js');
 
 const q2CheckboxCss = "*{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:\"svg\";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]:not([checked=false])) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]:not([checked=false])) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]:not([checked=false])) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}.toggle-hover-circle{stroke-width:0}:host(:focus-within) .toggle-hover-circle,:host(:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-hover-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-hover-circle,:host([has-error]:focus-within) .toggle-hover-circle,:host([has-error]:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]:not([checked=false])) .off,:host(:is(:not([checked]),[checked=false])) .on{opacity:0}";
 const Q2CheckboxStyle0 = q2CheckboxCss;

package/dist/cjs/q2-currency.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-14c3693c.js');
+const index = require('./index-e7e68b1e.js');
 
 const q2CurrencyCss = "*{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}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 16px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 28px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
 const Q2CurrencyStyle0 = q2CurrencyCss;
@@ -23,6 +23,17 @@ const Q2Currency = class {
         this.formatCurrency();
     }
     // #endregion
+    // #region Public Methods API
+    /**
+     * A method to select a tab pane corresponding with the value.
+     *
+     * @testOnly
+     */
+    async displayedMessageValue() {
+        const currency = this.hostElement.shadowRoot.querySelector('[test-id="q2CurrencyInner"]');
+        return currency === null || currency === void 0 ? void 0 : currency.ariaLabel;
+    }
+    // #endregion
     // #region Watchers
     propsUpdated() {
         this.formatCurrency();
@@ -114,8 +125,9 @@ const Q2Currency = class {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (index.h("div", { key: 'd921c89c1a7cc2b8cc768f828a68794b81ea896e', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && index.h("span", { key: '042f4f077827825dc9a59fd88770bd92758e4a1d' }, plusMinusSign), currencyIsFront && index.h("span", { key: '1a383dd810cdf6e4e8c7f2b0c3cb823ea27a30d5', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), index.h("span", { key: '2c2892e40610254844efcfff6dae56699a94beff' }, amountCore), index.h("span", { key: '1c4cea0da09310e0d252a82e66dbd6473ef2b9f5', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && index.h("span", { key: '0f54a283e8979f4fe276a1c1a4202eff4bdb3673', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (index.h("div", { key: 'a2427d807ba868ebff71438f4422e075205da869', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && index.h("span", { key: '594c8cd84fd3226b2d8170ee9a05532f57bb0d6f' }, plusMinusSign), currencyIsFront && index.h("span", { key: 'f726da3911833f35f0fe5c5b68d9d341acf5af27', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), index.h("span", { key: '08644b7c1397237676dc00a81552ba7badefa38e' }, amountCore), index.h("span", { key: 'cab6f51a4af6067122f3c2994d79f0d9fb828c14', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && index.h("span", { key: '1f1265a8bf437499d0d613f47b7c2f357e22165c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
+    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "amount": ["propsUpdated"],
         "currency": ["propsUpdated"],

package/dist/cjs/q2-currency.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-currency.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.currency {\n    color: var-list(--tct-currency-color, inherit);\n    font-size: var-list(--tct-currency-font-size, inherit);\n    font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n    color: var-list(--tct-currency-small-color, inherit);\n    font-size: var-list(--tct-currency-small-font-size, 24px);\n    font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-small-superscript-color, inherit);\n        font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n        font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n    }\n}\n\n.currency-medium {\n    color: var-list(--tct-currency-medium-color, inherit);\n    font-size: var-list(--tct-currency-medium-font-size, 42px);\n    font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-medium-superscript-color, inherit);\n        font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n        font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n    }\n}\n\n.currency-large {\n    color: var-list(--tct-currency-large-color, inherit);\n    font-size: var-list(--tct-currency-large-font-size, 70px);\n    font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-large-superscript-color, inherit);\n        font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n        font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n    }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const classes = ['currency'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n        } = this;\n\n        return (\n            <div\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-currency.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.currency {\n    color: var-list(--tct-currency-color, inherit);\n    font-size: var-list(--tct-currency-font-size, inherit);\n    font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n    color: var-list(--tct-currency-small-color, inherit);\n    font-size: var-list(--tct-currency-small-font-size, 24px);\n    font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-small-superscript-color, inherit);\n        font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n        font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n    }\n}\n\n.currency-medium {\n    color: var-list(--tct-currency-medium-color, inherit);\n    font-size: var-list(--tct-currency-medium-font-size, 42px);\n    font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-medium-superscript-color, inherit);\n        font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n        font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n    }\n}\n\n.currency-large {\n    color: var-list(--tct-currency-large-color, inherit);\n    font-size: var-list(--tct-currency-large-font-size, 70px);\n    font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-large-superscript-color, inherit);\n        font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n        font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n    }\n}\n","import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.ariaLabel;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const classes = ['currency'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-data-table.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-14c3693c.js');
-const index$1 = require('./index-9aa4a776.js');
+const index = require('./index-e7e68b1e.js');
+const index$1 = require('./index-07285783.js');
 
 const q2DataTableCss = "*{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, 4px)));--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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}: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)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));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.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}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(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[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.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}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 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 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 Q2DataTableStyle0 = q2DataTableCss;
@@ -373,7 +373,7 @@ const Q2DataTable = class {
         const { hasRowData, numberOfColumns, emptyIcon, emptyMessage, loading } = this;
         if (hasRowData || loading)
             return null;
-        return (index.h("slot", { name: "empty-table" }, index.h("tbody", null, index.h("tr", { class: "empty-state" }, index.h("td", { colSpan: numberOfColumns }, index.h("div", { class: "empty-state-content" }, index.h("q2-icon", { type: emptyIcon }), index.h("p", null, index$1.loc(emptyMessage))))))));
+        return (index.h("tbody", null, index.h("tr", { class: "empty-state" }, index.h("td", { colSpan: numberOfColumns }, index.h("slot", { name: "empty-table" }, index.h("div", { class: "empty-state-content" }, index.h("q2-icon", { type: emptyIcon }), index.h("p", null, index$1.loc(emptyMessage))))))));
     }
     renderTableColGroup() {
         const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;