q2-tecton-elements 1.53.0 → 1.53.2

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

@@ -1,14 +1,14 @@
-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-d18e2a20.js";
+import { e as l, l as s } from "./index-504f1a9e.js";
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 
 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-item.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as o, g as e } from "./index-7a5365e2.js";
 
-import { l as r, a as i } from "./index-d18e2a20.js";
+import { l as r, a as i } from "./index-504f1a9e.js";
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item-button{--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:44px;min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-default-dropdown-item-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);flex:1;text-align:left;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, var(--comp-default-dropdown-item-padding)));background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .remove-dropdown-item:hover,:host(:not([disabled])) .remove-dropdown-item:focus,:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))))}:host(:not([disabled])) .dropdown-item:hover,:host(:not([disabled])) .dropdown-item:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item:focus,:host(:not([disabled])) .remove-dropdown-item:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}.remove-dropdown-item{flex:0 0 44px}";
 

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

@@ -1,6 +1,6 @@
 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 { w as s, o, i as r, j as a, a as d, l as h } 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-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))}";
 
@@ -293,10 +293,6 @@ const u = class {
     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);
-  }
   orchestrateResolvedMenuItems() {
     if (!this.name || !this.context) {
       // this is only for contextual menu outlets
@@ -330,11 +326,17 @@ const u = 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");
@@ -345,21 +347,17 @@ const u = 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: "9d6def955bd72208a856de2e4676adc934efea87",
+      key: "8e1168806f48fde1b2c0f549f013b3313f4bb04b",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, e("q2-btn", {
-      key: "dfb9de1b4d0762b370ae1bc06e3e89e9b8753f5a",
+      key: "bb9a31da210c6fa1afae6fbf1f0b8f98b6425ccd",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
@@ -385,7 +383,7 @@ const u = class {
     }) : " ", this.label && !this.hideLabel && e("span", {
       class: "dropdown-button-text"
     }, h(this.label)))), e("q2-popover", {
-      key: "eb196e420c5379ff094926c230a56922beef0d76",
+      key: "7d5aa6bca5b4d6b494d556c49ec0c84e6e3f37b6",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -396,13 +394,13 @@ const u = class {
       mode: this.popoverMode || undefined,
       block: this.block
     }, e("div", {
-      key: "7289ddbab50723b054dd1fbeb033c11c2e240439",
+      key: "b548e62ef46ca01018d742c443fc3aea42ab8875",
       onClick: this.onDropdownMenuClick,
       onKeyDown: this.onDropdownMenuKeydown,
       role: "menu",
       "aria-label": h(this.label) || undefined
     }, e("slot", {
-      key: "c04e31c427b32aca47c7fb1b2f44eb761d39a42e"
+      key: "ef88abd2fd3d358b3f9e3464b4b5066bb373b31e"
     }))));
   }
   get hostElement() {

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":";;;;AAAA,MAAMA,IAAgB;;AACtB,MAAAC,IAAeD;;MCWFE,IAAU;;;IAInBC,KAAAC,uBAA+B;IA2U/BD,KAAAE,gBAAgB;MACZ,KAAKF,KAAKG,MAAM;MAChBH,KAAKG,OAAO;AAAK;IA4BrBH,KAAAI,iBAAiBC;MACb,MAAMC,IAAYN,KAAKO,YAAYC,cAC/B,GAAGR,KAAKC;MAEZ,KAAKK,GAAW;YACVG;MACNH,EAAUI,cAAc,IAAIC,WAAW;AAAS;IAGpDX,KAAAY,gBAAgBP;MACZ,MAAMQ,IAAWb,KAAKO,YAAYC,cAC9B,GAAGR,KAAKC;MAEZ,KAAKY,GAAU;YACTJ;MACNI,EAASH,cAAc,IAAIC,WAAW;AAAS;IAGnDX,KAAAc,cAAc;MACVd,KAAKe,eAAeC;AAAO;IAO/BhB,KAAAiB,mBAAoBC;MAChB,MAAMC,IAASD,EAAMC;MACrB,IAAIA,EAAOC,cAAc,mBAAmB;QACxCF,EAAMG;QACN,OAAMC,gBAAEA,KAAmBtB;QAC3B,KAAKsB,GAAgB;QACrBA,EAAenB,OAAO;;;IAI9BH,KAAAuB,sBAAsBlB,MAAOa;MACzB,MAAMM,IAAON,EAAMC;MACnB,IAAIK,EAAKC,YAAYD,EAAKE,WAAW;MACrC1B,KAAKE;YACCO;MACNT,KAAKc;AAAa;IAGtBd,KAAA2B,wBAAyBT;MACrB,MAAMM,IAAON,EAAMC;MACnB,QAAQD,EAAMU;OACV,KAAK;QACD5B,KAAKE;QACLF,KAAKc;QACL;;OAEJ,KAAK;QACDd,KAAKE;QACL;;OAEJ,KAAK;QACDgB,EAAMW;QACN7B,KAAK8B,kBAAkBN,GAAM;QAC7B;;OAEJ,KAAK;QACDN,EAAMW;QACN7B,KAAK8B,kBAAkBN,GAAM;QAC7B;;;IAOZxB,KAAA+B,gBAAgB;MACZ,IAAI/B,KAAKG,MAAM;QACXH,KAAKE;aACF;QACHF,KAAKgC;;;IAIbhC,KAAAiC,kBAAkB5B,MAAOa;MACrB,QAAQA,EAAMU;OACV,KAAK;QACDV,EAAMW;QACN7B,KAAKgC;cACCvB;QACNT,KAAKY;QACL;;OAEJ,KAAK;QACDM,EAAMW;QACN7B,KAAKgC;cACCvB;QACNT,KAAKI;QACL;;OAEJ,KAAK;QACDc,EAAMW;QACN7B,KAAKE;QACL;;OAEJ,KAAK;QACD,IAAIF,KAAKG,MAAMH,KAAKE;QACpB;;;IAOZF,KAAAgC,eAAe;MACX,IAAIhC,KAAKG,MAAM;MACfH,KAAKG,OAAO;AAAI;;;;;;;;;;;;;;4BA3XiB;;;;uBA+Bb;;gBAegD;;;;EAKxE,iBAAA+B;IACIlC,KAAKmC;IACLnC,KAAKoC;IACLpC,KAAKqC;;EAGT,gBAAAC;IACItC,KAAKuC;IACLC,EAAcxC,KAAKO;;;;EAOvB,aAAAkC,CAAcvB;IACV,KAAKwB,EAAmBxB,GAAOlB,KAAKO,cAAc;IAClDP,KAAKc;;EAIT,mBAAA6B,EAAsBC,SAAQzC,MAAEA;;IAC5B,IAAIH,KAAKG,SAASA,GAAMH,KAAKG,OAAOA;KACpC0C,IAAA7C,KAAKsB,oBAAc,QAAAuB,WAAA,aAAAA,EAAEC,kBAAkB;MAAEC,KAAK;;;;;;;;;EAWlD,kBAAMC;IACF,KAAKhD,KAAKG,QAAQH,KAAKyB,UAAU;IACjCzB,KAAKiD;;;;;SAQT,iBAAMC;IACF,IAAIlD,KAAKG,QAAQH,KAAKyB,UAAU;IAChCzB,KAAKiD;;;;;;;;;SAYT,gBAAME,CAAWC;;IACb,MAAM5B,IAAOxB,KAAKO,YAAYC,cAC1B,GAAGR,KAAKC,+BAA+BmD;IAE3C,MAAMC,IAAU7B,MAAI,QAAJA,WAAI,aAAJA,EAAM8B,WAAW9C,cAAiC;IAClE,KAAKgB,KAAQxB,KAAKyB,UAAU;IAC5B,KAAKzB,KAAKG,MAAM;OACZ0C,IAAA7C,KAAKe,oBAAc,QAAA8B,WAAA,aAAAA,EAAEU;YACf9C;;IAEV4C,EAAQE;UACF9C;;;;;;;;;;;SAcV,sBAAM+C,CAAiBJ;;IACnB,MAAM5B,IAAOxB,KAAKO,YAAYC,cAC1B,GAAGR,KAAKC,+BAA+BmD;IAE3C,MAAMK,IAAejC,MAAI,QAAJA,WAAI,aAAJA,EAAM8B,WAAW9C,cAAiC;IACvE,KAAKgB,MAASiC,KAAgBzD,KAAKyB,UAAU;IAC7C,KAAKzB,KAAKG,MAAM;OACZ0C,IAAA7C,KAAKe,oBAAc,QAAA8B,WAAA,aAAAA,EAAEU;YACf9C;;IAEVgD,EAAaF;UACP9C;;;;EAOV,wBAAAiD;IACI1D,KAAKuC;;EAIT,gBAAAH;IACIuB,EAAkB3D,MAAM,aAAa;;EAIzC,gBAAAqC;IACIuB,EAAgB5D;;EAIpB,cAAA6D;IACI7D,KAAKuC;;EAIT,mBAAAuB;IACI9D,KAAKuC;;EAIT,WAAAwB;IACI/D,KAAKuC;;EAIT,mBAAAJ;IACIwB,EAAkB3D,MAAM,gBAAgB;;EAI5C,mBAAAgE;IACIhE,KAAKuC;;;;EAMT,8BAAI0B;IACA,OAAOjE,KAAKO,YAAY2D,iBAAiBlE,KAAKC,sBAAsBkE;;EAGxE,oBAAIC;IACA,SAASpE,KAAKO,YAAYC,cAAc;;EAG5C,qBAAI6D;IACA,MAAMC,IAAiB,EAAC,WAAW,aAAa;IAChD,MAAMC,IAAe,EAAC,QAAQ,OAAO,aAAaD;IAClD,MAAME,IAAOD,EAAaE,SAASzE,KAAKwE,QAAQxE,KAAKwE,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,IAAS9E,KAAKG;IACpB,MAAMsB,MAAazB,KAAKyB;IACxB,MAAMsD,IAAe/E,KAAKG;IAC1B,MAAM6E,KAAaN,MAASC,MAAQE,IAAS,aAAa;IAE1D,OAAO;MACHH;MACAC;MACAE;MACAC;MACArD;MACAsD;MACAC;MACAJ;;;EAIR,cAAA3B;IACI,OAAMlC,gBAAEA,KAAmBf;IAC3B,KAAKe,GAAgB;IACrBA,EAAewC;IACfxC,EAAeC;IACfD,EAAeL,cAAc,IAAIC,WAAW;;EAQhD,iBAAAmB,CAAkBmD,GAAuCC;IACrD,MAAMC,IAA6CC,MAAMC,KACrDrF,KAAKO,YAAY2D,iBAAiBlE,KAAKC;IAG3C,MAAMqF,IAAcH,EAAcI,QAAQN;IAE1C,IAAIK,OAAiB,GAAG;MACpB;;IAGJ,IAAIE,IAAsB;IAC1B,IAAIN,MAAc,QAAQ;MACtBM,IAAcF,IAAcH,EAAchB,SAAS,IAAImB,IAAc,IAAI;WACtE,IAAIJ,MAAc,QAAQ;MAC7B,IAAII,IAAc,GAAG;QACjBE,IAAcF,IAAc;aACzB;QACHE,IAAcL,EAAchB,SAAS;;;IAG7C,MAAMsB,IAAaN,EAAcK;IACjCC,KAAcA,EAAW/E,cAAc,IAAIgF,MAAM;;EAyBrD,UAAAC,CAAWC,GAAqBC,GAAqBC;;IACjD,QAAOC,KAAAlD,IAAAmD,OAAOC,oBAAc,QAAApD,WAAA,aAAAA,EAAE8C,gBAAU,QAAAI,WAAA,aAAAA,EAAAG,KAAArD,GAAG+C,GAAaC,GAAYC;;EA2FxE,4BAAAvD;IACI,KAAKvC,KAAKmG,SAASnG,KAAKoG,SAAS;;MAE7BpG,KAAKqG;MACL;;IAGJrG,KAAKsG,0BACAC,MAAKC;MACFxG,KAAKqG;MACLG,EAAKC,SAAQC;QACT1G,KAAKO,YAAYoG,YAAYD;AAAQ;AACvC,QAELE,OAAMC;MACH7G,KAAKqG;MACL,MAAMQ;AAAG;;EAIrB,sBAAAR;IACI,MAAMS,IAAmB9G,KAAKO,YAAY2D,iBAAiB;IAC3D4C,EAAiBL,SAAQC,KAAW1G,KAAKO,YAAYwG,YAAYL;;EAGrE,WAAAM;IACI,OACIhH,KAAKmG,QACLH,OAAOC,kBACPD,OAAOC,eAAee,YAAYhH,KAAKmG,MAAMnG,KAAKiH,cAAcjH,KAAKkH,cAAclH,KAAKmH;;EAIhG,uBAAAb;IACI,OAAOtG,KAAKgH,cAAcT,MAAKa,KACpBA,EAAMC,KAAIC;MACb,IAAIC;MACJ,IAAIzB;MACJ,IAAIwB,EAAa,cAAc;QAC3BxB,IAAc;QACdA,EAAYwB,EAAaE,sBAAsBF,EAAa;;MAGhE,QAAQA,EAAaG;OACjB,KAAK;QACDF,IAAY,MACRvH,KAAK2F,WAAW2B,EAAa1B,aAAa0B,EAAazB,YAAYC;QACvE;;OACJ,KAAK;QACDyB,IAAY,MACRvH,KAAK0H,cAAc,GAAGJ,EAAa1B,eAAe0B,EAAazB,cAAcC;QACjF;;MAGR,MAAM6B,IAAkBC,SAASC,cAAc;MAC/CF,EAAgBG,aAAa,SAASR,EAAaS;MACnDJ,EAAgBK,UAAUC,IAAI;MAC9BN,EAAgBO,cAAcZ,EAAaS;MAC3CJ,EAAgBQ,UAAUZ;MAE1B,OAAOI;AAAe;;EAKlC,aAAAD,CAAcU,GAAuBC;;IACjC,QAAOtC,KAAAlD,IAAAmD,OAAOC,oBAAc,QAAApD,WAAA,aAAAA,EAAE6E,mBAAa,QAAA3B,WAAA,aAAAA,EAAAG,KAAArD,GAAGuF,GAAeC,GAAQC,WAAW;;;;EAMpF,MAAAC;IACI,MAAMC,IAAWxI,KAAKqE;IAEtB,OACIoE,EAAA;MAAA7G,KAAA;MACI8G,OAAO1I,KAAKG,OAAO,kBAAkB;MACrCwI,UAAU3I,KAAKiB;MAAgB,WACvB;OAERwH,EAAA;MAAA7G,KAAA;MACIgH,KAAKC,KAAO7I,KAAKe,iBAAiB8H;MAClCH,OAAOF,EAASxD;MAChB8D,SAAS9I,KAAK+B;MACdgH,WAAW/I,KAAKiC;MAChB0C,KAAK6D,EAAS7D;MACdE,QAAQ2D,EAAS3D;MACjBC,QAAQ0D,EAAS1D;MACjBrD,UAAU+G,EAAS/G;MACnBsD,cAAc,KAAKyD,EAASzD;MAC5BiE,OAAOhJ,KAAKiJ,aAAajJ,KAAKgJ,QAAQE,EAAIlJ,KAAKgJ,SAASV;MACxDW,WAAWjJ,KAAKiJ;MAChBE,cAAa;MAAM,WACX;MACRC,OAAOpJ,KAAKoJ;MACZC,aAAaH,EAAI,qCAAqC,EAAClJ,KAAKiE;OAE3DjE,KAAKoE,mBACFqE,EAAA;MAAA,WACY;MACRC,OAAOF,EAAS5D,SAAS,KAAK;OAE9B6D,EAAA;MAAMtC,MAAK;UAGfsC,EAACa,GAAQ,MACJtJ,KAAK0E,OAAO+D,EAAA;MAASjE,MAAMxE,KAAK0E;SAAW,KAC3C1E,KAAKgJ,UAAUhJ,KAAKiJ,aACjBR,EAAA;MAAMC,OAAM;OAAwBQ,EAAIlJ,KAAKgJ,WAK7DP,EAAA;MAAA7G,KAAA;MACIgH,KAAKC,KAAO7I,KAAKsB,iBAAiBuH;MAClC9H,gBAAgBf,KAAKe;MACrBZ,MAAMH,KAAKG;MAAI,cACHH,KAAKuJ;MACjBC,WAAWxJ,KAAKyJ;MAChBvE,WAAWlF,KAAK0J;MAChBC,OAAO3J,KAAK4J;MACZC,MAAM7J,KAAK8J,eAAexB;MAC1Bc,OAAOpJ,KAAKoJ;OAEZX,EAAA;MAAA7G,KAAA;MACIkH,SAAS9I,KAAKuB;MACdwH,WAAW/I,KAAK2B;MAChBoI,MAAK;MAAM,cACCb,EAAIlJ,KAAKgJ,UAAUV;OAE/BG,EAAA;MAAA7G,KAAA"}
+{"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","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","window","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","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 {\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    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 = 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                    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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"}

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}";
 
