q2-tecton-elements 1.54.5 → 1.54.7

package/dist/q2-tecton-elements/q2-currency.entry.js

@@ -113,22 +113,22 @@ const i = class {
   render() {
     const {hasPlusMinusSign: r, plusMinusSign: e, currencyIsFront: s, currencySymbol: n, shouldSuperscriptSymbol: i, amountCore: c, fraction: o, shouldSuperscriptFraction: a, readableCurrency: u, currencyClasses: l} = this;
     return t("div", {
-      key: "a2427d807ba868ebff71438f4422e075205da869",
+      key: "f1274f5d1555f1713d2993bacb8521c71a03977f",
       "test-id": "q2CurrencyInner",
       class: l,
       "aria-label": u
     }, r && t("span", {
-      key: "594c8cd84fd3226b2d8170ee9a05532f57bb0d6f"
+      key: "be619265417e9264b453a0523c074a30a954fa29"
     }, e), s && t("span", {
-      key: "f726da3911833f35f0fe5c5b68d9d341acf5af27",
+      key: "1309c643fffaa531a0199898b34ac290c9118d49",
       class: i ? "superscript" : ""
     }, n), t("span", {
-      key: "08644b7c1397237676dc00a81552ba7badefa38e"
+      key: "65ad17baf3c76891f22acd35c4de3c3b7d70d82a"
     }, c), t("span", {
-      key: "cab6f51a4af6067122f3c2994d79f0d9fb828c14",
+      key: "2122a260b4a10c4e070a9e7dd7918409cb3564cd",
       class: a ? "superscript" : ""
     }, o), !s && t("span", {
-      key: "1f1265a8bf437499d0d613f47b7c2f357e22165c",
+      key: "62c45c5ccba750bf9b382e45b8aa836469e755ce",
       class: i ? "superscript" : ""
     }, n));
   }

package/dist/q2-tecton-elements/q2-detail.entry.js

@@ -1,4 +1,4 @@
-import { r as e, h as t, g as i } from "./index-7a5365e2.js";
+import { r as t, h as e, g as i } from "./index-7a5365e2.js";
 
 import { e as l, l as s } from "./index-504f1a9e.js";
 
@@ -7,8 +7,8 @@ const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 const o = a;
 
 const n = class {
-  constructor(t) {
-    e(this, t);
+  constructor(e) {
+    t(this, e);
     this.alignment = "left";
     this.description = undefined;
     this.label = undefined;
@@ -23,36 +23,36 @@ const n = class {
   // #endregion
   // #region Local Methods
   get descriptionClasses() {
-    const e = [ "description" ];
+    const t = [ "description" ];
     if (this.size) {
-      e.push(`description-size-${this.size}`);
+      t.push(`description-size-${this.size}`);
     } else {
-      e.push(`description-size-inline`);
+      t.push(`description-size-inline`);
     }
     if (!this.stacked) {
-      e.push(`description-alignment-right`);
+      t.push(`description-alignment-right`);
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get detailClasses() {
-    const e = [ "detail" ];
+    const t = [ "detail" ];
     if (this.size) {
-      e.push(`detail-block`);
+      t.push(`detail-block`);
     } else {
-      e.push(`detail-inline`);
+      t.push(`detail-inline`);
     }
     if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {
-      e.push("detail-stacked", `detail-stacked-alignment-${this.alignment}`);
+      t.push("detail-stacked", `detail-stacked-alignment-${this.alignment}`);
     } else {
-      e.push("detail-horizontal");
+      t.push("detail-horizontal");
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get hasDefaultSlotContent() {
-    const e = !!this.hostElement.innerHTML.trim();
-    const t = this.hostElement.querySelectorAll(":scope > [slot]").length;
+    const t = !!this.hostElement.innerHTML.trim();
+    const e = this.hostElement.querySelectorAll(":scope > [slot]").length;
     const i = this.hostElement.childNodes.length;
-    return e && i > t;
+    return t && i > e;
   }
   get hasDescripiton() {
     return !!this.description || this.hasDefaultSlotContent;
@@ -64,16 +64,16 @@ const n = class {
     return l(this.hostElement, "label");
   }
   get labelClasses() {
-    const e = [ "label" ];
+    const t = [ "label" ];
     if (this.size) {
-      e.push(`label-size-${this.size}`);
+      t.push(`label-size-${this.size}`);
     } else {
-      e.push(`label-size-inline`);
+      t.push(`label-size-inline`);
     }
     if (!this.stacked) {
-      e.push(`label-align-left`);
+      t.push(`label-align-left`);
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get onlyHasDescripiton() {
     return this.hasDescripiton && !this.hasLabel;
@@ -82,40 +82,40 @@ const n = class {
     return this.hasLabel && !this.hasDescripiton;
   }
   setSlotSizeProps() {
-    const e = Array.from(this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot="label"] > *'));
-    e.forEach((e => {
-      let t = this.size;
-      if (e.localName === "q2-currency") {
-        switch (t) {
+    const t = Array.from(this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot="label"] > *'));
+    t.forEach((t => {
+      let e = this.size;
+      if (t.localName === "q2-currency") {
+        switch (e) {
          case "xsmall":
-          t = "small";
+          e = "small";
           break;
 
          case "xlarge":
-          t = "large";
+          e = "large";
           break;
         }
       }
-      e.slotSize = t;
+      t.slotSize = e;
     }));
   }
   // #endregion
   // #region Render Methods
   render() {
-    return t("div", {
-      key: "279671eea96d480283a80f3de70e8a3057e153a0",
+    return e("div", {
+      key: "811c54a224bbbefce94cbf397a29a4cb1f98ba2b",
       class: this.detailClasses
-    }, this.hasLabel && t("div", {
-      key: "561d1ede1db345e2a7979947e463ba45db33559e",
+    }, this.hasLabel && e("div", {
+      key: "b2c294eb4c1b5cd525351dc67c2dc58ed4b75b70",
       class: this.labelClasses,
       "aria-describedby": !!this.description ? "label-description" : undefined
-    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? t("slot", {
+    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? e("slot", {
       name: "label"
-    }) : ""), this.hasDescripiton && t("div", {
-      key: "e8f20b79064d73157058cee3d73496bbd346531f",
+    }) : ""), this.hasDescripiton && e("div", {
+      key: "9d979c672eeefd21882fa676483cd8020e15dc7c",
       id: "label-description",
       class: this.descriptionClasses
-    }, !!this.description ? s(this.description) : this.hasDefaultSlotContent ? t("slot", null) : ""));
+    }, !!this.description ? s(this.description) : this.hasDefaultSlotContent ? e("slot", null) : ""));
   }
   get hostElement() {
     return i(this);

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

@@ -13,9 +13,17 @@ const f = class {
     t(this, e);
     var i;
     this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])";
+    this.optionSelector = "q2-option:not([disabled]):not([separator])";
     this.focusToggle = () => {
       this.controlElement.focus();
     };
+    this.handleFocusOut = t => {
+      var e;
+      const i = t.relatedTarget;
+      if ((e = this.popoverElement) === null || e === void 0 ? void 0 : e.contains(i)) return;
+      if (this.hostElement.contains(i)) return;
+      this.open = false;
+    };
     this.onClickElsewhere = t => {
       const e = t.target;
       if (e.localName === "q2-option-list") {
@@ -28,6 +36,10 @@ const f = class {
         e.open = false;
       }
     };
+    this.onPopoverState = t => {
+      if (t.detail.open) return;
+      this.controlElement.focus();
+    };
     this.onToggleClick = async t => {
       t.stopPropagation();
       if (o(this)) {
@@ -46,17 +58,6 @@ const f = class {
         this.optionList.handleExternalKeydown(t);
       }
     };
-    this.onPopoverState = t => {
-      if (t.detail.open) return;
-      this.controlElement.focus();
-    };
-    this.handleFocusOut = t => {
-      var e;
-      const i = t.relatedTarget;
-      if ((e = this.popoverElement) === null || e === void 0 ? void 0 : e.contains(i)) return;
-      if (this.hostElement.contains(i)) return;
-      this.open = false;
-    };
     this.additionalContext = undefined;
     this.alignment = undefined;
     this.ariaLabel = undefined;
@@ -103,7 +104,9 @@ const f = class {
     (e = this.popoverElement) === null || e === void 0 ? void 0 : e.scrollContainerTo({
       top: 0
     });
-    this.optionList.setActiveElement(null);
+    if (!t) {
+      this.optionList.setActiveElement(null);
+    }
   }
   // #endregion
   // #region Public Methods API
@@ -223,11 +226,12 @@ const f = class {
     };
   }
   _clickItem(t) {
-    if (!t) return;
-    const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
-    const i = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item");
-    if (!e || this.disabled) return;
-    i.click();
+    var e;
+    if (!t || this.disabled) return;
+    const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
+    const n = this.hostElement.querySelector(`${this.optionSelector}[value="${t}"]`);
+    (e = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".dropdown-item")) === null || e === void 0 ? void 0 : e.click();
+    n === null || n === void 0 ? void 0 : n.click();
   }
   async _handleActionSheet(t) {
     const {value: e} = await s(this, t);
@@ -241,10 +245,6 @@ const f = class {
     t.focus();
     t.dispatchEvent(new FocusEvent("focus"));
   }
-  navigateTo(t, e, i) {
-    var n, o;
-    return (o = (n = window.TectonElements) === null || n === void 0 ? void 0 : n.navigateTo) === null || o === void 0 ? void 0 : o.call(n, t, e, i);
-  }
   orchestrateResolvedMenuItems() {
     if (!this.name || !this.context) {
       // this is only for contextual menu outlets
@@ -278,11 +278,17 @@ const f = class {
       }
       switch (t.action) {
        case "navigateTo":
-        e = () => this.navigateTo(t.featureName, t.moduleName, i);
+        e = function() {
+          var e, n;
+          return (n = (e = window.TectonElements) === null || e === void 0 ? void 0 : e.navigateTo) === null || n === void 0 ? void 0 : n.call(e, t.featureName, t.moduleName, i);
+        };
         break;
 
        case "showOverpanel":
-        e = () => this.showOverpanel(`${t.featureName}.${t.moduleName}`, i);
+        e = function() {
+          var e, n;
+          return (n = (e = window.TectonElements) === null || e === void 0 ? void 0 : e.showOverpanel) === null || n === void 0 ? void 0 : n.call(e, `${t.featureName}.${t.moduleName}`, i, undefined, true);
+        };
         break;
       }
       const n = document.createElement("q2-dropdown-item");
@@ -293,21 +299,17 @@ const f = class {
       return n;
     }))));
   }
-  showOverpanel(t, e) {
-    var i, n;
-    return (n = (i = window.TectonElements) === null || i === void 0 ? void 0 : i.showOverpanel) === null || n === void 0 ? void 0 : n.call(i, t, e, undefined, true);
-  }
   // #endregion
   // #region Render Methods
   render() {
     const t = this.toggleButtonProps;
     return e("click-elsewhere", {
-      key: "35405b57c6680f44ce21156a578cea6d96c063b8",
+      key: "e03e38faaa27ea520e902acbb03875e7cdec33c6",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, e("q2-btn", {
-      key: "8ec87dae4f675d7764d91e91a3e37f704ad73d07",
+      key: "cb379d4cb55631a5ba148df0716bbc7e19575c70",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
@@ -334,7 +336,7 @@ const f = class {
     }) : " ", this.label && !this.hideLabel && e("span", {
       class: "dropdown-button-text"
     }, c(this.label)))), e("q2-popover", {
-      key: "c71cdf5198dc87f720828d1b9623eadde266d118",
+      key: "bfad0484d72855a359bd45aeecf9107ff879e81b",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -346,7 +348,7 @@ const f = class {
       mode: this.popoverMode || undefined,
       block: this.block
     }, e("q2-option-list", {
-      key: "42b372ea1203e50d15253590f4b8454df5b4f6d7",
+      key: "9b6f172128fa8265e92330b2333cbef501e060f1",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
@@ -354,7 +356,7 @@ const f = class {
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
     }, e("slot", {
-      key: "50f04d7a1f74de7cf41b74d4b00b99b9a58eec8d"
+      key: "6460a769807e87648b6caea209d4f679035eb362"
     }))));
   }
   get hostElement() {

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

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","open","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","onPopoverState","detail","handleFocusOut","relatedTarget","_a","contains","hostElement","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","showActionSheetList","dispatchEvent","FocusEvent","navigateTo","featureName","moduleName","queryParams","_b","TectonElements","call","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","contextIdParamName","action","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","overpanelPath","params","undefined","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _clickItem(value: string) {\n        if (!value) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        itemBtn.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","optionSelector","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","_a","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nq2-icon {\n    pointer-events: none;\n    margin-block: -100px;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/** @slot  control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot. */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n        if (!open) {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        if (!item || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        itemBtn.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAgB;;AACtB,MAAAC,IAAeD;;MCYFE,IAAU;;;;IAInBC,KAAAC,uBAA+B;IAC/BD,KAAAE,iBAAyB;IA2WzBF,KAAAG,cAAc;MACVH,KAAKI,eAAeC;AAAO;IAG/BL,KAAAM,iBAAkBC;;MACd,MAAMC,IAAgBD,EAAMC;MAC5B,KAAIC,IAAAT,KAAKU,oBAAc,QAAAD,WAAA,aAAAA,EAAEE,SAASH,IAAgB;MAClD,IAAIR,KAAKY,YAAYD,SAASH,IAAgB;MAC9CR,KAAKa,OAAO;AAAK;IAGrBb,KAAAc,mBAAoBP;MAChB,MAAMQ,IAASR,EAAMQ;MACrB,IAAIA,EAAOC,cAAc,kBAAkB;QACvCT,EAAMU;;MAEV,IAAIF,EAAOC,cAAc,mBAAmB;QACxCT,EAAMU;QACN,OAAMP,gBAAEA,KAAmBV;QAC3B,KAAKU,GAAgB;QACrBA,EAAeG,OAAO;;;IAI9Bb,KAAAkB,iBAAkBX;MACd,IAAIA,EAAMY,OAAON,MAAM;MACvBb,KAAKI,eAAeC;AAAO;IAG/BL,KAAAoB,gBAAgBC,MAAOd;MACnBA,EAAMU;MACN,IAAIK,EAAsBtB,OAAO;QAC7BA,KAAKuB,mBAAmBhB;aACrB;cACGP,KAAKU,eAAec;;;IAIlCxB,KAAAyB,kBAAkBJ,MAAOd;MACrB,MAAMmB,IAAkBnB,EAAMoB,WAAWpB,EAAMqB,WAAWrB,EAAMsB,QAAQ;MACxE,IAAIH,GAAiB;MAErBnB,EAAMuB;MACN,IAAIR,EAAsBtB,MAAMO,IAAQ;QACpCP,KAAKuB,mBAAmBhB;aACrB;QACHP,KAAK+B,WAAWC,sBAAsBzB;;;;;;;;;;;qBAxV3BE,IAAAwB,OAAOC,YAAM,QAAAzB,WAAA,aAAAA,EAAE0B;;;;;;;4BAyCG;;;;uBA+Bb;;gBAegD;;;;EAKxE,iBAAAC;IACIpC,KAAKqC;IACLrC,KAAKsC;IACLtC,KAAKuC;;EAGT,gBAAAC;IACIxC,KAAKyC;IACLC,EAAc1C,KAAKY;;;;EAOvB,aAAA+B,CAAcpC;IACV,KAAKqC,EAAmBrC,GAAOP,KAAKY,cAAc;IAClDZ,KAAKG;;EAIT,yBAAA0C,EAA4B1B,SAAQN,MAAEA;;IAClC,IAAIb,KAAKa,SAASA,GAAMb,KAAKa,OAAOA;KACpCJ,IAAAT,KAAKU,oBAAc,QAAAD,WAAA,aAAAA,EAAEqC,kBAAkB;MAAEC,KAAK;;IAC9C,KAAKlC,GAAM;MACPb,KAAK+B,WAAWiB,iBAAiB;;;;;;;;;EAYzC,kBAAMC;IACF,KAAKjD,KAAKa,QAAQb,KAAKkD,UAAU;IACjClD,KAAKmD;;;;;SAQT,iBAAMC;IACF,IAAIpD,KAAKa,QAAQb,KAAKkD,UAAU;IAChClD,KAAKmD;;;;;;;;;SAYT,gBAAME,CAAWC;;IACb,MAAMC,IAAOvD,KAAKY,YAAY4C,cAC1B,GAAGxD,KAAKC,+BAA+BqD;IAE3C,MAAMG,IAAUF,MAAI,QAAJA,WAAI,aAAJA,EAAMG,WAAWF,cAAiC;IAClE,KAAKD,KAAQvD,KAAKkD,UAAU;IAC5B,KAAKlD,KAAKa,MAAM;OACZJ,IAAAT,KAAKI,oBAAc,QAAAK,WAAA,aAAAA,EAAEkD;YACfC;;IAEVH,EAAQE;UACFC;;;;;;;;;;;SAcV,sBAAMC,CAAiBP;;IACnB,MAAMC,IAAOvD,KAAKY,YAAY4C,cAC1B,GAAGxD,KAAKC,+BAA+BqD;IAE3C,MAAMQ,IAAeP,MAAI,QAAJA,WAAI,aAAJA,EAAMG,WAAWF,cAAiC;IACvE,KAAKD,MAASO,KAAgB9D,KAAKkD,UAAU;IAC7C,KAAKlD,KAAKa,MAAM;OACZJ,IAAAT,KAAKI,oBAAc,QAAAK,WAAA,aAAAA,EAAEkD;YACfC;;IAEVE,EAAaH;UACPC;;;;EAOV,wBAAAG;IACI/D,KAAKyC;;EAIT,gBAAAH;IACI0B,EAAkBhE,MAAM,aAAa;;EAIzC,gBAAAuC;IACI0B,EAAgBjE;;EAIpB,cAAAkE;IACIlE,KAAKyC;;EAIT,mBAAA0B;IACInE,KAAKyC;;EAIT,WAAA2B;IACIpE,KAAKyC;;EAIT,mBAAAJ;IACI2B,EAAkBhE,MAAM,gBAAgB;;EAI5C,mBAAAqE;IACIrE,KAAKyC;;;;EAMT,8BAAI6B;IACA,OAAOtE,KAAKY,YAAY2D,iBAAiBvE,KAAKC,sBAAsBuE;;EAGxE,oBAAIC;IACA,SAASzE,KAAKY,YAAY4C,cAAc;;EAG5C,qBAAIkB;IACA,MAAMC,IAAiB,EAAC,WAAW,aAAa;IAChD,MAAMC,IAAe,EAAC,QAAQ,OAAO,aAAaD;IAClD,MAAME,IAAOD,EAAaE,SAAS9E,KAAK6E,QAAQ7E,KAAK6E,OAAO;IAC5D,MAAME,IAAOF,MAAS;IACtB,MAAMG,IAAMH,MAAS;IACrB,MAAMI,IAASJ,MAAS;IACxB,IAAIK;IACJ,IAAIP,EAAeG,SAASD,IAAO;MAC/BK,IAASL,MAAS,YAAYA,IAAO,YAAYA;;IAErD,MAAMM,IAASnF,KAAKa;IACpB,MAAMqC,MAAalD,KAAKkD;IACxB,MAAMkC,IAAepF,KAAKa;IAC1B,MAAMwE,KAAaN,MAASC,MAAQE,IAAS,aAAa;IAE1D,OAAO;MACHH;MACAC;MACAE;MACAC;MACAjC;MACAkC;MACAC;MACAJ;;;EAIR,UAAAK,CAAWhC;;IACP,KAAKA,KAAStD,KAAKkD,UAAU;IAC7B,MAAMK,IAAOvD,KAAKY,YAAY4C,cAC1B,GAAGxD,KAAKC,+BAA+BqD;IAE3C,MAAMiC,IAASvF,KAAKY,YAAY4C,cAAmC,GAAGxD,KAAKE,yBAAyBoD;KACpG7C,IAAA8C,MAAI,QAAJA,WAAI,aAAJA,EAAMG,WAAWF,cAAiC,uBAAiB,QAAA/C,WAAA,aAAAA,EAAEkD;IACrE4B,MAAM,QAANA,WAAM,aAANA,EAAQ5B;;EAGZ,wBAAMpC,CAAmBhB;IACrB,OAAM+C,OAAEA,WAAgBkC,EAAoBxF,MAAMO;IAClDP,KAAKsF,WAAWhC;IAChBtD,KAAKI,eAAeC;;EAGxB,cAAA8C;IACI,OAAM/C,gBAAEA,KAAmBJ;IAC3B,KAAKI,GAAgB;IACrBA,EAAeuD;IACfvD,EAAeC;IACfD,EAAeqF,cAAc,IAAIC,WAAW;;EAqDhD,4BAAAjD;IACI,KAAKzC,KAAK2F,SAAS3F,KAAK4F,SAAS;;MAE7B5F,KAAK6F;MACL;;IAGJ7F,KAAK8F,0BACAC,MAAKC;MACFhG,KAAK6F;MACLG,EAAKC,SAAQC;QACTlG,KAAKY,YAAYuF,YAAYD;AAAQ;AACvC,QAELE,OAAMC;MACHrG,KAAK6F;MACL,MAAMQ;AAAG;;EAIrB,sBAAAR;IACI,MAAMS,IAAmBtG,KAAKY,YAAY2D,iBAAiB;IAC3D+B,EAAiBL,SAAQC,KAAWlG,KAAKY,YAAY2F,YAAYL;;EAGrE,WAAAM;IACI,OACIxG,KAAK2F,QACL1D,OAAOwE,kBACPxE,OAAOwE,eAAeD,YAAYxG,KAAK2F,MAAM3F,KAAK0G,cAAc1G,KAAK2G,cAAc3G,KAAK4G;;EAIhG,uBAAAd;IACI,OAAO9F,KAAKwG,cAAcT,MAAKc,KACpBA,EAAMC,KAAIC;MACb,IAAIC;MACJ,IAAIC;MACJ,IAAIF,EAAa,cAAc;QAC3BE,IAAc;QACdA,EAAYF,EAAaG,sBAAsBH,EAAa;;MAGhE,QAAQA,EAAaI;OACjB,KAAK;QACDH,IAAY;;UACR,QAAOI,KAAA3G,IAAAwB,OAAOwE,oBAAc,QAAAhG,WAAA,aAAAA,EAAE4G,gBAAU,QAAAD,WAAA,aAAAA,EAAAE,KAAA7G,GACpCsG,EAAaQ,aACbR,EAAaS,YACbP;;QAGR;;OACJ,KAAK;QACDD,IAAY;;UACR,QAAOI,KAAA3G,IAAAwB,OAAOwE,oBAAc,QAAAhG,WAAA,aAAAA,EAAEgH,mBAAa,QAAAL,WAAA,aAAAA,EAAAE,KAAA7G,GACvC,GAAGsG,EAAaQ,eAAeR,EAAaS,cAC5CP,GACAS,WACA;;QAGR;;MAGR,MAAMC,IAAkBC,SAASC,cAAc;MAC/CF,EAAgBG,aAAa,SAASf,EAAagB;MACnDJ,EAAgBK,UAAUC,IAAI;MAC9BN,EAAgBO,cAAcnB,EAAagB;MAC3CJ,EAAgBQ,UAAUnB;MAE1B,OAAOW;AAAe;;;;EAQlC,MAAAS;IACI,MAAMC,IAAWrI,KAAK0E;IAEtB,OACI4D,EAAA;MAAAzG,KAAA;MACI0G,OAAOvI,KAAKa,OAAO,kBAAkB;MACrC2H,UAAUxI,KAAKc;MAAgB,WACvB;OAERwH,EAAA;MAAAzG,KAAA;MACI4G,KAAKC,KAAO1I,KAAKI,iBAAiBsI;MAClCH,OAAOF,EAAShD;MAChBsD,SAAS3I,KAAKoB;MACdwH,WAAW5I,KAAKyB;MAChBuD,KAAKqD,EAASrD;MACdE,QAAQmD,EAASnD;MACjB2D,YAAY7I,KAAKM;MACjB6E,QAAQkD,EAASlD;MACjBjC,UAAUmF,EAASnF;MACnBkC,cAAc,KAAKiD,EAASjD;MAC5B0D,OAAO9I,KAAK+I,aAAa/I,KAAK8I,QAAQE,EAAIhJ,KAAK8I,SAASpB;MACxDqB,WAAW/I,KAAK+I;MAChBE,cAAa;MAAM,WACX;MACRC,OAAOlJ,KAAKkJ;MACZC,aAAaH,EAAI,qCAAqC,EAAChJ,KAAKsE;OAE3DtE,KAAKyE,mBACF6D,EAAA;MAAA,WACY;MACRC,OAAOF,EAASpD,SAAS,KAAK;OAE9BqD,EAAA;MAAM3C,MAAK;UAGf2C,EAACc,GAAQ,MACJpJ,KAAK+E,OAAOuD,EAAA;MAASzD,MAAM7E,KAAK+E;SAAW,KAC3C/E,KAAK8I,UAAU9I,KAAK+I,aACjBT,EAAA;MAAMC,OAAM;OAAwBS,EAAIhJ,KAAK8I,WAK7DR,EAAA;MAAAzG,KAAA;MACI4G,KAAKC,KAAO1I,KAAKU,iBAAiBgI;MAClCtI,gBAAgBJ,KAAKI;MACrBS,MAAMb,KAAKa;MAAI,cACHb,KAAKqJ;MACjBR,YAAY7I,KAAKM;MACjBgJ,WAAWtJ,KAAKuJ;MAChBC,WAAWxJ,KAAKyJ;MAChBC,OAAO1J,KAAK2J;MACZC,MAAM5J,KAAK6J,eAAenC;MAC1BwB,OAAOlJ,KAAKkJ;OAEZZ,EAAA;MAAAzG,KAAA;MACIX,gBAAgBlB,KAAKkB;MACrB4I,IAAG;MACHrB,KAAKC,KAAO1I,KAAK+B,aAAa2G;MAC9B7D,MAAK;MACLiE,OAAOE,EAAI,mCAAmC,EAAChJ,KAAK+J;MAAiB;OAGrEzB,EAAA;MAAAzG,KAAA"}

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -90,7 +90,6 @@ const c = class {
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t()));
     this.scheduledAfterRender = [];
-    this.formattedValue = this.inputElement.formattedValue;
   }
   // #endregion
   // #region Listeners
@@ -122,6 +121,9 @@ const c = class {
     if (!h(t, this.hostElement)) return;
     this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
+  inputFormatted(t) {
+    this.formattedValue = t.detail.formattedValue;
+  }
   // #endregion
   // #region Public Methods API
   /**
@@ -200,19 +202,6 @@ const c = class {
   get wrapperClass() {
     return `q2-editable-field-wrapper ${this.editing ? "editing" : ""}`;
   }
-  generateEditBtn() {
-    return e("q2-btn", {
-      ref: t => this.editBtnElement = t,
-      class: "begin-edit",
-      label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
-      "hide-label": true,
-      disabled: this.disabled,
-      "test-id": "editButton",
-      onClick: this.editClick
-    }, e("q2-icon", {
-      type: "edit"
-    }));
-  }
   generateEditStateDOM() {
     return e("div", {
       class: this.wrapperClass,
@@ -262,20 +251,40 @@ const c = class {
         class: "read-state-label"
       }, this.locLabel), e("dd", null, e("span", {
         class: "text-wrapper"
-      }, this.formattedValue || this.value), this.generateEditBtn())));
+      }, this.formattedValue || this.value), e("q2-btn", {
+        ref: t => this.editBtnElement = t,
+        class: "begin-edit",
+        label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
+        "hide-label": true,
+        disabled: this.disabled,
+        "test-id": "editButton",
+        onClick: this.editClick
+      }, e("q2-icon", {
+        type: "edit"
+      })))));
     }
     return e("div", {
       class: this.wrapperClass,
       hidden: this.editing
     }, e("div", {
       class: "text-wrapper"
-    }, this.formattedValue || this.value), this.generateEditBtn());
+    }, this.formattedValue || this.value), e("q2-btn", {
+      ref: t => this.editBtnElement = t,
+      class: "begin-edit",
+      label: `${d("tecton.element.editableField.edit")} ${this.locLabel}`,
+      "hide-label": true,
+      disabled: this.disabled,
+      "test-id": "editButton",
+      onClick: this.editClick
+    }, e("q2-icon", {
+      type: "edit"
+    })));
   }
   // #endregion
   // #region Render Methods
   render() {
     return e("div", {
-      key: "255dac3b6e39618e37fc129ef0a743aca1aefc88"
+      key: "4dd832e58ab37f49b7026b6b297de802c83f630b"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {