q2-tecton-elements 1.52.2 → 1.54.0

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

@@ -1,31 +1,18 @@
 import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
 
-import { w as s, o, i as r, j as a, a as d, l as h } from "./index-d18e2a20.js";
+import { s as o, a as s } from "./action-sheet-1e24cb38.js";
 
-const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
+import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-504f1a9e.js";
 
-const c = l;
+const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 
-const u = class {
+const p = u;
+
+const f = class {
   constructor(e) {
     t(this, e);
+    var i;
     this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])";
-    this.closeDropdown = () => {
-      if (!this.open) return;
-      this.open = false;
-    };
-    this.focusFirstItem = async () => {
-      const t = this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);
-      if (!t) return;
-      await s();
-      t.dispatchEvent(new FocusEvent("focus"));
-    };
-    this.focusLastItem = async () => {
-      const t = this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);
-      if (!t) return;
-      await s();
-      t.dispatchEvent(new FocusEvent("focus"));
-    };
     this.focusToggle = () => {
       this.controlElement.focus();
     };
@@ -38,72 +25,34 @@ const u = class {
         e.open = false;
       }
     };
-    this.onDropdownMenuClick = async t => {
-      const e = t.target;
-      if (e.disabled || e.separator) return;
-      this.closeDropdown();
-      await s();
-      this.focusToggle();
-    };
-    this.onDropdownMenuKeydown = t => {
-      const e = t.target;
-      switch (t.key) {
-       case "Escape":
-        this.closeDropdown();
-        this.focusToggle();
-        break;
-
-       case "Tab":
-        this.closeDropdown();
-        break;
-
-       case "ArrowUp":
-        t.preventDefault();
-        this.focusAdjacentItem(e, "prev");
-        break;
-
-       case "ArrowDown":
-        t.preventDefault();
-        this.focusAdjacentItem(e, "next");
-        break;
-      }
-    };
-    this.onToggleClick = () => {
-      if (this.open) {
-        this.closeDropdown();
+    this.onToggleClick = async t => {
+      t.stopPropagation();
+      if (o(this)) {
+        this._handleActionSheet(t);
       } else {
-        this.openDropdown();
+        await this.popoverElement.toggle();
       }
     };
     this.onToggleKeydown = async t => {
-      switch (t.key) {
-       case "ArrowUp":
-        t.preventDefault();
-        this.openDropdown();
-        await s();
-        this.focusLastItem();
-        break;
-
-       case "ArrowDown":
-        t.preventDefault();
-        this.openDropdown();
-        await s();
-        this.focusFirstItem();
-        return;
-
-       case "Escape":
-        t.preventDefault();
-        this.closeDropdown();
-        break;
-
-       case "Tab":
-        if (this.open) this.closeDropdown();
-        break;
+      const e = t.metaKey || t.ctrlKey || t.key === "Tab";
+      if (e) return;
+      t.preventDefault();
+      if (o(this, t)) {
+        this._handleActionSheet(t);
+      } else {
+        this.optionList.handleExternalKeydown(t);
       }
     };
-    this.openDropdown = () => {
-      if (this.open) return;
-      this.open = true;
+    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;
@@ -113,10 +62,12 @@ const u = class {
     this.contextValue = undefined;
     this.disabled = undefined;
     this.hideLabel = undefined;
+    this.hoist = !!((i = window.Tecton) === null || i === void 0 ? void 0 : i.useActionSheets);
     this.icon = undefined;
     this.label = undefined;
     this.name = undefined;
     this.open = undefined;
+    this.optionListLabel = undefined;
     this.popDirection = undefined;
     this.popoverAlignment = "left";
     this.popoverDirection = undefined;
@@ -135,7 +86,7 @@ const u = class {
   }
   componentDidLoad() {
     this.orchestrateResolvedMenuItems();
-    o(this.hostElement);
+    d(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -143,12 +94,13 @@ const u = class {
     if (!r(t, this.hostElement)) return;
     this.focusToggle();
   }
-  popoverStateHandler({detail: {open: t}}) {
+  popoverStateChangeHandler({detail: {open: t}}) {
     var e;
     if (this.open !== t) this.open = t;
     (e = this.popoverElement) === null || e === void 0 ? void 0 : e.scrollContainerTo({
       top: 0
     });
+    this.optionList.setActiveElement(null);
   }
   // #endregion
   // #region Public Methods API
@@ -181,10 +133,10 @@ const u = class {
     if (!i || this.disabled) return;
     if (!this.open) {
       (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
-      await s();
+      await a();
     }
     n.click();
-    await s();
+    await a();
   }
   /**
      * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
@@ -202,10 +154,10 @@ const u = class {
     if (!i || !n || this.disabled) return;
     if (!this.open) {
       (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
-      await s();
+      await a();
     }
     n.click();
-    await s();
+    await a();
   }
   // #endregion
   // #region Watchers
@@ -213,10 +165,10 @@ const u = class {
     this.orchestrateResolvedMenuItems();
   }
   alignmentHandler() {
-    a(this, "alignment", "popoverAlignment");
+    h(this, "alignment", "popoverAlignment");
   }
   ariaLabelHandler() {
-    d(this);
+    l(this);
   }
   contextHandler() {
     this.orchestrateResolvedMenuItems();
@@ -228,7 +180,7 @@ const u = class {
     this.orchestrateResolvedMenuItems();
   }
   popDirectionHandler() {
-    a(this, "popDirection", "popoverDirection");
+    h(this, "popDirection", "popoverDirection");
   }
   resolvedTypeHandler() {
     this.orchestrateResolvedMenuItems();
@@ -246,27 +198,39 @@ const u = class {
     const e = [ "icon", "fab", "custom", ...t ];
     const i = e.includes(this.type) ? this.type : "";
     const n = i === "icon";
-    const s = i === "fab";
-    const o = i === "custom";
-    let r;
+    const o = i === "fab";
+    const s = i === "custom";
+    let d;
     if (t.includes(i)) {
-      r = i === "neutral" ? i : `workflow-${i}`;
+      d = i === "neutral" ? i : `workflow-${i}`;
     }
-    const a = this.open;
-    const d = !!this.disabled;
+    const r = this.open;
+    const a = !!this.disabled;
     const h = this.open;
-    const l = !n && !s && !r ? "unstyled" : "";
+    const l = !n && !o && !d ? "unstyled" : "";
     return {
       icon: n,
-      fab: s,
-      intent: r,
-      active: a,
-      disabled: d,
+      fab: o,
+      intent: d,
+      active: r,
+      disabled: a,
       ariaExpanded: h,
       className: l,
-      custom: o
+      custom: s
     };
   }
+  _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();
+  }
+  async _handleActionSheet(t) {
+    const {value: e} = await s(this, t);
+    this._clickItem(e);
+    this.controlElement.focus();
+  }
   _togglePopover() {
     const {controlElement: t} = this;
     if (!t) return;
@@ -274,28 +238,9 @@ const u = class {
     t.focus();
     t.dispatchEvent(new FocusEvent("focus"));
   }
-  focusAdjacentItem(t, e) {
-    const i = Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));
-    const n = i.indexOf(t);
-    if (n === -1) {
-      return;
-    }
-    let s = 0;
-    if (e === "next") {
-      s = n < i.length - 1 ? n + 1 : 0;
-    } else if (e === "prev") {
-      if (n > 0) {
-        s = n - 1;
-      } else {
-        s = i.length - 1;
-      }
-    }
-    const o = i[s];
-    o && o.dispatchEvent(new Event("focus"));
-  }
   navigateTo(t, e, i) {
-    var n, s;
-    return (s = (n = window.TectonElements) === null || n === void 0 ? void 0 : n.navigateTo) === null || s === void 0 ? void 0 : s.call(n, 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) {
@@ -354,27 +299,28 @@ const u = class {
   render() {
     const t = this.toggleButtonProps;
     return e("click-elsewhere", {
-      key: "9d6def955bd72208a856de2e4676adc934efea87",
+      key: "1c2b98aded57142318897faeba8985f9e45917d9",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, e("q2-btn", {
-      key: "dfb9de1b4d0762b370ae1bc06e3e89e9b8753f5a",
+      key: "6792936333c85e59ee2d2c4cdc309fc0950e76d7",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
       onKeyDown: this.onToggleKeydown,
       fab: t.fab,
       intent: t.intent,
+      onFocusout: this.handleFocusOut,
       active: t.active,
       disabled: t.disabled,
       ariaExpanded: `${!!t.ariaExpanded}`,
-      label: this.hideLabel && this.label ? h(this.label) : undefined,
+      label: this.hideLabel && this.label ? c(this.label) : undefined,
       hideLabel: this.hideLabel,
       ariaHasPopup: "menu",
       "test-id": "dropdownButton",
       block: this.block,
-      description: h("tecton.element.dropdown.itemCount", [ this.determineDropdownItemCount ])
+      description: c("tecton.element.dropdown.itemCount", [ this.determineDropdownItemCount ])
     }, this.hasCustomControl ? e("div", {
       "test-id": "dropdownControl",
       class: t.custom ? "" : "hidden"
@@ -384,25 +330,28 @@ const u = class {
       type: this.icon
     }) : " ", this.label && !this.hideLabel && e("span", {
       class: "dropdown-button-text"
-    }, h(this.label)))), e("q2-popover", {
-      key: "eb196e420c5379ff094926c230a56922beef0d76",
+    }, c(this.label)))), e("q2-popover", {
+      key: "530d3aae2d75ad09b4deba136cff0997c8a3e30b",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
       "max-height": this.popoverMaxHeight,
+      onFocusout: this.handleFocusOut,
       minHeight: this.popoverMinHeight,
       direction: this.popoverDirection,
       align: this.popoverAlignment,
       mode: this.popoverMode || undefined,
       block: this.block
-    }, e("div", {
-      key: "7289ddbab50723b054dd1fbeb033c11c2e240439",
-      onClick: this.onDropdownMenuClick,
-      onKeyDown: this.onDropdownMenuKeydown,
-      role: "menu",
-      "aria-label": h(this.label) || undefined
+    }, e("q2-option-list", {
+      key: "b5c7644d9a70b71253e1641d4b990cc60684a2ec",
+      onPopoverState: this.onPopoverState,
+      id: "option-list",
+      ref: t => this.optionList = t,
+      type: "menu",
+      label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
+      "no-select": true
     }, e("slot", {
-      key: "c04e31c427b32aca47c7fb1b2f44eb761d39a42e"
+      key: "9dad30978c5518b68e2001ba8d083541edf0b7b4"
     }))));
   }
   get hostElement() {
@@ -422,7 +371,7 @@ const u = class {
   }
 };
 
-u.style = c;
+f.style = p;
 
-export { u as q2_dropdown };
+export { f as q2_dropdown };
 //# sourceMappingURL=q2-dropdown.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","closeDropdown","open","focusFirstItem","async","firstItem","hostElement","querySelector","waitForNextPaint","dispatchEvent","FocusEvent","focusLastItem","lastItem","focusToggle","controlElement","focus","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onDropdownMenuClick","item","disabled","separator","onDropdownMenuKeydown","key","preventDefault","focusAdjacentItem","onToggleClick","openDropdown","onToggleKeydown","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateHandler","detail","_a","scrollContainerTo","top","closePopover","_togglePopover","openPopover","selectItem","value","itemBtn","shadowRoot","click","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","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","navigateTo","featureName","moduleName","queryParams","_b","window","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","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","mode","popoverMode","role"],"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 { 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\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    /** 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    /** @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    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\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    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    focusFirstItem = async () => {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n        if (!firstItem) return;\n        await waitForNextPaint();\n        firstItem.dispatchEvent(new FocusEvent('focus'));\n    };\n\n    focusLastItem = async () => {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        if (!lastItem) return;\n        await waitForNextPaint();\n        lastItem.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 HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (item.disabled || item.separator) return;\n        this.closeDropdown();\n        await waitForNextPaint();\n        this.focusToggle();\n    };\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        const item = event.target as HTMLQ2DropdownItemElement;\n        switch (event.key) {\n            case 'Escape':\n                this.closeDropdown();\n                this.focusToggle();\n                break;\n\n            case 'Tab':\n                this.closeDropdown();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'prev');\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusAdjacentItem(item, 'next');\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowUp':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusLastItem();\n                break;\n\n            case 'ArrowDown':\n                event.preventDefault();\n                this.openDropdown();\n                await waitForNextPaint();\n                this.focusFirstItem();\n                return;\n\n            case 'Escape':\n                event.preventDefault();\n                this.closeDropdown();\n                break;\n\n            case 'Tab':\n                if (this.open) this.closeDropdown();\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\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                    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                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                        role=\"menu\"\n                        aria-label={loc(this.label) || undefined}\n                    >\n                        <slot />\n                    </div>\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","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 HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onToggleClick = 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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"}

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

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, g as s } from "./index-7a5365e2.js";
 
-import { a as n, o as a, i as h, w as r, l as d } from "./index-d18e2a20.js";
+import { a as n, o as a, i as h, w as r, l as d } from "./index-504f1a9e.js";
 
 const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";