@@ -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() {

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

@@ -1 +1 @@
-{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditBtn","h","ref","el","class","disabled","onClick","type","generateEditStateDOM","hidden","hideLabel","undefined","formatModifier","maxlength","onInput","onChange","onKeyDown","generateReadStateDOM","persistentLabel","render"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\ninterface IExtendedQ2InputElement extends HTMLQ2InputElement {\n    formattedValue: IFormatterValueObject['formattedValue'];\n}\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    // #region Own Properties\n\n    cancelBtnElement: HTMLQ2BtnElement;\n    defaultValue: string;\n    editBtnElement: HTMLQ2BtnElement;\n    innerValue: string;\n    inputElement: HTMLQ2InputElement;\n    saveBtnElement: HTMLQ2BtnElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\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    /** Disables the edit button and field. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true })\n    editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true })\n    persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true })\n    truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true })\n    type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event()\n    change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event()\n    input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n\n        this.defaultValue = this.value;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.formattedValue = (this.inputElement as IExtendedQ2InputElement).formattedValue;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        queueMicrotask(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    generateEditBtn() {\n        return (\n            <q2-btn\n                ref={el => (this.editBtnElement = el)}\n                class=\"begin-edit\"\n                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                hide-label\n                disabled={this.disabled}\n                test-id=\"editButton\"\n                onClick={this.editClick}\n            >\n                <q2-icon type=\"edit\" />\n            </q2-btn>\n        );\n    }\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            {this.generateEditBtn()}\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                {this.generateEditBtn()}\n            </div>\n        );\n    }\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2EditableFieldCss","Q2EditableFieldStyle0","Q2EditableField","this","scheduledAfterRender","cancelClick","event","stopPropagation","change","emit","editing","name","inputElement","setValue","defaultValue","editClick","inputChange","e","inputClick","inputInput","input","detail","formattedValue","innerValue","value","inputKeyDown","key","preventDefault","saveClick","valueFromInputProp","hostElement","shadowRoot","querySelector","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","onHostElementChange","isEventFromElement","onchange","queueMicrotask","hasErrors","focus","delegateFocus","inputFormatted","clickCancel","_a","cancelBtnElement","click","clickEdit","editBtnElement","clickSave","saveBtnElement","options","waitForNextPaint","ariaLabelObserver","observesEditing","newValue","oldValue","push","errorsObserver","focusedElement","activeElement","isInputFocused","tagName","Array","isArray","errors","length","hasHints","hints","locLabel","label","loc","wrapperClass","generateEditStateDOM","h","class","hidden","ref","el","hideLabel","undefined","type","disabled","formatModifier","maxlength","onInput","onChange","onKeyDown","onClick","generateReadStateDOM","persistentLabel","render"],"sources":["src/components/q2-editable-field/q2-editable-field.scss?tag=q2-editable-field&encapsulation=shadow","src/components/q2-editable-field/q2-editable-field.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline-block;\n    max-width: 100%;\n}\n\n.q2-editable-field-wrapper:not([hidden]) {\n    display: flex;\n}\n\n.q2-editable-field-wrapper.editing {\n    align-items: flex-end;\n}\n\n:host([block]) {\n    display:block;\n    width: 100%;\n    .q2-editable-field-wrapper:not([hidden]) {\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n    }\n}\n\nq2-input,\n.text-wrapper {\n    margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;\n}\n\nq2-input {\n    flex: 1 1 auto;\n    min-width: 170px;\n}\n\n.text-wrapper {\n    flex: 0 auto;\n    align-self: center;\n    display: inline-block;\n}\n\n:host([truncated]) .text-wrapper {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nq2-btn {\n    flex: 0 0 44px;\n}\n\ndl {\n    margin: var(--tct-scale-0, var(--app-scale-0x, 0));\n}\n\ndt {\n    font-weight: 600;\n}\n\ndd {\n    margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));\n    display: flex;\n    align-items: center;\n}\n","import { Component, State, Prop, h, Listen, Element, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent } from 'src/components';\nimport { handleAriaLabel, isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { Q2Input } from '../q2-input/q2-input';\nimport { IFormatterValueObject } from '../q2-input/q2-input-types';\n\n@Component({ tag: 'q2-editable-field', shadow: true, styleUrl: 'q2-editable-field.scss' })\nexport class Q2EditableField {\n    // #region Own Properties\n\n    cancelBtnElement: HTMLQ2BtnElement;\n    defaultValue: string;\n    editBtnElement: HTMLQ2BtnElement;\n    innerValue: string;\n    inputElement: HTMLQ2InputElement;\n    saveBtnElement: HTMLQ2BtnElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\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    /** Disables the edit button and field. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Controls the edit state of the element. */\n    @Prop({ reflect: true, mutable: true })\n    editing: boolean = false;\n\n    /**\n     * Determines the `errors` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    errors: string[];\n\n    /**\n     * Determines the `formatModifier` applied to the `q2-input` element.\n     * @info\n     * Only applicable when `type=\"currency\"`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Hide's the field's `<label>` element from view. */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Determines the `hints` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop()\n    hints: string[];\n\n    /**\n     * The visible descriptor for the element.\n     * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string = '';\n\n    /**\n     * Determines the `maxLength` applied to the `q2-input`.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.\n     */\n    @Prop({ reflect: true })\n    maxlength: number;\n\n    /** Displays the provided label in the read state. */\n    @Prop({ reflect: true })\n    persistentLabel: boolean;\n\n    /** Shortens long values with ellipses instead of splitting into multiple lines. */\n    @Prop({ reflect: true })\n    truncated: boolean;\n\n    /**\n     * Determines the `type` applied to the `q2-input` element.\n     *\n     * See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.\n     */\n    @Prop({ reflect: true })\n    type: Q2Input['type'];\n\n    /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */\n    @Prop({ reflect: true, mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.\n     *\n     * The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.\n     *@info\n     * If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.\n     */\n    @Event()\n    change: EventEmitter<{\n        editing: boolean;\n        name: 'edit' | 'cancel' | 'save';\n        value?: string;\n        formattedValue?: string;\n    }>;\n\n    /**\n     * Emitted when the user updates the `q2-input` element in the editing state.\n     */\n    @Event()\n    input: EventEmitter<{ formattedValue: string; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n\n        this.defaultValue = this.value;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange) return;\n        queueMicrotask(() => {\n            switch (event.detail.name) {\n                case 'save':\n                    if (this.hasErrors) {\n                        this.inputElement.focus();\n                        break;\n                    }\n                    this.value = event.detail.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'cancel':\n                    this.inputElement.value = this.value;\n                    this.editing = event.detail.editing;\n                    break;\n\n                case 'edit':\n                    this.editing = event.detail.editing;\n                    break;\n            }\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>(this.editing ? 'q2-input' : 'q2-btn.begin-edit').focus();\n    }\n\n    @Listen('formatted')\n    inputFormatted(event: CustomEvent<IFormatterValueObject>) {\n        this.formattedValue = event.detail.formattedValue;\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the cancel button, which will hide the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickCancel() {\n        if (!this.editing) return;\n        this.cancelBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, which will display the `<q2-input>` field.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickEdit() {\n        if (this.editing) return;\n        this.editBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.\n     *\n     * @testOnly\n     */\n    @Method()\n    clickSave() {\n        if (!this.editing) return;\n        this.saveBtnElement?.click();\n    }\n\n    /**\n     * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.\n     *\n     * If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\\\n     * `change` event will be emitted.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(value: string, options: { clickSave?: boolean } = { clickSave: true }) {\n        await this.clickEdit();\n        await waitForNextPaint();\n\n        await this.inputElement.setValue(value);\n\n        if (options.clickSave) {\n            await this.clickSave();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('editing')\n    observesEditing(newValue: boolean, oldValue: boolean) {\n        if (newValue === oldValue) return;\n        this.scheduledAfterRender.push(this.hostElement.focus);\n    }\n\n    @Watch('errors')\n    errorsObserver() {\n        const { editing, hasErrors } = this;\n        const focusedElement = this.hostElement.shadowRoot.activeElement;\n        const isInputFocused = focusedElement?.tagName === 'Q2-INPUT';\n        if (isInputFocused || !focusedElement || !editing || !hasErrors) return;\n        this.inputElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasErrors(): boolean {\n        return Array.isArray(this.errors) && !!this.errors.length;\n    }\n\n    get hasHints(): boolean {\n        return Array.isArray(this.hints) && !!this.hints.length;\n    }\n\n    get locLabel() {\n        return (this.label && loc(this.label)) || '';\n    }\n\n    get wrapperClass() {\n        return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;\n    }\n\n    cancelClick = (event?: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: false, name: 'cancel' });\n        this.inputElement.setValue(this.defaultValue);\n    };\n\n    editClick = (event: MouseEvent) => {\n        event?.stopPropagation();\n        this.change.emit({ editing: true, name: 'edit' });\n    };\n\n    generateEditStateDOM() {\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={!this.editing}\n            >\n                <q2-input\n                    ref={el => (this.inputElement = el)}\n                    label={this.locLabel}\n                    hideLabel={this.hideLabel}\n                    value={this.value}\n                    hints={this.hasHints ? this.hints : undefined}\n                    errors={this.hasErrors ? this.errors : undefined}\n                    type={this.type}\n                    disabled={this.disabled}\n                    formatModifier={this.formatModifier}\n                    maxlength={this.maxlength}\n                    test-id=\"editableInput\"\n                    onInput={this.inputInput}\n                    onChange={this.inputChange}\n                    onKeyDown={this.inputKeyDown}\n                    onClick={this.inputClick}\n                />\n                <q2-btn\n                    ref={el => (this.cancelBtnElement = el)}\n                    class=\"cancel-edit\"\n                    label={`${loc('tecton.element.editableField.cancel')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"cancelButton\"\n                    onClick={this.cancelClick}\n                >\n                    <q2-icon type=\"close\" />\n                </q2-btn>\n                <q2-btn\n                    ref={el => (this.saveBtnElement = el)}\n                    class=\"save-edit\"\n                    label={`${loc('tecton.element.editableField.save')} ${this.locLabel}`}\n                    hide-label\n                    test-id=\"saveButton\"\n                    onClick={this.saveClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    generateReadStateDOM() {\n        if (this.persistentLabel && this.locLabel) {\n            return (\n                <div\n                    class={this.wrapperClass}\n                    hidden={this.editing}\n                >\n                    <dl>\n                        <dt class=\"read-state-label\">{this.locLabel}</dt>\n                        <dd>\n                            <span class=\"text-wrapper\">{this.formattedValue || this.value}</span>\n                            <q2-btn\n                                ref={el => (this.editBtnElement = el)}\n                                class=\"begin-edit\"\n                                label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                                hide-label\n                                disabled={this.disabled}\n                                test-id=\"editButton\"\n                                onClick={this.editClick}\n                            >\n                                <q2-icon type=\"edit\" />\n                            </q2-btn>\n                        </dd>\n                    </dl>\n                </div>\n            );\n        }\n        return (\n            <div\n                class={this.wrapperClass}\n                hidden={this.editing}\n            >\n                <div class=\"text-wrapper\">{this.formattedValue || this.value}</div>\n                <q2-btn\n                    ref={el => (this.editBtnElement = el)}\n                    class=\"begin-edit\"\n                    label={`${loc('tecton.element.editableField.edit')} ${this.locLabel}`}\n                    hide-label\n                    disabled={this.disabled}\n                    test-id=\"editButton\"\n                    onClick={this.editClick}\n                >\n                    <q2-icon type=\"edit\" />\n                </q2-btn>\n            </div>\n        );\n    }\n\n    inputChange = (e: CustomEvent) => {\n        e.stopPropagation();\n    };\n\n    inputClick = (event: MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    inputInput = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n        event.stopPropagation();\n        this.input.emit(event.detail);\n        this.formattedValue = event.detail.formattedValue;\n        this.innerValue = event.detail.value;\n    };\n\n    inputKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' || e.key === 'Esc') {\n            e.preventDefault();\n            this.cancelClick();\n            return;\n        }\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            this.saveClick();\n            return;\n        }\n    };\n\n    saveClick = (event?: MouseEvent) => {\n        event && event.stopPropagation();\n        const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;\n        this.defaultValue = valueFromInputProp;\n        this.change.emit({\n            editing: false,\n            name: 'save',\n            value: this.innerValue || valueFromInputProp,\n            formattedValue: this.formattedValue || valueFromInputProp,\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div>\n                {this.generateEditStateDOM()}\n                {this.generateReadStateDOM()}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAqB;;AAC3B,MAAAC,IAAeD;;MCMFE,IAAe;;;;;IASxBC,KAAAC,uBAAuC;IAwRvCD,KAAAE,cAAeC;MACXA,MAAK,QAALA,WAAK,aAALA,EAAOC;MACPJ,KAAKK,OAAOC,KAAK;QAAEC,SAAS;QAAOC,MAAM;;MACzCR,KAAKS,aAAaC,SAASV,KAAKW;AAAa;IAGjDX,KAAAY,YAAaT;MACTA,MAAK,QAALA,WAAK,aAALA,EAAOC;MACPJ,KAAKK,OAAOC,KAAK;QAAEC,SAAS;QAAMC,MAAM;;AAAS;IAkGrDR,KAAAa,cAAeC;MACXA,EAAEV;AAAiB;IAGvBJ,KAAAe,aAAcZ;MACVA,EAAMC;AAAiB;IAG3BJ,KAAAgB,aAAcb;MACVA,EAAMC;MACNJ,KAAKiB,MAAMX,KAAKH,EAAMe;MACtBlB,KAAKmB,iBAAiBhB,EAAMe,OAAOC;MACnCnB,KAAKoB,aAAajB,EAAMe,OAAOG;AAAK;IAGxCrB,KAAAsB,eAAgBR;MACZ,IAAIA,EAAES,QAAQ,YAAYT,EAAES,QAAQ,OAAO;QACvCT,EAAEU;QACFxB,KAAKE;QACL;;MAGJ,IAAIY,EAAES,QAAQ,SAAS;QACnBT,EAAEU;QACFxB,KAAKyB;QACL;;;IAIRzB,KAAAyB,YAAatB;MACTA,KAASA,EAAMC;MACf,MAAMsB,IAAqB1B,KAAK2B,YAAYC,WAAWC,cAAc,YAAYR;MACjFrB,KAAKW,eAAee;MACpB1B,KAAKK,OAAOC,KAAK;QACbC,SAAS;QACTC,MAAM;QACNa,OAAOrB,KAAKoB,cAAcM;QAC1BP,gBAAgBnB,KAAKmB,kBAAkBO;;AACzC;;;;;mBAzYa;;;;;iBAsCH;;;;;iBA4BA;;;;EA6BhB,iBAAAI;IACIC,EAAgB/B;IAEhBA,KAAKW,eAAeX,KAAKqB;;EAG7B,gBAAAW;IACIC,EAAcjC,KAAK2B;;EAGvB,kBAAAO;IACIlC,KAAKC,qBAAqBkC,SAAQC,KAAMA;IACxCpC,KAAKC,uBAAuB;;;;EAOhC,mBAAAoC,CAAoBlC;IAChB,KAAKmC,EAAmBnC,GAAOH,KAAK2B,gBAAgB3B,KAAK2B,YAAYY,UAAU;IAC/EC,gBAAe;MACX,QAAQrC,EAAMe,OAAOV;OACjB,KAAK;QACD,IAAIR,KAAKyC,WAAW;UAChBzC,KAAKS,aAAaiC;UAClB;;QAEJ1C,KAAKqB,QAAQlB,EAAMe,OAAOG;QAC1BrB,KAAKO,UAAUJ,EAAMe,OAAOX;QAC5B;;OAEJ,KAAK;QACDP,KAAKS,aAAaY,QAAQrB,KAAKqB;QAC/BrB,KAAKO,UAAUJ,EAAMe,OAAOX;QAC5B;;OAEJ,KAAK;QACDP,KAAKO,UAAUJ,EAAMe,OAAOX;QAC5B;;;;EAMhB,aAAAoC,CAAcxC;IACV,KAAKmC,EAAmBnC,GAAOH,KAAK2B,cAAc;IAClD3B,KAAK2B,YAAYC,WAAWC,cAA2B7B,KAAKO,UAAU,aAAa,qBAAqBmC;;EAI5G,cAAAE,CAAezC;IACXH,KAAKmB,iBAAiBhB,EAAMe,OAAOC;;;;;;;;;EAYvC,WAAA0B;;IACI,KAAK7C,KAAKO,SAAS;KACnBuC,IAAA9C,KAAK+C,sBAAgB,QAAAD,WAAA,aAAAA,EAAEE;;;;;;SAS3B,SAAAC;;IACI,IAAIjD,KAAKO,SAAS;KAClBuC,IAAA9C,KAAKkD,oBAAc,QAAAJ,WAAA,aAAAA,EAAEE;;;;;;SASzB,SAAAG;;IACI,KAAKnD,KAAKO,SAAS;KACnBuC,IAAA9C,KAAKoD,oBAAc,QAAAN,WAAA,aAAAA,EAAEE;;;;;;;;;SAYzB,cAAMtC,CAASW,GAAegC,IAAmC;IAAEF,WAAW;;UACpEnD,KAAKiD;UACLK;UAEAtD,KAAKS,aAAaC,SAASW;IAEjC,IAAIgC,EAAQF,WAAW;YACbnD,KAAKmD;YACLG;;;;;EAQd,iBAAAC;IACIxB,EAAgB/B;;EAIpB,eAAAwD,CAAgBC,GAAmBC;IAC/B,IAAID,MAAaC,GAAU;IAC3B1D,KAAKC,qBAAqB0D,KAAK3D,KAAK2B,YAAYe;;EAIpD,cAAAkB;IACI,OAAMrD,SAAEA,GAAOkC,WAAEA,KAAczC;IAC/B,MAAM6D,IAAiB7D,KAAK2B,YAAYC,WAAWkC;IACnD,MAAMC,KAAiBF,MAAc,QAAdA,WAAc,aAAdA,EAAgBG,aAAY;IACnD,IAAID,MAAmBF,MAAmBtD,MAAYkC,GAAW;IACjEzC,KAAKS,aAAaiC;;;;EAMtB,aAAID;IACA,OAAOwB,MAAMC,QAAQlE,KAAKmE,aAAanE,KAAKmE,OAAOC;;EAGvD,YAAIC;IACA,OAAOJ,MAAMC,QAAQlE,KAAKsE,YAAYtE,KAAKsE,MAAMF;;EAGrD,YAAIG;IACA,OAAQvE,KAAKwE,SAASC,EAAIzE,KAAKwE,UAAW;;EAG9C,gBAAIE;IACA,OAAO,6BAA6B1E,KAAKO,UAAU,YAAY;;EAcnE,oBAAAoE;IACI,OACIC,EAAA;MACIC,OAAO7E,KAAK0E;MACZI,SAAS9E,KAAKO;OAEdqE,EAAA;MACIG,KAAKC,KAAOhF,KAAKS,eAAeuE;MAChCR,OAAOxE,KAAKuE;MACZU,WAAWjF,KAAKiF;MAChB5D,OAAOrB,KAAKqB;MACZiD,OAAOtE,KAAKqE,WAAWrE,KAAKsE,QAAQY;MACpCf,QAAQnE,KAAKyC,YAAYzC,KAAKmE,SAASe;MACvCC,MAAMnF,KAAKmF;MACXC,UAAUpF,KAAKoF;MACfC,gBAAgBrF,KAAKqF;MACrBC,WAAWtF,KAAKsF;MAAS,WACjB;MACRC,SAASvF,KAAKgB;MACdwE,UAAUxF,KAAKa;MACf4E,WAAWzF,KAAKsB;MAChBoE,SAAS1F,KAAKe;QAElB6D,EAAA;MACIG,KAAKC,KAAOhF,KAAK+C,mBAAmBiC;MACpCH,OAAM;MACNL,OAAO,GAAGC,EAAI,0CAA0CzE,KAAKuE;MAAU;MAAA,WAE/D;MACRmB,SAAS1F,KAAKE;OAEd0E,EAAA;MAASO,MAAK;SAElBP,EAAA;MACIG,KAAKC,KAAOhF,KAAKoD,iBAAiB4B;MAClCH,OAAM;MACNL,OAAO,GAAGC,EAAI,wCAAwCzE,KAAKuE;MAAU;MAAA,WAE7D;MACRmB,SAAS1F,KAAKyB;OAEdmD,EAAA;MAASO,MAAK;;;EAM9B,oBAAAQ;IACI,IAAI3F,KAAK4F,mBAAmB5F,KAAKuE,UAAU;MACvC,OACIK,EAAA;QACIC,OAAO7E,KAAK0E;QACZI,QAAQ9E,KAAKO;SAEbqE,EAAA,YACIA,EAAA;QAAIC,OAAM;SAAoB7E,KAAKuE,WACnCK,EAAA,YACIA,EAAA;QAAMC,OAAM;SAAgB7E,KAAKmB,kBAAkBnB,KAAKqB,QACxDuD,EAAA;QACIG,KAAKC,KAAOhF,KAAKkD,iBAAiB8B;QAClCH,OAAM;QACNL,OAAO,GAAGC,EAAI,wCAAwCzE,KAAKuE;QAAU;QAErEa,UAAUpF,KAAKoF;QAAQ,WACf;QACRM,SAAS1F,KAAKY;SAEdgE,EAAA;QAASO,MAAK;;;IAOtC,OACIP,EAAA;MACIC,OAAO7E,KAAK0E;MACZI,QAAQ9E,KAAKO;OAEbqE,EAAA;MAAKC,OAAM;OAAgB7E,KAAKmB,kBAAkBnB,KAAKqB,QACvDuD,EAAA;MACIG,KAAKC,KAAOhF,KAAKkD,iBAAiB8B;MAClCH,OAAM;MACNL,OAAO,GAAGC,EAAI,wCAAwCzE,KAAKuE;MAAU;MAErEa,UAAUpF,KAAKoF;MAAQ,WACf;MACRM,SAAS1F,KAAKY;OAEdgE,EAAA;MAASO,MAAK;;;;;EAkD9B,MAAAU;IACI,OACIjB,EAAA;MAAArD,KAAA;OACKvB,KAAK2E,wBACL3E,KAAK2F"}

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

@@ -131,7 +131,7 @@ const d = class {
   }
   render() {
     return n(o, {
-      key: "e4df51465f7c14e0ff4ae2463613e73cc6100318",
+      key: "2a8810e8b8152257cb5f710570a7b60708f76bde",
       attribute: "navigation"
     }, this.renderMenuInner());
   }