q2-tecton-elements 1.67.2 → 1.68.0

package/dist/esm/q2-action-sheet.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc, w as waitForNextPaint } from './index-C4PILj1_.js';
-import { s as sanitizeHTMLString, a as sanitizeActionSheetSlotHtml } from './sanitize-html-string-B35VmRc9.js';
+import { l as loc, w as waitForNextPaint } from './index-C5gj0T_3.js';
+import { s as sanitizeHTMLString, a as sanitizeActionSheetSlotHtml } from './sanitize-html-string-DPHNpMWE.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 
 const q2ActionSheetCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;--comp-border-radius:var(--tct-action-sheet-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-action-sheet-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-action-sheet-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-action-sheet-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-action-sheet-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-action-sheet-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-action-sheet-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-action-sheet-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-action-sheet-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-action-sheet-max-width, 400px);--comp-dialog-max-height:var(--tct-action-sheet-max-height, var(--comp-action-sheet-computed-max-height, 75vh));--comp-dialog-min-height:var(--tct-action-sheet-min-height, var(--comp-action-sheet-computed-min-height, 20vh));--comp-dialog-box-shadow:var(--tct-action-sheet-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden;min-height:var(--comp-dialog-min-height);max-height:var(--comp-dialog-max-height)}dialog::backdrop{opacity:0;background:var(--tct-action-sheet-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open].is-opening,dialog[open].is-open{transform:translateY(-100%)}@media screen and (min-width: 1200px){dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-action-sheet-tween, var(--app-tween-2, 0.4s ease))}@media screen and (min-width: 1200px){dialog{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:0}}.content{overflow-y: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}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.interior{display:grid;grid-template-rows:44px 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}.interior [slot=popover-top]{padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}.interior [slot=popover-bottom]{padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}header{display:grid;grid-template-columns:var(--comp-close-button-size) 1fr var(--comp-close-button-size);grid-template-areas:\". title close\";gap:var(--comp-dialog-gap)}header .title{grid-area:title;text-align:center;line-height:var(--comp-header-height)}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}footer{display:flex;justify-content:end}";
@@ -19,6 +19,23 @@ const Q2ActionSheet = class {
         // #region State Properties
         this.isScrollable = false;
         this.renderStatus = 'is-closing';
+        /**
+         * Focuses the last visible (non-hidden, non-disabled) option in the option list.
+         * Uses the async getOptions() method, but is invoked after preventDefault() has
+         * already been called synchronously by the caller.
+         */
+        this.focusLastVisibleOption = async () => {
+            if (!this.optionListElement)
+                return;
+            const allOptions = await this.optionListElement.getOptions();
+            const lastVisibleOption = allOptions
+                .slice()
+                .reverse()
+                .find(opt => !opt.hidden && !opt.disabled);
+            if (lastVisibleOption) {
+                lastVisibleOption.focus();
+            }
+        };
         this.generateOptgroup = (option) => {
             const optgroupElement = document.createElement('q2-optgroup');
             if (option.label)
@@ -47,6 +64,91 @@ const Q2ActionSheet = class {
             });
             return optionElement;
         };
+        /**
+         * Handles keyboard navigation within the action sheet dialog.
+         * Manages Tab navigation between options and action buttons (close/done).
+         * Allows Tab to exit to browser chrome when reaching boundaries.
+         *
+         * NOTE: This handler is intentionally synchronous. `event.preventDefault()`
+         * must be called before the browser processes the Tab key (i.e., during the
+         * synchronous portion of the keydown event). Introducing an `await` here
+         * allows the browser to shift focus before preventDefault runs, which causes
+         * Tab from the close button to escape the dialog instead of cycling back to
+         * the options.
+         * @param event - The keyboard event.
+         */
+        this.handleDialogKeydown = (event) => {
+            const { data } = this;
+            // Only activate for list appearance with an option list
+            if (!data || data.appearance !== 'list' || !this.optionListElement)
+                return;
+            const { key, shiftKey } = event;
+            if (key !== 'Tab')
+                return;
+            const shadowActiveElement = this.hostElement.shadowRoot.activeElement;
+            const closeButton = this.closeButtonElement;
+            const doneButton = this.doneButtonElement;
+            const isInCloseButton = shadowActiveElement === closeButton;
+            const isInDoneButton = shadowActiveElement === doneButton;
+            // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.
+            // Avoid `await optionListElement.getOptions()` here — that defers the handler past
+            // the browser's default Tab handling, making preventDefault() ineffective.
+            const activeElement = document.activeElement;
+            const isOnOption = !!activeElement &&
+                (activeElement.tagName === 'Q2-OPTION' || activeElement.tagName === 'Q2-DROPDOWN-ITEM') &&
+                this.hostElement.contains(activeElement);
+            if (shiftKey) {
+                // Shift+Tab: if on close button
+                if (isInCloseButton) {
+                    // With a done button (multi-select): allow default to exit to browser.
+                    // Browser Shift+Tab from the URL bar lands on the done button (last
+                    // tabbable in DOM order), which redirects to the last option via
+                    // focusLastVisibleOption — so choices remain reachable.
+                    if (doneButton) {
+                        // Let it bubble - exits to browser chrome
+                        return;
+                    }
+                    // Without a done button (single-select): redirect to the last visible
+                    // option. Otherwise focus would exit to the URL bar and the next
+                    // Shift+Tab back into the page would land on the close button (the
+                    // only tabbable in the modal), trapping the user in URL ↔ close
+                    // with no path back to choices.
+                    event.preventDefault();
+                    this.focusLastVisibleOption();
+                }
+                // Shift+Tab: if on done button, focus last option
+                else if (isInDoneButton) {
+                    event.preventDefault();
+                    this.focusLastVisibleOption();
+                }
+                // Shift+Tab: if on any option, go to close button
+                else if (isOnOption && closeButton) {
+                    event.preventDefault();
+                    closeButton.focus();
+                }
+            }
+            else {
+                // Forward Tab: if on close button, skip to first/selected option
+                if (isInCloseButton) {
+                    event.preventDefault();
+                    this.optionListElement.focus();
+                }
+                // Forward Tab: if on done button, allow default to exit to browser
+                else if (isInDoneButton) {
+                    // Let it bubble - exits to browser chrome
+                    return;
+                }
+                // Forward Tab: if on any option
+                else if (isOnOption) {
+                    if (doneButton) {
+                        // With done button: go to done button
+                        event.preventDefault();
+                        doneButton.focus();
+                    }
+                    // else: No done button - allow default Tab behavior to exit to browser
+                }
+            }
+        };
         this.onCancel = (event) => {
             var _a, _b;
             event.preventDefault();
@@ -91,7 +193,7 @@ const Q2ActionSheet = class {
             const { listProps, slotsHtml = [] } = data;
             return (h(Fragment, null, slotsHtml
                 .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
+                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
                 .filter(entry => entry.slot === 'bottom')
                 .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
         };
@@ -106,9 +208,12 @@ const Q2ActionSheet = class {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.dialogElement.removeEventListener('cancel', this.onCancel);
+        this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);
     }
     componentDidLoad() {
         this.dialogElement.addEventListener('cancel', this.onCancel);
+        // Use capture phase to intercept Tab before option-list handles it
+        this.dialogElement.addEventListener('keydown', this.handleDialogKeydown, true);
         this.ready.emit();
     }
     // #endregion
@@ -210,7 +315,7 @@ const Q2ActionSheet = class {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '7ef6d64d3f29d01edcc5ba09c6917e08eb27ed0d', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'a7da46ce286106d4a14edd50a2ed926b0adb7c84', class: interiorClasses }, showHeader && (h("header", { key: '8de945c05de298bf044cb01b872e2f0db17d9910' }, h("div", { key: 'b4ec8e173b7109456d927e3f3ceeb8e6e936243d', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'ccb610c96edec66abf9f5b353c973e8af9702472', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '1989ba1b179b5053719a78a1d4b9359734f23f36', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '13fc69d21bf48b27f22555630a25c7019ede5a2e' }, data.description), RenderContent && h(RenderContent, { key: 'ec78bb8ee37838b38c32405c4292b6836e5deb5f', data: this.data }))));
+        return (h("dialog", { key: '4a0e3a165326ab9e724600d7e030fa39095dcda0', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '9848ffb2d692a788ad1cf1d606f3cfd8638501ae', class: interiorClasses }, showHeader && (h("header", { key: '2a573e272202699a8bf225ae74263aea107f4e5d' }, h("div", { key: '6ea6f8b415ecba0414d337efc1ce4cfdb0ec0cc9', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: '8f5efe5b235afadcaba63cd9ab0906c01cbb07a0', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'af64434f4d0ec15d183a91501e48cc550fc2532e', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: 'a2044acff20cfc72cbde4d0899d34e51ac390984' }, data.description), RenderContent && h(RenderContent, { key: '558338b884c43bc014cc577581646fe830b7bc77', data: this.data }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-action-sheet.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-action-sheet.entry.js","sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n\n    [slot=\"popover-top\"] {\n        padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n        border-bottom: var-list(--tct-dropdown-slot-border-top);\n    }\n\n    [slot=\"popover-bottom\"] {\n        padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n        border-top: var-list(--tct-dropdown-slot-border-bottom);\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Element,\n    Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n */\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     * @deprecated Use 'tctClose' instead\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    tctClose: EventEmitter<ActionSheetListCloseData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        mirrorEmit(this, ['close', 'tctClose'], data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps, slotsHtml = [] } = data;\n        return (\n            <Fragment>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'top')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'bottom')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,urKAAurK;;MCgCnsK,aAAa,GAAA,MAAA;AAD1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAMI,QAAA,IAAsB,CAAA,sBAAA,GAAgC,EAAE;AACxD,QAAA,IAAS,CAAA,SAAA,GAAW,IAAI;AACxB,QAAA,IAAS,CAAA,SAAA,GAAW,GAAG;AAEvB,QAAA,IAAe,CAAA,eAAA,GAA2D,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;;;AAYnG,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAG7B,QAAA,IAAY,CAAA,YAAA,GAA4C,YAAY;AA6GpE,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,MAA+B,KAAI;YACnD,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC;YAC7D,IAAI,MAAM,CAAC,KAAK;gBAAE,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC;YACrE,IAAI,MAAM,CAAC,QAAQ;AAAE,gBAAA,eAAe,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;AACjE,YAAA,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;gBACvB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACxF,YAAA,OAAO,eAAe;AAC1B,SAAC;AAED,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,MAA6B,KAAI;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC;YACzD,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM;AAC3C,YAAA,IAAI,SAAS;AAAE,gBAAA,aAAa,CAAC,SAAS,GAAG,kBAAkB,CAAC,SAAS,CAAC;AACtE,YAAA,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;gBAChD,IAAI,KAAK,KAAK,SAAS;oBAAE;AACzB,gBAAA,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAC5B,oBAAA,IAAI,KAAK;AAAE,wBAAA,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,EAAE,CAAC;;qBAC3C;AACH,oBAAA,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC;;AAE9C,aAAC,CAAC;AACF,YAAA,OAAO,aAAa;AACxB,SAAC;AAUD,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,KAAY,KAAI;;YACxB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,MAAM,EAAE,sBAAsB,EAAE,GAAG,IAAI;YACvC,IAAI,CAAC,IAAI,CAAC;AACN,gBAAA,KAAK,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,sBAAsB,aAAtB,sBAAsB,KAAA,MAAA,GAAA,MAAA,GAAtB,sBAAsB,CAAG,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,mCAAI,EAAE;AAC/C,gBAAA,MAAM,EAAE,sBAAsB;AAC9B,gBAAA,IAAI,EAAE,QAAQ;AACjB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AAC5B,YAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;AAC/C,YAAA,IAAI,EAAE,WAAW,YAAY,WAAW,CAAC;gBAAE;YAE3C,MAAM,WAAW,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,4BAA4B,CAAC;AACvE,YAAA,IAAI,WAAW;gBAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxB,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAsF,KAAI;AACtG,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM;AACvC,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;YACd,IAAI,CAAC,IAAI,CAAC;gBACN,GAAG,IAAI,CAAC,eAAe;AACvB,gBAAA,IAAI,EAAE,SAAS;AAClB,aAAA,CAAC;AACN,SAAC;AAED,QAAA,IAAA,CAAA,wBAAwB,GAAG,CACvB,KAAsF,KACtF;AACA,YAAA,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI;gBAAE;YAEvB,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,OAAO,EAAE;AACjC,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;iBACjB;gBACH,IAAI,CAAC,UAAU,EAAE;;AAEzB,SAAC;;;QAsCD,IAAA,CAAA,UAAU,GAAG,CAAC,EAAE,IAAI,EAAiC,KAAI;YACrD,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI;AAC1C,YAAA,QACI,EAAC,QAAQ,EAAA,IAAA,EACJ;iBACI,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK;AACpC,iBAAA,GAAG,CAAC,KAAK,KACN,CAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,2BAA2B,CAAC,KAAK,CAAC,IAAI,CAAC,EAAA,CAAQ,CAClE,CAAC,EACN,CAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAA,EAErC,CAAA,CAAA,gBAAA,EAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,cAAc,EAAE,IAAI,CAAC,wBAAwB,EAC7C,eAAe,EAAE,SAAS,CAAC,eAAe,EAAA,EAE1C,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACK,CACf,EACN,CACK,CAAA,QAAA,EAAA,IAAA,EAAA,SAAS,CAAC,QAAQ,KACf,yBACY,SAAS,EACjB,MAAM,EAAC,kBAAkB,EACzB,OAAO,EAAE,IAAI,CAAC,UAAU,EAEvB,EAAA,GAAG,CAAC,iCAAiC,CAAC,CAClC,CACZ,CACI,EACR;iBACI,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ;iBACvC,GAAG,CAAC,KAAK,KACN,CAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,2BAA2B,CAAC,KAAK,CAAC,IAAI,CAAC,EAAA,CAAQ,CAClE,CAAC,CACC;AAEnB,SAAC;QAED,IAAA,CAAA,aAAa,GAAG,CAAC,EAAE,IAAI,EAAoC,KAAI;YAC3D,QACI,CAAY,CAAA,YAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EACtB,IAAI,CAAC,KAAK,IAAI,cAAK,IAAI,CAAC,KAAK,CAAM,EACnC,IAAI,CAAC,WAAW,IAAI,CAAI,CAAA,GAAA,EAAA,IAAA,EAAA,IAAI,CAAC,WAAW,CAAK,CACrC;AAErB,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACd,YAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAA,EAErC,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACN;AAEd,SAAC;AAsDJ;;;IAvSG,oBAAoB,GAAA;QAChB,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;IAGnE,gBAAgB,GAAA;QACZ,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC5D,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;;;AAOrB,IAAA,MAAM,IAAI,CAAC,IAAiC,GAAA,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;QAClF,UAAU,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC;AAC7C,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY;QAChC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAC/B,eAAe,EACf,MAAK;AACD,YAAA,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY;gBAAE;AACxC,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,YAAA,IAAI,CAAC,sBAAsB,GAAG,EAAE;AAChC,YAAA,IAAI,CAAC,eAAe,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;YAChD,IAAI,CAAC,YAAY,EAAE;AACvB,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAIL,IAAA,MAAM,IAAI,GAAA;QACN,IAAI,CAAC,WAAW,EAAE;QAClB,MAAM,gBAAgB,EAAE;QACxB,IAAI,CAAC,wBAAwB,EAAE;QAC/B,IAAI,CAAC,kBAAkB,EAAE;AAEzB,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI;YAAE;AAE7B,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;AAC9B,QAAA,IAAI,CAAC,YAAY,GAAG,YAAY;QAChC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAC/B,eAAe,EACf,MAAK;AACD,YAAA,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY;gBAAE;AACxC,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;YAC7B,IAAI,CAAC,YAAY,EAAE;AACvB,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;;;IAML,YAAY,GAAA;AACR,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;AAC5B,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;AACtB,YAAA,IAAI,KAAK,YAAY,aAAa,EAAE;AAChC,gBAAA,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,KAAK,CAAC;;iBAChD;AACH,gBAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE;;;;IA6B1C,YAAY,GAAA;AACR,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI;;;IA8CzC,WAAW,GAAA;AACP,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI;AACjC,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAG;gBAC1B,IAAI,CAAC,WAAW,CAAC,WAAW,CACxB,SAAS,IAAI,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CACpF;AACL,aAAC,CAAC;;;IAIV,kBAAkB,GAAA;AACd,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;YAC5B,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe;;;IAIpE,wBAAwB,GAAA;AACpB,QAAA,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW;QACvC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAChC,yCAAyC,EACzC,CAAG,EAAA,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAI,EAAA,CAAA,CACnD;QACD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAChC,yCAAyC,EACzC,CAAG,EAAA,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAI,EAAA,CAAA,CACnD;;IAsEL,MAAM,GAAA;;AACF,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI;AACrB,QAAA,MAAM,UAAU,GAAG,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,SAAS;AAC/D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE;QAE5C,IAAI,aAAa,GAAG,IAAI;QACxB,QAAQ,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU;AACpB,YAAA,KAAK,SAAS;AACV,gBAAA,aAAa,GAAG,IAAI,CAAC,aAAa;gBAClC;AAEJ,YAAA,KAAK,MAAM;AACP,gBAAA,aAAa,GAAG,IAAI,CAAC,UAAU;gBAC/B;AAEJ,YAAA;AACI,gBAAA,aAAa,GAAG,IAAI,CAAC,UAAU;gBAC/B;;QAER,MAAM,UAAU,GAAG,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,UAAU,KAAI,MAAM;AAC7C,QAAA,MAAM,eAAe,GAAG,CAAe,YAAA,EAAA,UAAU,EAAE;QACnD,QACI,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAA,EACtB,UAAU,KACP,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,CAAO,EACnD,CAAC,IAAI,CAAC,SAAS,KACZ,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,SAAA,EACT,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAC,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,EAGxC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,GAAG,CACnB,CACZ,CACI,CACZ,EACA,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,KAAI,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CAAK,EACnD,aAAa,IAAI,CAAA,CAAC,aAAa,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAClD,CACD;;;;;;;;"}
+{"version":3,"file":"q2-action-sheet.entry.js","sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n\n    [slot=\"popover-top\"] {\n        padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n        border-bottom: var-list(--tct-dropdown-slot-border-top);\n    }\n\n    [slot=\"popover-bottom\"] {\n        padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n        border-top: var-list(--tct-dropdown-slot-border-bottom);\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Element,\n    Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n */\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    closeButtonElement: HTMLQ2BtnElement;\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    doneButtonElement: HTMLQ2BtnElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     * @deprecated Use 'tctClose' instead\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    tctClose: EventEmitter<ActionSheetListCloseData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        // Use capture phase to intercept Tab before option-list handles it\n        this.dialogElement.addEventListener('keydown', this.handleDialogKeydown, true);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        mirrorEmit(this, ['close', 'tctClose'], data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    /**\n     * Focuses the last visible (non-hidden, non-disabled) option in the option list.\n     * Uses the async getOptions() method, but is invoked after preventDefault() has\n     * already been called synchronously by the caller.\n     */\n    focusLastVisibleOption = async () => {\n        if (!this.optionListElement) return;\n        const allOptions = await this.optionListElement.getOptions();\n        const lastVisibleOption = allOptions\n            .slice()\n            .reverse()\n            .find(opt => !opt.hidden && !opt.disabled);\n        if (lastVisibleOption) {\n            lastVisibleOption.focus();\n        }\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    /**\n     * Handles keyboard navigation within the action sheet dialog.\n     * Manages Tab navigation between options and action buttons (close/done).\n     * Allows Tab to exit to browser chrome when reaching boundaries.\n     *\n     * NOTE: This handler is intentionally synchronous. `event.preventDefault()`\n     * must be called before the browser processes the Tab key (i.e., during the\n     * synchronous portion of the keydown event). Introducing an `await` here\n     * allows the browser to shift focus before preventDefault runs, which causes\n     * Tab from the close button to escape the dialog instead of cycling back to\n     * the options.\n     * @param event - The keyboard event.\n     */\n    handleDialogKeydown = (event: KeyboardEvent) => {\n        const { data } = this;\n        // Only activate for list appearance with an option list\n        if (!data || data.appearance !== 'list' || !this.optionListElement) return;\n\n        const { key, shiftKey } = event;\n        if (key !== 'Tab') return;\n\n        const shadowActiveElement = this.hostElement.shadowRoot.activeElement;\n        const closeButton = this.closeButtonElement;\n        const doneButton = this.doneButtonElement;\n\n        const isInCloseButton = shadowActiveElement === closeButton;\n        const isInDoneButton = shadowActiveElement === doneButton;\n\n        // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.\n        // Avoid `await optionListElement.getOptions()` here — that defers the handler past\n        // the browser's default Tab handling, making preventDefault() ineffective.\n        const activeElement = document.activeElement;\n        const isOnOption =\n            !!activeElement &&\n            (activeElement.tagName === 'Q2-OPTION' || activeElement.tagName === 'Q2-DROPDOWN-ITEM') &&\n            this.hostElement.contains(activeElement);\n\n        if (shiftKey) {\n            // Shift+Tab: if on close button\n            if (isInCloseButton) {\n                // With a done button (multi-select): allow default to exit to browser.\n                // Browser Shift+Tab from the URL bar lands on the done button (last\n                // tabbable in DOM order), which redirects to the last option via\n                // focusLastVisibleOption — so choices remain reachable.\n                if (doneButton) {\n                    // Let it bubble - exits to browser chrome\n                    return;\n                }\n                // Without a done button (single-select): redirect to the last visible\n                // option. Otherwise focus would exit to the URL bar and the next\n                // Shift+Tab back into the page would land on the close button (the\n                // only tabbable in the modal), trapping the user in URL ↔ close\n                // with no path back to choices.\n                event.preventDefault();\n                this.focusLastVisibleOption();\n            }\n            // Shift+Tab: if on done button, focus last option\n            else if (isInDoneButton) {\n                event.preventDefault();\n                this.focusLastVisibleOption();\n            }\n            // Shift+Tab: if on any option, go to close button\n            else if (isOnOption && closeButton) {\n                event.preventDefault();\n                closeButton.focus();\n            }\n        } else {\n            // Forward Tab: if on close button, skip to first/selected option\n            if (isInCloseButton) {\n                event.preventDefault();\n                this.optionListElement.focus();\n            }\n            // Forward Tab: if on done button, allow default to exit to browser\n            else if (isInDoneButton) {\n                // Let it bubble - exits to browser chrome\n                return;\n            }\n            // Forward Tab: if on any option\n            else if (isOnOption) {\n                if (doneButton) {\n                    // With done button: go to done button\n                    event.preventDefault();\n                    doneButton.focus();\n                }\n                // else: No done button - allow default Tab behavior to exit to browser\n            }\n        }\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps, slotsHtml = [] } = data;\n        return (\n            <Fragment>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'top')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            ref={el => (this.doneButtonElement = el)}\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'bottom')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    ref={el => (this.closeButtonElement = el)}\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-avatar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-avatar.entry.js","sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: 100%;\n    width: 100%;\n    border-radius: var-list(\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-color, --tct-avatar-color, --t-base, #ffffff);\n        width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n        height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    hasDecorator: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\n                {showImg && (\n                    <img\n                        class={`${isLoaded ? 'avatar-img' : 'avatar-img-default'}`}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials initials-size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-avatar.entry.js","sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n.avatar-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n    height: 100%;\n    width: 100%;\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: 100%;\n    width: 100%;\n    border-radius: var-list(\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-color, --tct-avatar-color, --t-base, #ffffff);\n        width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n        height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    hasDecorator: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\n                {showImg && (\n                    <img\n                        class={`${isLoaded ? 'avatar-img' : 'avatar-img-default'}`}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials initials-size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-badge.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc } from './index-C4PILj1_.js';
+import { l as loc } from './index-C5gj0T_3.js';
 
 const q2BadgeCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;line-height:0;--comp-badge-font-size:var(--app-font-size-small, 12px);--comp-badge-large-font-size:var(--app-font-size-medium, 14px);--comp-badge-background:var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff))}:host:host([status=info]){--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff))}:host:host([status=alert]){--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff))}:host:host([status=warning]){--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff))}:host:host([status=success]){--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff))}:host:host([theme=primary]){--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff))}:host:host([theme=secondary]){--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #141414))}:host:host([theme=tertiary]){--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414))}.badge-container{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 5px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));border:var(--tct-badge-border);backdrop-filter:var(--tct-badge-backdrop-filter)}.badge-container .badge-text{font-size:var(--comp-badge-font-size);line-height:var(--tct-badge-line-height, 14px)}.badge-container .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-font-size) !important}.badge-container.size-large{height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-container.size-large .badge-text{font-size:var(--comp-badge-large-font-size);line-height:var(--tct-badge-large-line-height, 20px)}.badge-container.size-large .badge-text ::slotted(p){margin:0 !important;font-size:var(--comp-badge-large-font-size) !important}.empty-variant{min-width:unset;width:16px;height:16px;padding:0}.empty-variant.size-large{min-width:unset;width:22px;height:22px;padding:0}";
 

package/dist/esm/q2-badge.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-badge.entry.js","sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAO,WAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzB,CAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;"}
+{"version":3,"file":"q2-badge.entry.js","sources":["src/components/q2-badge/q2-badge.scss?tag=q2-badge&encapsulation=shadow","src/components/q2-badge/q2-badge.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    line-height: 0;\n\n    --comp-badge-font-size: var(--app-font-size-small, 12px);\n    --comp-badge-large-font-size: var(--app-font-size-medium, 14px);\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-a11y-gray-color-AAA, #6c6c6c)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n\n    &:host([status='info']) {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n    }\n\n    &:host([status='alert']) {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #d20a0a)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n    }\n\n    &:host([status='warning']) {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #ffffff)};\n    }\n\n    &:host([status='success']) {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #0e8a00)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n    }\n\n    &:host([theme='primary']) {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #6a4a9e)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n    }\n\n    &:host([theme='secondary']) {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #141414)};\n    }\n\n    &:host([theme='tertiary']) {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.badge-container {\n    white-space: nowrap;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--tct-badge-height, 16px);\n    min-width: var(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var(--tct-badge-padding, unquote('0 5px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n    border: var(--tct-badge-border);\n    backdrop-filter: var(--tct-badge-backdrop-filter);\n    .badge-text {\n        font-size: var(--comp-badge-font-size);\n        line-height: var-list(--tct-badge-line-height, 14px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-font-size) !important;\n        }\n    }\n}\n\n.badge-container.size-large {\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n\n    .badge-text {\n        font-size: var(--comp-badge-large-font-size);\n        line-height: var-list(--tct-badge-large-line-height, 20px);\n\n        ::slotted(p) {\n            margin: 0 !important;\n            font-size: var(--comp-badge-large-font-size) !important;\n        }\n    }\n}\n\n.empty-variant {\n    min-width: unset;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n\n    &.size-large {\n        min-width: unset;\n        width: 22px;\n        height: 22px;\n        padding: 0;\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n/**\n * @name Badge\n * @category Display\n * @summary Use for displaying counts, statuses, or indicators on other elements.\n */\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,itHAAitH;;MCSvtH,OAAO,GAAA,MAAA;;;;;;AAwChB;;;AAGG;AAEH,IAAA,MAAM,cAAc,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;;aACvC;YACH,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,EAAE;;;;;AAO7D,IAAA,IAAI,YAAY,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;AACtE,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AACxD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG/B,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,IAAI;AAC7C,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK;QACtB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YAClB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;QAGtC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,iBAAiB,CAAC;;QAGhD,MAAM,SAAS,GAAG,SAAS,GAAG,iBAAiB,GAAG,CAAC;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC;AAC/C,QAAA,IAAI,QAAQ,GAAG,WAAW,EAAE;AACxB,YAAA,OAAO,WAAW,CAAC,cAAc,EAAE,GAAG,GAAG;;aACtC;AACH,YAAA,OAAO,QAAQ,CAAC,cAAc,EAAE;;;AAIxC,IAAA,IAAI,iBAAiB,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;;AAG7C,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE;;;;IAM9C,gBAAgB,GAAA;AACZ,QAAA,OAAO,WAAK,KAAK,EAAE,IAAI,CAAC,YAAY,GAAQ;;IAGhD,mBAAmB,GAAA;QACf,QACI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EACzB,CAAO,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAAC,SAAS,CAAS,CAC/E;;IAId,MAAM,GAAA;QACF,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;"}