q2-tecton-elements 1.71.4 → 1.73.0

package/dist/components/q2-option-list2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Ho
 
 import { b as a } from "./component.js";
 
-import { l as h, n as r, o as c, i as l, w as d, t as p } from "./index2.js";
+import { l as r, n as h, o as l, i as c, w as d, t as p } from "./index2.js";
 
 import { m as u } from "./mirror-emit.js";
 
@@ -15,7 +15,7 @@ const b =  t(class extends e {
       lastPressedAt: new Date
     }, this.scheduledAfterRender = [], 
     /** Determines the label that is applied to the option list for accessibility purposes. */
-    this.label = h("tecton.element.optionList.label"), 
+    this.label = r("tecton.element.optionList.label"), 
     /** A list of the selected options on the element. */
     this.selectedOptions = [], 
     /** Translates to the role of the option list */
@@ -42,7 +42,7 @@ const b =  t(class extends e {
           break;
         }
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        r((() => this.popoverState.emit({
+        h((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -50,7 +50,7 @@ const b =  t(class extends e {
 
        case "Enter":
         "menu" === this.type ? (this.activeIndex = 0, this.openDropdownWithActiveElement(0)) : (this.setDefaultActiveElement(), 
-        r((() => this.popoverState.emit({
+        h((() => this.popoverState.emit({
           open: !0,
           action: "open"
         }))));
@@ -111,8 +111,8 @@ const b =  t(class extends e {
       (i || s) && t.stopPropagation();
     }, this.internalKeydownHandler = t => {
       t.stopPropagation();
-      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: a, shiftKey: h} = t;
-      let r;
+      const {activeIndex: e, customSearch: i, allOptions: s, allVisibleOptions: n, multiple: o} = this, {key: a, shiftKey: r} = t;
+      let h;
       switch (a) {
        case " ":
         if (this.searchString && !this.multiple) {
@@ -120,8 +120,8 @@ const b =  t(class extends e {
           this.searchOptions(a, !1);
           break;
         }
-        if (r = s.find((t => t.active)), !r || r.disabled) break;
-        if (this.selectOption(r), o) break;
+        if (h = s.find((t => t.active)), !h || h.disabled) break;
+        if (this.selectOption(h), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -133,8 +133,8 @@ const b =  t(class extends e {
         break;
 
        case "Enter":
-        if (r = s.find((t => t.active)), !r || r.disabled) break;
-        if (this.selectOption(r), o) break;
+        if (h = s.find((t => t.active)), !h || h.disabled) break;
+        if (this.selectOption(h), o) break;
         this.hostElement.addEventListener("tctClick", (() => {
           this.popoverState.emit({
             open: !1,
@@ -148,8 +148,8 @@ const b =  t(class extends e {
        case "ArrowUp":
        case "ArrowDown":
         // Guard: only process if an option is currently focused
-        const c = document.activeElement;
-        if (!this.allOptions.some((t => t === c))) return;
+        const l = document.activeElement;
+        if (!this.allOptions.some((t => t === l))) return;
         if (t.preventDefault(), "ArrowUp" === a) {
           if (n[0].active) break;
           if (void 0 === e) {
@@ -192,7 +192,7 @@ const b =  t(class extends e {
         break;
 
        case "Tab":
-        if (h) break;
+        if (r) break;
         if (this.multiple && "listbox" === this.type) break;
         if ("menu" === this.type) {
           this.popoverState.emit({
@@ -201,8 +201,8 @@ const b =  t(class extends e {
           });
           break;
         }
-        if (r = s.find((t => t.active)), !r || r.disabled) return;
-        this.selectOption(r);
+        if (h = s.find((t => t.active)), !h || h.disabled) return;
+        this.selectOption(h);
         break;
 
        case "Esc":
@@ -257,7 +257,7 @@ const b =  t(class extends e {
     this.hasOptions = !!this.hostElement.querySelectorAll("q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])").length;
   }
   componentDidLoad() {
-    c(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
+    l(this.hostElement), this.checkOptions(), this.selectedOptionsUpdated(), this.ready.emit();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
@@ -268,7 +268,7 @@ const b =  t(class extends e {
     t.stopPropagation();
   }
   delegateFocus(t) {
-    if (!l(t, this.hostElement)) return;
+    if (!c(t, this.hostElement)) return;
     this.popoverState.emit({
       open: !0,
       action: "open"
@@ -328,6 +328,20 @@ const b =  t(class extends e {
       "menu" === t && "q2-dropdown-item" === i.tagName.toLowerCase() || (i.role = e);
     }));
   }
+  findScrollableAncestor(t) {
+    var i, s;
+    let n = t;
+    for (;n; ) {
+      if (n instanceof e && n !== t) {
+        const t = getComputedStyle(n).overflowY;
+        // Skip html/body so page-level scroll isn't treated as our container.
+                if (("auto" === t || "scroll" === t) && n !== document.documentElement && n !== document.body) return n;
+      }
+      const o = n.assignedSlot, a = n.parentNode, r = n.host;
+      n = null !== (s = null !== (i = null != o ? o : a) && void 0 !== i ? i : r) && void 0 !== s ? s : null;
+    }
+    return null;
+  }
   focusSelectedSibling(t) {
     const {allVisibleOptions: e, allOptions: i} = this;
     if (e.length < 2) return void (this.showSelected = !1);
@@ -369,10 +383,16 @@ const b =  t(class extends e {
   scrollToActiveOption() {
     const t = this.allOptions[this.activeIndex];
     if (!t) return;
-    const {scrollX: e, scrollY: i} = window;
-    t.scrollIntoView({
-      block: "center"
-    }), window.scrollTo(e, i);
+    // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const e = this.findScrollableAncestor(t);
+    if (e) {
+      if (e.scrollHeight > e.clientHeight) {
+        const i = t.getBoundingClientRect(), s = e.getBoundingClientRect(), n = i.top - s.top + i.height / 2;
+        e.scrollTop += n - s.height / 2;
+      }
+    } else t.scrollIntoView({
+      block: "nearest"
+    });
   }
   searchOptions(t, e) {
     this.searchString = t, this.searchAndFocus(t, e);
@@ -384,15 +404,15 @@ const b =  t(class extends e {
       value: n,
       display: o
     };
-    let h = [];
+    let r = [];
     if (e) {
       const {selectedOptions: e} = this;
-      h = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, a ], 
+      r = e.find((t => t.value === n)) ? e.filter((({value: t}) => t !== n)) : [ ...e, a ], 
       s && this.focusSelectedSibling(t);
-    } else h = [ a ];
-    i ? this.setActiveElement(null) : this.selectedOptions = h, u(this, [ "change", "tctChange" ], {
+    } else r = [ a ];
+    i ? this.setActiveElement(null) : this.selectedOptions = r, u(this, [ "change", "tctChange" ], {
       value: n,
-      values: h
+      values: r
     });
   }
   setActiveOption() {
@@ -406,7 +426,7 @@ const b =  t(class extends e {
     if (!t) return;
     p(t) ? t.focus({
       preventScroll: !0
-    }) : r((() => t.focus({
+    }) : h((() => t.focus({
       preventScroll: !0
     })));
   }
@@ -427,22 +447,22 @@ const b =  t(class extends e {
   // #region Render Methods
   render() {
     return s(n, {
-      key: "14f2a8ab97077ed7b93d746b75f89b98f416a55d"
+      key: "19cadb5668db33a912951df4ec0e81a74b2b78ce"
     }, s("div", {
-      key: "1184c5d8d4cf8af63a60bef1282d6442b8539cf6",
+      key: "1d5a8f310ee97bc2189b839ee3d87e08bf0fa269",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, s("div", {
-      key: "5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70",
+      key: "24b1616962a9b544fb6215acc1e6edb4f12a5a03",
       class: "options",
-      "aria-label": h("tecton.element.optionList.label", [ this.label ]),
+      "aria-label": r("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": "menu" === this.type ? void 0 : this.multiple ? "true" : void 0,
       role: this.type || "listbox",
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, s("slot", {
-      key: "39372ab91b081ba124ff4c4dc04fc0c84be7a4ad"
+      key: "eeb0342b7c319f5f5af95daa54dcaa732c3159d9"
     }))));
   }
   get hostElement() {

package/dist/components/q2-otp.js

@@ -291,7 +291,7 @@ const f =  t(class extends e {
       block: !0,
       class: "send-code-button",
       disabled: this.disabled,
-      intent: "workflow-primary",
+      intent: "primary",
       label: this.localizedSendCodeLabel,
       onClick: this.handleSendCodeClick,
       ref: t => this.sendCodeRef = t
@@ -309,7 +309,7 @@ const f =  t(class extends e {
       block: !0,
       class: "submit-button",
       disabled: this.disabled || !this.isComplete,
-      intent: "workflow-primary",
+      intent: "primary",
       label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel,
       loading: this.isVerifying,
       onClick: this.handleSubmitClick
@@ -317,7 +317,7 @@ const f =  t(class extends e {
   }
   render() {
     return i("div", {
-      key: "80f709fb9ccac37057bc3da569e4aefa6675d864",
+      key: "8f4ada9f194f1b0995995e946097b3e24a11f605",
       "aria-busy": this.isVerifying ? "true" : void 0,
       "aria-labelledby": this.label ? this.labelId : void 0,
       class: {
@@ -331,22 +331,22 @@ const f =  t(class extends e {
       },
       role: "group"
     }, this.renderSendCodeButton(), i("div", {
-      key: "1192f341199e8fbbd2c04c3fe58d69129888410c",
+      key: "099e1ef5ccc09846faf9952772e61ff7644e5085",
       class: {
         "otp-content": !0,
         "send-code-hidden": "ready" === this.state
       }
     }, this.renderLabel(), i("div", {
-      key: "f84aa0d243808206cf31e2900e633f5c5199b197",
+      key: "5ad6ff061779de6562f523148459729d73bbf53a",
       class: "otp-control-group"
     }, i("div", {
-      key: "8e01108ff520da247f80bb2204b2620a477a652f",
+      key: "d60e93f2d79d0f4b0348a5b581647ece89e9973c",
       class: "fields-shell"
     }, i("div", {
-      key: "7f942c6fb6be407f4c43cb2349614cf33c0ec62b",
+      key: "55b515c8a04e664024dcc66e4d894dcb0ddd4ca4",
       class: "fields-container"
     }, i("input", {
-      key: "5c1df9b3ff79098f47f40f2ad14165e25a59e5d8",
+      key: "b8319da6e91ea06ff5632c72326460c0e532393d",
       "aria-describedby": this.describedBy,
       "aria-invalid": "error" === this.state ? "true" : "false",
       "aria-label": this.inputAriaLabel,

package/dist/components/q2-pagination.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as a, transformTag as n } from "@stencil/core/internal/client";
 
 import { n as s, o, i as r, a as c, l } from "./index2.js";
 
@@ -12,9 +12,9 @@ import { d as g } from "./q2-btn2.js";
 
 import { d as u } from "./q2-icon2.js";
 
-import { d as m } from "./q2-input2.js";
+import { d as f } from "./q2-input2.js";
 
-import { d as f } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
 import { d as b } from "./q2-option2.js";
 
@@ -73,8 +73,8 @@ const x =  t(class extends e {
     var e;
     if (this.disabled) return;
     if (!r(t, this.hostElement)) return;
-    const {isFullViewHidden: i, containerElement: n, inputField: a} = this;
-    i ? null === (e = n.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : a.focus();
+    const {isFullViewHidden: i, containerElement: a, inputField: n} = this;
+    i ? null === (e = a.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : n.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -196,8 +196,8 @@ const x =  t(class extends e {
     return (null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length) > 1;
   }
   get totalPages() {
-    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: n} = this;
-    return t && n && !isNaN(parseInt("" + n)) ? n : Math.ceil(e / i);
+    const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: a} = this;
+    return t && a && !isNaN(parseInt("" + a)) ? a : Math.ceil(e / i);
   }
   get totalWithDefault() {
     return this.total || 0;
@@ -212,7 +212,7 @@ const x =  t(class extends e {
   renderPerPage() {
     const t = this.perPageIncrementsArray.sort(((t, e) => t - e));
     return (void 0 === this.perPage || isNaN(this.perPage)) && (this.perPage = t[0]), 
-    this.perPageIncrements = `[${t.join(",")}]`, n("q2-select", {
+    this.perPageIncrements = `[${t.join(",")}]`, a("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: t => t.stopImmediatePropagation(),
       onTctChange: t => {
@@ -220,14 +220,14 @@ const x =  t(class extends e {
       },
       value: this.perPageIncrementsArray.includes(this.perPage) ? "" + this.perPage : void 0,
       disabled: this.disabled
-    }, t.map((t => n("q2-option", {
+    }, t.map((t => a("q2-option", {
       value: "" + t,
       display: `${l("tecton.element.pagination.view")} ${t}`
     }, `${l("tecton.element.pagination.view")} ${t}`))));
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, m = c < 2, f = c === o;
+    const {pagesOnly: e, recordsOnly: i, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: c, currentRange: p, nextRange: h, prevRange: d, showPerPageSelect: g, disabled: u} = this, f = c < 2, m = c === o;
     let b = l("tecton.element.pagination.goToNext"), v = l("tecton.element.pagination.goToPrevious");
     return e ? (v = l("tecton.element.pagination.goToPages", {
       next: c - 1,
@@ -243,13 +243,13 @@ const x =  t(class extends e {
       range: h,
       recordType: s.toLowerCase(),
       total: r
-    })), n("nav", {
-      key: "c42b191eccb70b9e3c684843cebf9f6b06f3c3b3",
+    })), a("nav", {
+      key: "647c141a9df399b3764fdc90c5ae05f113e0019d",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": l("tecton.element.pagination.title")
-    }, n("div", {
-      key: "eb03cdc19938adac4a5c44887fa7d9853c9b89ab",
+    }, a("div", {
+      key: "fd595002af27dd639391665573433783342d2aee",
       class: "description",
       "test-id": "description"
     }, e ? l("tecton.element.pagination.pages", {
@@ -259,48 +259,48 @@ const x =  t(class extends e {
       range: p,
       recordType: s.toLowerCase(),
       total: r.toLocaleString()
-    })), n("div", {
-      key: "0e9a0bcfa6545b08843423378066989cf96ad18e",
+    })), a("div", {
+      key: "da4c7137ed566532a9471a7b83a63c49c51c8e82",
       class: "controls"
-    }, n("div", {
-      key: "4ea3b0a64165885dfd1bd525527e2617e4f4d748",
+    }, a("div", {
+      key: "ef59aadb7b6cfb82707ffb1ee9e1626428a84801",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "72d72c7b974ecbca50c4259cca5028515786af5b",
+    }, a("q2-btn", {
+      key: "e5d551764bec56fed3dc34684c4ff2cdfadd95ea",
       ref: t => this.firstPageBtn = t,
       label: l("tecton.element.pagination.goToFirstPage"),
-      disabled: u || m,
-      hidden: a,
+      disabled: u || f,
+      hidden: n,
       onTctClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "26f5f8e8cf23a6d924b4a01796827fb62017809d",
+    }, a("q2-icon", {
+      key: "7423721c4c3082b8f0fdea5d6bde9fc62640fa24",
       type: "chevron-double-left"
-    })), n("q2-btn", {
-      key: "5f7845c5917137131cc6703bb59d90c842e32a7e",
+    })), a("q2-btn", {
+      key: "90b3544e9983fa652f225eda9d18d08883b31c39",
       ref: t => this.prevPageBtn = t,
       label: v,
-      disabled: u || m,
+      disabled: u || f,
       onTctClick: () => this.handlePageChange(c - 1),
       "test-id": "prevPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "e02ccf51de21789099e2b254019f962dbb5011dc",
+    }, a("q2-icon", {
+      key: "6535f2c3745421cbf1dd5750e3ab8d08288bc148",
       type: "chevron-left"
-    }))), n("div", {
-      key: "ca201f7a4382e7f3835093c4c3877f7e2a0b5150",
+    }))), a("div", {
+      key: "d4a581982a62f360e5b693a110a7d75eaf0ba24c",
       class: "input-display",
-      hidden: a
-    }, n("span", {
-      key: "c690830341a15c25e4ad5a2d2a524d876c9f7cdb",
+      hidden: n
+    }, a("span", {
+      key: "45a28afc71ee038d829cbe64550bf929210002a9",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.page")), n("div", {
-      key: "7d08062d6cd495d4025a82413b347ed87915cbce",
+    }, l("tecton.element.pagination.page")), a("div", {
+      key: "ba5df7f89aed5be2f882057d8cf344981e3f1127",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
-    }, n("q2-input", {
-      key: "e30795721d66d75dd5f349ad4d6d3ffda6023820",
+    }, a("q2-input", {
+      key: "686c5c8891bd64a40ba9abe8436475bf3ef8fd38",
       ref: t => this.inputField = t,
       type: "number",
       value: "" + c,
@@ -316,39 +316,39 @@ const x =  t(class extends e {
       "test-id": "pageInput",
       current: "page",
       disabled: u
-    })), n("span", {
-      key: "e2f1e51306298ddf428fd4e9fa665b58b2535fc8",
+    })), a("span", {
+      key: "59853a0308d1f97b6722f40c29219d887842c54c",
       "aria-hidden": "true"
-    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), n("div", {
-      key: "c7a095aaa30743441c0c4d22f55e94801b3a823f",
+    }, l("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), a("div", {
+      key: "17fa28deff49d5a3a28b6d66b5639428a309057a",
       class: "btn-group"
-    }, n("q2-btn", {
-      key: "c52d8837ec35b128a9d3f9c87766ed770edc9600",
+    }, a("q2-btn", {
+      key: "0e5eca8dc228a8285015d5941d9c4e44af5e5353",
       ref: t => this.nextPageBtn = t,
       label: b,
-      disabled: u || f,
+      disabled: u || m,
       onTctClick: () => this.handlePageChange(c + 1),
       "test-id": "nextPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "d1d802bddb426070fa1ca92a7937b8405949f01c",
+    }, a("q2-icon", {
+      key: "9a42a4961ac7efd40c176145a39f0c63540daf14",
       type: "chevron-right"
-    })), n("q2-btn", {
-      key: "357f5bf5426e6c0004b737238a3c66697fc6a672",
+    })), a("q2-btn", {
+      key: "fe0c41536c25d7deffa26fdab4f91405e5b197d6",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u || f,
-      hidden: a,
+      disabled: u || m,
+      hidden: n,
       onTctClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": !0
-    }, n("q2-icon", {
-      key: "1be92d6fa9252168baf63420271c8b8a77f41d92",
+    }, a("q2-icon", {
+      key: "5beccc87ad5ef95350cb21d969b15c0996911126",
       type: "chevron-double-right"
-    })))), n("div", {
-      key: "96ca4bc582b1dcb830bad146fbf1233f2549f256",
+    })))), a("div", {
+      key: "d60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c",
       class: "per-page",
-      hidden: a || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
+      hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
     }, g && this.renderPerPage()));
   }
   get hostElement() {
@@ -420,47 +420,47 @@ const q = x, defineCustomElement = function() {
   [ "q2-pagination", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-option", "q2-option-list", "q2-popover", "q2-select" ].forEach((t => {
     switch (t) {
      case "q2-pagination":
-      customElements.get(a(t)) || customElements.define(a(t), x);
+      customElements.get(n(t)) || customElements.define(n(t), x);
       break;
 
      case "click-elsewhere":
-      customElements.get(a(t)) || h();
+      customElements.get(n(t)) || h();
       break;
 
      case "q2-badge":
-      customElements.get(a(t)) || d();
+      customElements.get(n(t)) || d();
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || g();
+      customElements.get(n(t)) || g();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || u();
+      customElements.get(n(t)) || u();
       break;
 
      case "q2-input":
-      customElements.get(a(t)) || m();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || f();
+      customElements.get(n(t)) || m();
       break;
 
      case "q2-option":
-      customElements.get(a(t)) || b();
+      customElements.get(n(t)) || b();
       break;
 
      case "q2-option-list":
-      customElements.get(a(t)) || v();
+      customElements.get(n(t)) || v();
       break;
 
      case "q2-popover":
-      customElements.get(a(t)) || y();
+      customElements.get(n(t)) || y();
       break;
 
      case "q2-select":
-      customElements.get(a(t)) || k();
+      customElements.get(n(t)) || k();
     }
   }));
 };