q2-tecton-elements 1.54.3 → 1.54.5

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

@@ -1,6 +1,22 @@
 import { r as t, c as o, h as e, g as r } from "./index-7a5365e2.js";
 
-import { l as i, a as d, o as n } from "./index-504f1a9e.js";
+import { l as i, a as n, o as d } from "./index-504f1a9e.js";
+
+/**
+ * Emits specified events from a given component context with the provided detail.
+ *
+ * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.
+ * @param context - The component context that contains the event emitters.
+ * @param events - An array of event names to be emitted.
+ * @param detail - The detail payload to be passed to each emitted event.
+ */ const mirrorEmit = (t, o, e) => {
+  o.forEach((o => {
+    var r;
+    const i = t[o];
+    if (!i) return;
+    (r = i.emit) === null || r === void 0 ? void 0 : r.call(i, e);
+  }));
+};
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
 
@@ -10,6 +26,7 @@ const p = class {
   constructor(e) {
     t(this, e);
     this.click = o(this, "click", 7);
+    this.tctClick = o(this, "tctClick", 7);
     this.handleQ2LocValue = () => {
       const t = this.hostElement.querySelector("q2-loc");
       if (!t) return "";
@@ -17,7 +34,7 @@ const p = class {
     };
     this.onItemClick = t => {
       t.stopImmediatePropagation();
-      this.click.emit({
+      mirrorEmit(this, [ "click", "tctClick" ], {
         type: "select",
         value: this.value || ""
       });
@@ -30,7 +47,7 @@ const p = class {
     };
     this.onRemoveBtnClick = t => {
       t.stopImmediatePropagation();
-      this.click.emit({
+      mirrorEmit(this, [ "click", "tctClick" ], {
         type: "remove",
         value: this.value || ""
       });
@@ -53,12 +70,12 @@ const p = class {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    d(this);
+    n(this);
     this.q2LocValue = this.handleQ2LocValue();
   }
   componentDidLoad() {
     if (this.separator) return;
-    n(this.hostElement);
+    d(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -70,7 +87,7 @@ const p = class {
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    d(this);
+    n(this);
   }
   // #endregion
   // #region Local Methods

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

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","event","stopImmediatePropagation","click","emit","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","onHostElementFocus","target","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","focus","removeBtn","renderItemDOM","h","class","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","render"],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item-button {\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    flex: 1;\n    text-align: left;\n    padding: var-list(var-prefixer(dropdown-item-padding), --comp-default-dropdown-item-padding);\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n    }\n\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event({ bubbles: true })\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus();\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.click.emit({\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.click.emit({\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-item-wrapper\"\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAoB;;AAC1B,MAAAC,IAAeD;;MCeFE,IAAc;;;;IA4HvBC,KAAAC,mBAAmB;MACf,MAAMC,IAAaF,KAAKG,YAAYC,cAAc;MAClD,KAAKF,GAAY,OAAO;MAExB,OAAOA,EAAWG,QACZC,EAAIJ,EAAWG,OAAOH,EAAWK,iBACjCD,EAAIJ,EAAWM,WAAWN,EAAWK;AAAc;IAG7DP,KAAAS,cAAeC;MACXA,EAAMC;MACNX,KAAKY,MAAMC,KAAK;QACZC,MAAM;QACNT,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAe,cAAeL;MACXA,EAAMM;AAAiB;IAG3BhB,KAAAiB,gBAAiBP;MACb,IAAIA,EAAMQ,QAAQ,cAAclB,KAAKmB;AAAgB;IAGzDnB,KAAAoB,mBAAoBV;MAChBA,EAAMC;MAENX,KAAKY,MAAMC,KAAK;QACZC,MAAM;QACNT,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAqB,mBAAoBX;MAChBA,EAAMM;AAAiB;IAG3BhB,KAAAsB,qBAAsBZ;MAClB,IAAIA,EAAMQ,QAAQ,aAAalB,KAAKuB;AAAW;;;;;;;;;;;;EAtFnD,iBAAAC;IACIC,EAAgBzB;IAChBA,KAAK0B,aAAa1B,KAAKC;;EAG3B,gBAAA0B;IACI,IAAI3B,KAAK4B,WAAW;IACpBC,EAAc7B,KAAKG;;;;EAOvB,kBAAA2B,CAAmBpB;IACf,IAAIA,EAAMqB,WAAW/B,KAAKG,aAAa;MACnCH,KAAKuB;;;;;EAQb,iBAAAS;IACIP,EAAgBzB;;;;EAMpB,cAAIiC;IACA,OAAOjC,KAAKkC,SAASlC,KAAKG,YAAYgC,YAAYC,UAAUpC,KAAK0B;;EAGrE,eAAIW;IACA,OAAO/B,EAAI,sCAAsC,EAACN,KAAKiC,cAAc;;EAGzE,SAAAV;IACIvB,KAAKsC,gBAAgBC;;EAGzB,cAAApB;IACInB,KAAKwC,aAAaxC,KAAKwC,UAAUD;;;;EAgDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EAAA;MACIG,KAAKC,KAAO9C,KAAKsC,kBAAkBQ;MAAG,cAC1BxC,EAAIN,KAAKiC;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAUhD,KAAKgD;MACfJ,MAAK;MACLK,SAASjD,KAAKS;MACdyC,WAAWlD,KAAKiB;MAChBkC,SAASnD,KAAKe;MAAW,WACjB;OAER2B,EAAA,cAAOpC,EAAIN,KAAKiC,eAEnBjC,KAAKoD,aACFV,EAAA;MACIG,KAAKC,KAAO9C,KAAKwC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD/C,KAAKqC;MACjBW,UAAUhD,KAAKgD;MACfC,SAASjD,KAAKoB;MACd8B,WAAWlD,KAAKsB;MAChB6B,SAASnD,KAAKqB;MAAgB,WACtB;OAERqB,EAAA;MAAS5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MACNC,MAAK;MAAW,WACR;;;EAKpB,MAAAU;IACI,IAAItD,KAAK4B,WAAW;MAChB,OAAO5B,KAAKqD;;IAGhB,OAAOrD,KAAKyC"}
+{"version":3,"names":["mirrorEmit","context","events","detail","forEach","event","eventEntry","_a","emit","call","q2DropdownItemCss","Q2DropdownItemStyle0","Q2DropdownItem","this","handleQ2LocValue","locElement","hostElement","querySelector","value","loc","substitutions","innerText","onItemClick","stopImmediatePropagation","type","onItemFocus","stopPropagation","onItemKeydown","key","focusRemoveBtn","onRemoveBtnClick","onRemoveBtnFocus","onRemoveBtnKeydown","focusItem","componentWillLoad","handleAriaLabel","q2LocValue","componentDidLoad","separator","overrideFocus","onHostElementFocus","target","ariaLabelObserver","innerLabel","label","textContent","trim","removeLabel","dropdownItemBtn","focus","removeBtn","renderItemDOM","h","class","role","ref","el","tabindex","disabled","onClick","onKeyDown","onFocus","removable","renderSeparatorDOM","render"],"sources":["src/utils/mirror-emit.ts","src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["import { ComponentInterface, EventEmitter } from '@stencil/core';\n\n/**\n * Emits specified events from a given component context with the provided detail.\n *\n * @template T - The type of the event detail. Defaults to the type of `CustomEvent['detail']`.\n * @param context - The component context that contains the event emitters.\n * @param events - An array of event names to be emitted.\n * @param detail - The detail payload to be passed to each emitted event.\n */\nconst mirrorEmit = <T = CustomEvent['detail']>(context: ComponentInterface, events: Array<string>, detail: T) => {\n    events.forEach(event => {\n        const eventEntry = context[event] as EventEmitter<T>;\n        if (!eventEntry) return;\n        eventEntry.emit?.(detail);\n    });\n};\n\nexport default mirrorEmit;\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item-button {\n    --comp-dropdown-item-tween: #{var-list(--tct-tween-1, --app-tween-1, cubic-bezier(0.4, 0, 0.2, 1))};\n    margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n    padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n    min-height: var(--tct-dropdown-item-min-height, 44px);\n    min-width: 44px;\n    border: none;\n    background: transparent;\n    outline: 0;\n    transition: var-list(--tct-dropdown-item-tween, --comp-dropdown-item-tween);\n    transition-property: background, color, box-shadow, fill, border-color, border-width;\n    &:disabled {\n        opacity: var-list(--tct-dropdown-item-disabled-opacity, --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.dropdown-item {\n    --comp-default-dropdown-item-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    flex: 1;\n    text-align: left;\n    padding: var-list(var-prefixer(dropdown-item-padding), --comp-default-dropdown-item-padding);\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n:host(:not([disabled])) {\n    .remove-dropdown-item:hover,\n    .remove-dropdown-item:focus,\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        background: var-list(\n            --tct-dropdown-item-hover-background,\n            var-prefixer(dropdown-item-selected-bg),\n            var-prefixer(gray-14),\n            --tct-gray-l3,\n            --app-gray-l3,\n            --t-base,\n            #f2f2f2\n        );\n    }\n\n    .dropdown-item:hover,\n    .dropdown-item:focus {\n        color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n    }\n\n    .dropdown-item:focus,\n    .remove-dropdown-item:focus {\n        box-shadow: var-list(\n            --tct-dropdown-item-focus-box-shadow,\n            --const-inset-double-focus-ring,\n            unquote(\n                'inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)'\n            )\n        );\n    }\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    State,\n    Element,\n    Event,\n    Listen,\n    Watch,\n    h,\n    EventEmitter,\n} from '@stencil/core';\nimport { loc, handleAriaLabel, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownItemBtn: HTMLButtonElement;\n    removeBtn: HTMLButtonElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    q2LocValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     *\n     * @info\n     * This will be used as the `aria-label` for this item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true })\n    removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Is emitted when the item is clicked.\n     * @deprecated\n     */\n    @Event()\n    click: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    /**\n     * Is emitted when the item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.q2LocValue = this.handleQ2LocValue();\n    }\n\n    componentDidLoad() {\n        if (this.separator) return;\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent.trim() || this.q2LocValue;\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.innerLabel || '']);\n    }\n\n    focusItem() {\n        this.dropdownItemBtn.focus();\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.focus();\n    }\n\n    handleQ2LocValue = (): string => {\n        const locElement = this.hostElement.querySelector('q2-loc');\n        if (!locElement) return '';\n\n        return locElement.value\n            ? loc(locElement.value, locElement.substitutions)\n            : loc(locElement.innerText, locElement.substitutions);\n    };\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'select',\n            value: this.value || '',\n        });\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowRight') this.focusRemoveBtn();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        mirrorEmit(this, ['click', 'tctClick'], {\n            type: 'remove',\n            value: this.value || '',\n        });\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'ArrowLeft') this.focusItem();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderItemDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-item-wrapper\"\n                role=\"presentation\"\n            >\n                <button\n                    ref={el => (this.dropdownItemBtn = el)}\n                    aria-label={loc(this.innerLabel)}\n                    class=\"dropdown-item-button dropdown-item\"\n                    tabindex=\"-1\"\n                    disabled={this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <slot>{loc(this.innerLabel)}</slot>\n                </button>\n                {this.removable && (\n                    <button\n                        ref={el => (this.removeBtn = el)}\n                        class=\"dropdown-item-button remove-dropdown-item\"\n                        tabindex=\"-1\"\n                        aria-label={this.removeLabel}\n                        disabled={this.disabled}\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </button>\n                )}\n            </div>\n        );\n    }\n\n    renderSeparatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    render() {\n        if (this.separator) {\n            return this.renderSeparatorDOM();\n        }\n\n        return this.renderItemDOM();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;;;;;;GAUA,OAAMA,aAAa,CAA4BC,GAA6BC,GAAuBC;EAC/FD,EAAOE,SAAQC;;IACX,MAAMC,IAAaL,EAAQI;IAC3B,KAAKC,GAAY;KACjBC,IAAAD,EAAWE,UAAI,QAAAD,WAAA,aAAAA,EAAAE,KAAAH,GAAGH;AAAO;AAC3B;;ACfN,MAAMO,IAAoB;;AAC1B,MAAAC,IAAeD;;MCgBFE,IAAc;;;;;IAmIvBC,KAAAC,mBAAmB;MACf,MAAMC,IAAaF,KAAKG,YAAYC,cAAc;MAClD,KAAKF,GAAY,OAAO;MAExB,OAAOA,EAAWG,QACZC,EAAIJ,EAAWG,OAAOH,EAAWK,iBACjCD,EAAIJ,EAAWM,WAAWN,EAAWK;AAAc;IAG7DP,KAAAS,cAAejB;MACXA,EAAMkB;MAENvB,WAAWa,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAY,cAAepB;MACXA,EAAMqB;AAAiB;IAG3Bb,KAAAc,gBAAiBtB;MACb,IAAIA,EAAMuB,QAAQ,cAAcf,KAAKgB;AAAgB;IAGzDhB,KAAAiB,mBAAoBzB;MAChBA,EAAMkB;MAENvB,WAAWa,MAAM,EAAC,SAAS,cAAa;QACpCW,MAAM;QACNN,OAAOL,KAAKK,SAAS;;AACvB;IAGNL,KAAAkB,mBAAoB1B;MAChBA,EAAMqB;AAAiB;IAG3Bb,KAAAmB,qBAAsB3B;MAClB,IAAIA,EAAMuB,QAAQ,aAAaf,KAAKoB;AAAW;;;;;;;;;;;;EAvFnD,iBAAAC;IACIC,EAAgBtB;IAChBA,KAAKuB,aAAavB,KAAKC;;EAG3B,gBAAAuB;IACI,IAAIxB,KAAKyB,WAAW;IACpBC,EAAc1B,KAAKG;;;;EAOvB,kBAAAwB,CAAmBnC;IACf,IAAIA,EAAMoC,WAAW5B,KAAKG,aAAa;MACnCH,KAAKoB;;;;;EAQb,iBAAAS;IACIP,EAAgBtB;;;;EAMpB,cAAI8B;IACA,OAAO9B,KAAK+B,SAAS/B,KAAKG,YAAY6B,YAAYC,UAAUjC,KAAKuB;;EAGrE,eAAIW;IACA,OAAO5B,EAAI,sCAAsC,EAACN,KAAK8B,cAAc;;EAGzE,SAAAV;IACIpB,KAAKmC,gBAAgBC;;EAGzB,cAAApB;IACIhB,KAAKqC,aAAarC,KAAKqC,UAAUD;;;;EAiDrC,aAAAE;IACI,OACIC,EAAA;MACIC,OAAM;MACNC,MAAK;OAELF,EAAA;MACIG,KAAKC,KAAO3C,KAAKmC,kBAAkBQ;MAAG,cAC1BrC,EAAIN,KAAK8B;MACrBU,OAAM;MACNI,UAAS;MACTC,UAAU7C,KAAK6C;MACfJ,MAAK;MACLK,SAAS9C,KAAKS;MACdsC,WAAW/C,KAAKc;MAChBkC,SAAShD,KAAKY;MAAW,WACjB;OAER2B,EAAA,cAAOjC,EAAIN,KAAK8B,eAEnB9B,KAAKiD,aACFV,EAAA;MACIG,KAAKC,KAAO3C,KAAKqC,YAAYM;MAC7BH,OAAM;MACNI,UAAS;MAAI,cACD5C,KAAKkC;MACjBW,UAAU7C,KAAK6C;MACfC,SAAS9C,KAAKiB;MACd8B,WAAW/C,KAAKmB;MAChB6B,SAAShD,KAAKkB;MAAgB,WACtB;OAERqB,EAAA;MAAS5B,MAAK;;;EAOlC,kBAAAuC;IACI,OACIX,EAAA;MACIC,OAAM;MACNC,MAAK;MAAW,WACR;;;EAKpB,MAAAU;IACI,IAAInD,KAAKyB,WAAW;MAChB,OAAOzB,KAAKkD;;IAGhB,OAAOlD,KAAKsC"}

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
 
 import { l as s, e as a } from "./index-504f1a9e.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-only-intent-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 
 const l = n;
 

package/dist/q2-tecton-elements/q2-file-picker.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-only-intent-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    // cursor: pointer;\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\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    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\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    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAkB;;AACxB,MAAAC,IAAeD;;MC2BFE,IAAY;;;;IAMrBC,KAAAC,cAAsB;IAsKtBD,KAAAE,cAAeC;MACXH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;AAAK;IAkItCL,KAAAM,mBAAoBH;MAChBH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;MAC7B,MAAME,IAAeC,MAAMC,KAAKN,EAAEO,aAAaC;MAC/C,MAAMC,IAAcZ,KAAKa,iBAAiBN;MAE1CP,KAAKc,WAAWF;MAChBZ,KAAKe,QAAQH;AAAW;IAG5BZ,KAAAgB,oBAAqBb;MACjB,MAAMc,IAAgBT,MAAMC,KAAMN,EAAEe,OAA4BP;MAChE,MAAMC,IAAcZ,KAAKa,iBAAiBI;MAE1CjB,KAAKc,WAAWF;MAChBZ,KAAKe,QAAQH;AAAW;IAG5BZ,KAAAmB,oBAAqBhB;MACjBH,KAAKI,aAAaD;MAClBH,KAAKK,wBAAwB;AAAI;;;QAUrCL,KAAAoB,SAAS,MAEDC,EAAA;MAAKC,OAAM;QACLtB,KAAKuB,YAAYvB,KAAKwB,mBACpBH,EAAA;MAAKC,OAAM;OACNtB,KAAKuB,YACFF,EAAA;MACIC,OAAM;MACNG,SAAQ;MAAY,WACZ;SAELzB,KAAK0B,QAAQC,EAAI3B,KAAK0B,SAAS1B,KAAK4B,sBAAsBP,EAAA;MAAMQ,MAAK;SAAa,KAG5F7B,KAAKwB,kBACFH,EAAA;MACIC,OAAM;MACNQ,IAAG;MAAa,WACR;SAEL9B,KAAK+B,cACJJ,EAAI3B,KAAK+B,eACT/B,KAAKgC,4BACLX,EAAA;MAAMQ,MAAK;SAAgB,MAS7C7B,KAAKiC,YAAY,iBACfZ,EAAA;MACIC,OAAOtB,KAAKkC;MACZC,aAAanC,KAAKI;MAClBgC,aAAapC,KAAKE;MAClBmC,YAAYrC,KAAKmB;MACjBmB,QAAQtC,KAAKM;MACbiC,KAAKC,KAAOxC,KAAKyC,WAAWD,MAAE,QAAFA,WAAE,IAAFA,IAAMxC,KAAKyC;MAAS,WACxC;OAENzC,KAAK0C,qBACHrB,EAACsB,GAAQ,MACLtB,EAAA;MAAYC,OAAM;QAClBD,EAAA;MAAGC,OAAM;OAAkBK,EAAI,oDAGnCN,EAACsB,GAAQ,MACLtB,EAAA;MAASuB,MAAK;QACdvB,EAAA;MAAGC,OAAM;OACLD,EAAA;MACIK,OAAOC,EAAI;MACXkB,YAAY,MAAM7C,KAAK8C;MACvBb,SAAQ;MAAQ,WACR;MACRc,MAAK;QAERpB,EAAI,6CAA6C,EAAC3B,KAAKgD,kBAMxE3B,EAAA;MACIC,OAAM;MAAQ,WACN;OAERD,EAAA;MACI4B,UAAUjD,KAAK0C;MACfQ,QAAO;MACPC,SAASnD,KAAK0C;MACdU,SAAS,MAAMpD,KAAK8C;MACpBO,MAAK;MAAQ,WACL;OAERhC,EAAA;MAASuB,MAAK;QACdvB,EAAA,cAAOM,EAAI,yCAAyC,EAAC3B,KAAKgD,gBAItE3B,EAAA;MAAA,sBACyBrB,KAAK+B,eAAe,iBAAkBuB;MAC3DhC,OAAM;MACNQ,IAAG;MACHyB,UAAUvD,KAAKgB;MACfuB,KAAKC,KAAOxC,KAAKwD,oBAAoBhB,MAAE,QAAFA,WAAE,IAAFA,IAAMxC,KAAKwD;MAChDZ,MAAK;MAAM,WACH;MACRa,UAAQ;QAEZpC,EAAA;MAAKC,OAAM;OACPD,EAAA;MAASC,OAAM;OACVtB,KAAK0D,eAAeC,KAAIC,KACrBvC,EAAA;MACIC,OAAOtB,KAAK6D,mBAAmBD,EAAKA,KAAK/B;MACzCiC,KAAKF,EAAKA,KAAK/B;MACfkC,gBAAgB/D,KAAKgE,uCAAuCJ,EAAKA,KAAK/B;OAEtER,EAAA;MAAK4C,MAAK;OACLL,EAAKM,WAAW,kBACjBN,EAAKM,WAAW,qBAChBN,EAAKM,WAAW,YAChBN,EAAKM,WAAW,yBACZ7C,EAAA;MACIC,OAAM;MACNsB,MAAK;SAETgB,EAAKM,WAAW,gBAChB7C,EAAA;MAAYC,OAAM;SAElBD,EAAA;MACIC,OAAM;MACNsB,MAAK;SAIjBvB,EAAA;MAAK4C,MAAK;OAAUL,EAAKA,KAAK/B,OAC9BR,EAAA;MAAK4C,MAAK;OAAQjE,KAAKmE,yBAAyBP,EAAKM,QAAQN,EAAKA,KAAKP,QACvEhC,EAAA;MAAK4C,MAAK;OACN5C,EAAA;MACIC,OAAM;MACN4B,QAAO;MACPE,SAASpD,KAAKoE,gCAAgCR,EAAKA,KAAK/B;OAExDR,EAAA;MAASuB,MAAK;;6BAzbrB;0BAOvB;iCAG2B;0BAGhB;;qBAmBc;;oBAcZyB;uBAMGA;kBASsD;iBAQvD;MAAEC,cAAc;MAAIC,YAAY;;mBAOjB;;;;EAYpC,cAAAC,CAAeC;IACXA,EAASC,SAAQC;MACb,MAAMC,IAA0B5E,KAAKC,YAAY4E,WAAUjB,KAAQA,EAAK/B,SAAS8C,EAAW9C;MAC5F,IAAI+C,KAA2B,GAAG;QAC9B,MAAME,IAAe9E,KAAKC,YAAY8E,OAAOH,GAAyB,GAAG;QACzE5E,KAAK0D,iBAAiB,EAAC;UAAEE,MAAMkB;UAAcZ,QAAQS,EAAWT;cAAalE,KAAK0D;aAC/E;QACH,MAAMsB,IAA6BhF,KAAK0D,eAAemB,WACnDjB,KAAQA,EAAKA,KAAK/B,SAAS8C,EAAW9C;QAE1C,IAAImD,KAA8B,GAAG;UACjChF,KAAK0D,eAAesB,GAA4Bd,SAASS,EAAWT;UACpElE,KAAKiF;;;;;;;EASrB,mBAAI/C;IACA,MAAMgD,IAAU,EAAC;IACjB,IAAIlF,KAAKK,uBAAuB;MAC5B6E,EAAQC,KAAK;;IAGjB,OAAOD,EAAQE,KAAK;;EAGxB,kBAAIC;IACA,OAAO7E,MAAM8E,QAAQtF,KAAKuF,aAAavF,KAAKuF,YAAYvF,KAAKuF,UAAUC,MAAM,KAAK7B,KAAIf,KAAQA,EAAK6C;;EAGvG,kBAAIjE;IACA,SAASxB,KAAK+B,eAAe/B,KAAKgC;;EAGtC,6BAAIA;IACA,OAAO0D,EAAe1F,KAAKwC,IAAI;;EAGnC,YAAIjB;IACA,SAASvB,KAAK0B,SAAS1B,KAAK4B;;EAGhC,uBAAIA;IACA,OAAO8D,EAAe1F,KAAKwC,IAAI;;EAGnC,gBAAA3B,CAAiB8E;IACb,MAAMrB,IAAe;IACrBA,EAAaa,QAAQnF,KAAK4F,2BAA2BD;IACrDrB,EAAaa,QAAQnF,KAAK6F,0BAA0BF;IACpDrB,EAAaa,QAAQnF,KAAK8F,8BAA8BH;IACxD3F,KAAK0D,iBAAiB,KAAIY;IAE1B,IAAIqB,EAAcI,WAAW,GAAG;MAC5B/F,KAAK0C,oBAAoB;WACtB;MACH1C,KAAKC,cAAc0F;;IAGvB,OAAO;MAAErB;MAAcC,YAAYoB;;;EAQvC,YAAAvF,CAAa4F;IACTA,EAAMC;IACND,EAAME;;EAGV,+BAAAjB;IACI,IAAIjF,KAAKC,YAAY8F,WAAW,MAAM/F,KAAK0D,eAAeyC,MAAKvC,KAAQA,EAAKM,WAAW,iBAAgB;MACnGlE,KAAK0C,oBAAoB;;;EAIjC,UAAA5B,CAAWF;IACPZ,KAAK0C,oBAAoB9B,EAAY2D,WAAWwB,SAAS;IACzD/F,KAAKoG,UAAUC,KAAKzF;;EAGxB,0BAAAgF,CAA2BjF;IACvB,MAAM2D,IAAe;IAErB,IAAItE,KAAKqF,eAAeU,WAAW,GAAG,OAAOzB;IAE7C3D,EAAM+D,SAAQd;MACV,MAAM0C,IAAgB1C,EAAK/B,KAAK2D,MAAM,KAAKe,MAAMC;MACjD,KAAKxG,KAAKqF,eAAeoB,SAASH,IAAgB;QAC9ChC,EAAaa,KAAK;UAAEvB;UAAMM,QAAQ;;;;;QAK1CI,EAAaI,SAAQgC;MACjB,MAAMC,IAAQhG,EAAMiG,QAAQF,EAAY9C;MACxC,IAAI+C,KAAS,GAAG;QACZhG,EAAMoE,OAAO4B,GAAO;;;IAI5B,OAAOrC;;EAGX,6BAAAwB,CAA8BnF;IAC1B,MAAMkG,IAAyB;IAE/B,IAAI7G,KAAKgD,aAAaqB,UAAU,OAAOwC;IAEvC,IAAIlG,EAAMoF,SAAS/F,KAAKgD,UAAU;MAC9B,MAAM8D,IAAcnG,EAAMoE,OAAO/E,KAAKgD;MACtC8D,EAAYpC,SAAQd;QAChBiD,EAAuB1B,KAAK;UAAEvB;UAAMM,QAAQ;;AAAyB;;IAI7E,OAAO2C;;EAGX,yBAAAhB,CAA0BlF;IACtB,MAAMoG,IAAqB;IAE3B,IAAI/G,KAAKgH,gBAAgB3C,UAAU,OAAO0C;IAE1CpG,EAAM+D,SAAQd;MACV,IAAIA,EAAKP,OAAOrD,KAAKgH,aAAa;QAC9BD,EAAmB5B,KAAK;UAAEvB;UAAMM,QAAQ;;;;;QAKhD6C,EAAmBrC,SAAQuC;MACvB,MAAMN,IAAQhG,EAAMiG,QAAQK,EAAarD;MACzC,IAAI+C,KAAS,GAAG;QACZhG,EAAMoE,OAAO4B,GAAO;;;IAI5B,OAAOI;;EAGX,aAAAG;IACIlH,KAAKmH,kBAAkB;;;EAG3B,sCAAAnD,CAAuCoD;IACnC,OAAQjH;MACJ,IAAIA,EAAEkH,kBAAkB,yBAAyB;QAC7CrH,KAAK0D,iBAAiB1D,KAAK0D,eAAe4D,QAAO1D,KAAQA,EAAKA,KAAK/B,SAASuF;;;;EAKxF,+BAAAhD,CAAgCgD;IAC5B,OAAO;MACH,MAAMG,IAAevH,KAAK0D,eAAe8D,MAAK5D,KAAQA,EAAKA,KAAK/B,SAASuF;MACzE,IAAIG,GAAc;QACdA,EAAaE,cAAc;QAC3BzH,KAAKkH;;;;EAKjB,kBAAArD,CAAmBuD;IACf,MAAMlC,IAAU,EAAC;IACjB,MAAMJ,IAAe9E,KAAK0D,eAAe8D,MAAK5D,KAAQA,EAAKA,KAAK/B,SAASuF;IACzE,IAAItC,MAAY,QAAZA,WAAY,aAAZA,EAAc2C,aAAa;MAC3BvC,EAAQC,KAAK;WACV;MACHD,EAAQC,KAAK;;IAEjB,OAAOD,EAAQE,KAAK;;EAGxB,wBAAAjB,CAAyBD,GAAoBb;IACzC,QAAQa;KACJ,KAAK;MACD,OAAOvC,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;MACD,OAAOA,EAAI;;KACf,KAAK;KACL;MACI,OAAOA,EAAI,sCAAsC,GAAE0B,KAAQ,MAAO,MAAOqE,QAAQ;;;EA2B7F,iBAAA5E;IACI9C,KAAKwD,kBAAkBmE,cAAc,IAAIC,WAAW"}

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -8,9 +8,9 @@ function sanitizeRegexString(t) {
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
-const f = d;
+const u = d;
 
-const u = class {
+const f = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
@@ -144,26 +144,32 @@ const u = class {
           this.searchOptions(r, false);
           break;
         }
-        t.preventDefault();
         h = s.find((t => t.active));
         if (!h || h.disabled) break;
         this.selectOption(h);
         if (n) break;
-        this.popoverState.emit({
-          open: false,
-          action: "select"
+        this.hostElement.addEventListener("tctClick", (() => {
+          this.popoverState.emit({
+            open: false,
+            action: "select"
+          });
+        }), {
+          once: true
         });
         break;
 
        case "Enter":
-        t.preventDefault();
         h = s.find((t => t.active));
         if (!h || h.disabled) break;
         this.selectOption(h);
         if (n) break;
-        this.popoverState.emit({
-          open: false,
-          action: "select"
+        this.hostElement.addEventListener("tctClick", (() => {
+          this.popoverState.emit({
+            open: false,
+            action: "select"
+          });
+        }), {
+          once: true
         });
         break;
 
@@ -560,14 +566,14 @@ const u = class {
   // #region Render Methods
   render() {
     return i(s, {
-      key: "16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe"
+      key: "5708785bddc01b545a3b2a94417ad415c6cba32e"
     }, i("div", {
-      key: "b0eb152206ccb8b93e98d11c32894cb136ffc9a9",
+      key: "e6f36e235609824dae19e93edc14d8f8504eb860",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, i("div", {
-      key: "bccbd0eb8bc8fc92db4629be02ab23e050e32fe9",
+      key: "cbdf42235da01a1fc10efcc0798edeb653fe26ae",
       class: "options",
       "aria-label": r("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": `${!!this.multiple}`,
@@ -575,7 +581,7 @@ const u = class {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, i("slot", {
-      key: "9b5a130d4d0a1a5f594b47669607febf39c0ea87"
+      key: "cec72b3912c96f09a12c171e4227efd29a9097c9"
     }))));
   }
   get hostElement() {
@@ -589,7 +595,7 @@ const u = class {
   }
 };
 
-u.style = f;
+f.style = u;
 
 const b = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 
@@ -773,7 +779,7 @@ const w = class {
     };
     let p;
     let d;
-    let f;
+    let u;
     if (a) {
       const {outletOffset: t = 0, innerHeight: e = window.innerHeight} = ((i = window.Tecton) === null || i === void 0 ? void 0 : i.platformDimensions) || {};
       const s = window.visualViewport.height - l;
@@ -783,18 +789,18 @@ const w = class {
       // If the top of the module is below the top of the window we just use the controlTop
       // Otherwise we need to add the outletOffset to the controlTop
             d = (t > 0 ? h : h + t) - r;
-      f = n ? s - r : o - r;
+      u = n ? s - r : o - r;
     } else {
       p = window.visualViewport.height;
       d = h - r;
-      f = p - l - r;
+      u = p - l - r;
     }
-    const u = d > f ? "up" : "down";
+    const f = d > u ? "up" : "down";
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         const b = !s.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
     // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-    const v = this.currentDirection || n || u;
+    const v = this.currentDirection || n || f;
     switch (v) {
      case "up":
       if (b) {
@@ -807,8 +813,8 @@ const w = class {
 
      case "down":
       if (b) {
-        const t = this.validatedMaxHeight || f;
-        const e = Math.min(f, t);
+        const t = this.validatedMaxHeight || u;
+        const e = Math.min(u, t);
         s.style.setProperty("--comp-pop-max-height", `${e}px`);
       }
       this.setDirectionAndShow("down");
@@ -898,5 +904,5 @@ const w = class {
 
 w.style = v;
 
-export { u as q2_option_list, w as q2_popover };
+export { f as q2_option_list, w as q2_popover };
 //# sourceMappingURL=q2-option-list_2.entry.js.map