npm - q2-tecton-elements - Versions diffs - 1.56.3 → 1.56.5 - Mend

q2-tecton-elements 1.56.3 → 1.56.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (268) hide show

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

@@ -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-c215e8ef.js";
+import { e as l, l as s } from "./index-e4c2bfff.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: "168f002a5cd55bdc1396d3ef114d80c92a8d13c6",
+    return e("div", {
+      key: "d5b8c72df149578537a747fef3133a5751205dbf",
       class: this.detailClasses
-    }, this.hasLabel && t("div", {
-      key: "fdaceee096ef59d4402e2430de25b5b8b0fc6ba3",
+    }, this.hasLabel && e("div", {
+      key: "0013f9766de1cdd2d50b8b8b2dca76361fbf1b0a",
       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: "31981818d7040be79042bb3e244557e9ed27de3d",
+    }) : ""), this.hasDescripiton && e("div", {
+      key: "a225abfc8746aa269a2db8666d629c6a39186493",
       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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as e, g as r } from "./index-7a5365e2.js";
-import { l as i, a as n, o as d } from "./index-c215e8ef.js";
+import { l as i, a as n, o as d } from "./index-e4c2bfff.js";
 /**
  * Emits specified events from a given component context with the provided detail.

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

@@ -1,35 +1,48 @@
-import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
+import { r as t, h as i, F as e, g as n } from "./index-7a5365e2.js";
 import { s as o, a as s } from "./action-sheet-1e24cb38.js";
-import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-c215e8ef.js";
+import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-e4c2bfff.js";
 const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 const p = u;
 const f = class {
-  constructor(e) {
-    t(this, e);
-    var i;
+  constructor(i) {
+    t(this, i);
+    var e;
     this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])";
+    this.optionSelector = "q2-option:not([disabled]):not([separator])";
     this.focusToggle = () => {
       this.controlElement.focus();
     };
+    this.handleFocusOut = t => {
+      var i;
+      const e = t.relatedTarget;
+      if ((i = this.popoverElement) === null || i === void 0 ? void 0 : i.contains(e)) return;
+      if (this.hostElement.contains(e)) return;
+      this.open = false;
+    };
     this.onClickElsewhere = t => {
-      const e = t.target;
-      if (e.localName === "q2-option-list") {
+      const i = t.target;
+      if (i.localName === "q2-option-list") {
         t.stopPropagation();
       }
-      if (e.localName === "click-elsewhere") {
+      if (i.localName === "click-elsewhere") {
         t.stopPropagation();
-        const {popoverElement: e} = this;
-        if (!e) return;
-        e.open = false;
+        const {popoverElement: i} = this;
+        if (!i) return;
+        i.open = false;
       }
     };
+    this.onPopoverState = t => {
+      if (t.detail.open) return;
+      this.controlElement.focus();
+    };
     this.onToggleClick = async t => {
       t.stopPropagation();
+      this.popoverElement.controlElement = this.controlElement;
       if (o(this)) {
         this._handleActionSheet(t);
       } else {
@@ -37,26 +50,16 @@ const f = class {
       }
     };
     this.onToggleKeydown = async t => {
-      const e = t.metaKey || t.ctrlKey || t.key === "Tab";
-      if (e) return;
+      const i = t.metaKey || t.ctrlKey || t.key === "Tab";
+      if (i) return;
       t.preventDefault();
+      this.popoverElement.controlElement = this.controlElement;
       if (o(this, t)) {
         this._handleActionSheet(t);
       } else {
         this.optionList.handleExternalKeydown(t);
       }
     };
-    this.onPopoverState = t => {
-      if (t.detail.open) return;
-      this.controlElement.focus();
-    };
-    this.handleFocusOut = t => {
-      var e;
-      const i = t.relatedTarget;
-      if ((e = this.popoverElement) === null || e === void 0 ? void 0 : e.contains(i)) return;
-      if (this.hostElement.contains(i)) return;
-      this.open = false;
-    };
     this.additionalContext = undefined;
     this.alignment = undefined;
     this.ariaLabel = undefined;
@@ -65,7 +68,7 @@ const f = class {
     this.contextValue = undefined;
     this.disabled = undefined;
     this.hideLabel = undefined;
-    this.hoist = !!((i = window.Tecton) === null || i === void 0 ? void 0 : i.useActionSheets);
+    this.hoist = !!((e = window.Tecton) === null || e === void 0 ? void 0 : e.useActionSheets);
     this.icon = undefined;
     this.label = undefined;
     this.name = undefined;
@@ -98,12 +101,14 @@ const f = class {
     this.focusToggle();
   }
   popoverStateChangeHandler({detail: {open: t}}) {
-    var e;
+    var i;
     if (this.open !== t) this.open = t;
-    (e = this.popoverElement) === null || e === void 0 ? void 0 : e.scrollContainerTo({
+    (i = this.popoverElement) === null || i === void 0 ? void 0 : i.scrollContainerTo({
       top: 0
     });
-    this.optionList.setActiveElement(null);
+    if (!t) {
+      this.optionList.setActiveElement(null);
+    }
   }
   // #endregion
   // #region Public Methods API
@@ -130,12 +135,12 @@ const f = class {
      * If the value does not match any item's value, this method does nothing.
      * @testOnly
      */  async selectItem(t) {
-    var e;
-    const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
-    const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".dropdown-item");
-    if (!i || this.disabled) return;
+    var i;
+    const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
+    const n = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item");
+    if (!e || this.disabled) return;
     if (!this.open) {
-      (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
+      (i = this.controlElement) === null || i === void 0 ? void 0 : i.click();
       await a();
     }
     n.click();
@@ -151,12 +156,12 @@ const f = class {
      * - Item has the `removable` property enabled
      * @testOnly
      */  async selectRemoveItem(t) {
-    var e;
-    const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
-    const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".remove-dropdown-item");
-    if (!i || !n || this.disabled) return;
+    var i;
+    const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
+    const n = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".remove-dropdown-item");
+    if (!e || !n || this.disabled) return;
     if (!this.open) {
-      (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
+      (i = this.controlElement) === null || i === void 0 ? void 0 : i.click();
       await a();
     }
     n.click();
@@ -198,14 +203,14 @@ const f = class {
   }
   get toggleButtonProps() {
     const t = [ "primary", "secondary", "neutral" ];
-    const e = [ "icon", "fab", "custom", ...t ];
-    const i = e.includes(this.type) ? this.type : "";
-    const n = i === "icon";
-    const o = i === "fab";
-    const s = i === "custom";
+    const i = [ "icon", "fab", "custom", ...t ];
+    const e = i.includes(this.type) ? this.type : "";
+    const n = e === "icon";
+    const o = e === "fab";
+    const s = e === "custom";
     let d;
-    if (t.includes(i)) {
-      d = i === "neutral" ? i : `workflow-${i}`;
+    if (t.includes(e)) {
+      d = e === "neutral" ? e : `workflow-${e}`;
     }
     const r = this.open;
     const a = !!this.disabled;
@@ -223,15 +228,16 @@ const f = class {
     };
   }
   _clickItem(t) {
-    if (!t) return;
+    var i;
+    if (!t || this.disabled) return;
     const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
-    const i = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item");
-    if (!e || this.disabled) return;
-    i.click();
+    const n = this.hostElement.querySelector(`${this.optionSelector}[value="${t}"]`);
+    (i = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item")) === null || i === void 0 ? void 0 : i.click();
+    n === null || n === void 0 ? void 0 : n.click();
   }
   async _handleActionSheet(t) {
-    const {value: e} = await s(this, t);
-    this._clickItem(e);
+    const {value: i} = await s(this, t);
+    this._clickItem(i);
     this.controlElement.focus();
   }
   _togglePopover() {
@@ -266,24 +272,24 @@ const f = class {
   }
   resolveMenuItemElements() {
     return this.resolveMenu().then((t => t.map((t => {
-      let e;
       let i;
+      let e;
       if (t["tct-ctxid"]) {
-        i = {};
-        i[t.contextIdParamName] = t["tct-ctxid"];
+        e = {};
+        e[t.contextIdParamName] = t["tct-ctxid"];
       }
       switch (t.action) {
        case "navigateTo":
-        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);
+        i = function() {
+          var i, n;
+          return (n = (i = window.TectonElements) === null || i === void 0 ? void 0 : i.navigateTo) === null || n === void 0 ? void 0 : n.call(i, t.featureName, t.moduleName, e);
         };
         break;
        case "showOverpanel":
-        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);
+        i = function() {
+          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.featureName}.${t.moduleName}`, e, undefined, true);
         };
         break;
       }
@@ -291,7 +297,7 @@ const f = class {
       n.setAttribute("value", t.itemLabel);
       n.classList.add("resolved-menu-item");
       n.textContent = t.itemLabel;
-      n.onclick = e;
+      n.onclick = i;
       return n;
     }))));
   }
@@ -299,13 +305,13 @@ const f = class {
   // #region Render Methods
   render() {
     const t = this.toggleButtonProps;
-    return e("click-elsewhere", {
-      key: "11808e45c664b956d74aa9ee15a18c147076d958",
+    return i("click-elsewhere", {
+      key: "2dbfbb36ffbb6d7a11469904c0162c6663ecc187",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
-    }, e("q2-btn", {
-      key: "a4068130a3c8e1a9243ff0516e21da65a626e284",
+    }, i("q2-btn", {
+      key: "518bb9c02c4a5287a4d3aea5c46a2beba7999d47",
       ref: t => this.controlElement = t,
       class: t.className,
       onClick: this.onToggleClick,
@@ -322,17 +328,17 @@ const f = class {
       "test-id": "dropdownButton",
       block: this.block,
       description: c("tecton.element.dropdown.itemCount", [ this.determineDropdownItemCount ])
-    }, this.hasCustomControl ? e("div", {
+    }, this.hasCustomControl ? i("div", {
       "test-id": "dropdownControl",
       class: t.custom ? "" : "hidden"
-    }, e("slot", {
+    }, i("slot", {
       name: "control"
-    })) : e(i, null, this.icon ? e("q2-icon", {
+    })) : i(e, null, this.icon ? i("q2-icon", {
       type: this.icon
-    }) : " ", this.label && !this.hideLabel && e("span", {
+    }) : " ", this.label && !this.hideLabel && i("span", {
       class: "dropdown-button-text"
-    }, c(this.label)))), e("q2-popover", {
-      key: "df7c42360681523be2584e8cf03d6ac1dfdb0270",
+    }, c(this.label)))), i("q2-popover", {
+      key: "85dd9bff87abbaed84806307a9675e6013c7a14a",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -343,16 +349,16 @@ const f = class {
       align: this.popoverAlignment,
       mode: this.popoverMode || undefined,
       block: this.block
-    }, e("q2-option-list", {
-      key: "497e375a6372566c45d2199dff0a6ef8c1df1700",
+    }, i("q2-option-list", {
+      key: "ab2e65a199faf78e1d97b82aa095d06046883d1e",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
       type: "menu",
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
-    }, e("slot", {
-      key: "cab2db6bae7a9727fca9c80f5bf6352651612d42"
+    }, i("slot", {
+      key: "1bccbc21444696f1c045c82fe4713b930f3cef71"
     }))));
   }
   get hostElement() {

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

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

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

@@ -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 d, l as r } from "./index-c215e8ef.js";
+import { a as n, o as a, i as h, w as d, l as r } from "./index-e4c2bfff.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}";

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

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