q2-tecton-elements 1.54.5 → 1.55.1

package/dist/q2-tecton-elements/q2-month-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as n, g as o } from "./index-7a5365e2.js";
 
-import { l as a, o as i } from "./index-504f1a9e.js";
+import { l as a, o as i } from "./index-f2a66217.js";
 
 const r = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 
@@ -124,54 +124,54 @@ const s = class {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "a25f142e55a4b9fa27dd0be8a50a965ba79bb544",
+      key: "9208eb9402c7bd1d9a9d52db3153d4b027e2d676",
       class: "month-container",
       onKeyDown: this.onMonthKeydown
     }, n("div", {
-      key: "14c16da95a5ff20603d87e8f5bec76037d2df0dc",
+      key: "e6a68034e723e758d9c9824d1a88aeefa73d4ef5",
       class: "navigation"
     }, n("q2-btn", {
-      key: "f42fcd35aa88a0fd9455e2b10fa9f71d9e706727",
+      key: "552ca23bfaedc6a787ca78b6db0c027f13b94713",
       class: "year-btn",
       onClick: () => this.viewChange.emit({
         view: "year",
         selectedYear: this.year
       })
     }, n("span", {
-      key: "48482c7f65b28b1caa86d06d04f5c0294e4effb4",
+      key: "758eeb0b67194fb19c191965684ec1f96663fb0e",
       class: "year"
     }, this.year), n("q2-icon", {
-      key: "e0dea457dbbeb54609bc75d4b5215893853874bc",
+      key: "c510bb62e965091cf52213ca7ea6b14fd5f00746",
       class: "year-icon off",
       type: "chevron-down"
     })), n("div", {
-      key: "24b722a65945224c964e54944ad810da3ae077e3",
+      key: "b523d3a4d99316266e494b1375ba0f7630e5a2b5",
       class: "month-controller"
     }, n("div", {
-      key: "a101dbfe3b8e3a071e3b835eddc1b39455391ab5",
+      key: "22ad01820573025add8690107ad17a173fee2551",
       class: "cal-year-prev-next"
     }, n("q2-btn", {
-      key: "8895ef11b257dc13295939d0b8cd2ab933016cd2",
+      key: "9305d7ea801adc18e2fa613f395c2ad3bcaf16b8",
       label: a("tecton.element.calendar.previousYear"),
       "hide-label": true,
       class: "cal-nav-btn prev-year",
       "test-id": "previousYearButton",
       onClick: () => this.selectYear(this.year - 1)
     }, n("q2-icon", {
-      key: "af38ef5e10c5754e4a0f57a3131e7c12b6792a89",
+      key: "01e0409616245ff1f468a3945bf570697a745f7c",
       type: "arrow-left"
     })), n("q2-btn", {
-      key: "03a9b7c64770e77affe5eb60e165e46f63b6d6b6",
+      key: "c89e7e4c668ab6c69caa767746e9eccbc127e321",
       label: a("tecton.element.calendar.nextYear"),
       "hide-label": true,
       class: "cal-nav-btn next-year",
       "test-id": "nextYearButton",
       onClick: () => this.selectYear(this.year + 1)
     }, n("q2-icon", {
-      key: "951ecf4a0c546878351fef33efbfaa641c451c8e",
+      key: "d15cd07ed6ecc9d0ca4f6b2c1c66e7804195a912",
       type: "arrow-right"
     }))))), n("div", {
-      key: "48084e3520d2ab0a3dd0f59387e4d4183d958679",
+      key: "bc5f547b283296e8caff1d10ab0babd269ff5d80",
       class: "month-list",
       onClick: this.onMonthSelection
     }, this.months.map(((t, e) => n("div", {
@@ -183,7 +183,7 @@ const s = class {
       "aria-label": t.label,
       tabindex: e === this.focusedIndex ? 0 : -1
     }, t.abbr))))), this.today && n("div", {
-      key: "5a18fa4aef615742b863fd96c3066964186b8f92",
+      key: "1ad90d319a3589309eec05791fe289c5a8813df9",
       class: "today-label"
     }, a("tecton.element.calendar.today"), ": ", this.today));
   }

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

@@ -1,12 +1,12 @@
 import { r as t, h as e, g as r } from "./index-7a5365e2.js";
 
-import { c as o, l as a } from "./index-504f1a9e.js";
+import { c as o, l as a } from "./index-f2a66217.js";
 
 const i = "*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
 const s = i;
 
-const d = class {
+const p = class {
   constructor(e) {
     t(this, e);
     // #region Own Properties
@@ -56,20 +56,20 @@ const d = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "306cf0d06e8664a616974421d45a3083235bc03b",
+      key: "72e78e35e909a826dbff58572ccf2eb922992ad8",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
     }, e("div", {
-      key: "738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e",
+      key: "3c25d95961cf0b41f1633782647a708043033bea",
       class: "q2-optgroup-header",
       id: this.headerId
     }, this.label && a(this.label) || ""), e("div", {
-      key: "cff8fad7e158854df77ad3d9cb85ea578aa0edc5",
+      key: "126e87b4daeb27564289a5c183f2fa155f8b086f",
       class: "q2-optgroup-options"
     }, e("slot", {
-      key: "d5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c"
+      key: "21e7c0f8f8992915b029343ce917ebb20f0579b5"
     })));
   }
   get hostElement() {
@@ -82,7 +82,7 @@ const d = class {
   }
 };
 
-d.style = s;
+p.style = s;
 
-export { d as q2_optgroup };
+export { p as q2_optgroup };
 //# sourceMappingURL=q2-optgroup.entry.js.map

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, H as s, g as o } from "./index-7a5365e2.js";
 
-import { n, l as r, o as a, i as h, w as c, v as l, h as p } from "./index-504f1a9e.js";
+import { n, l as r, o as a, i as h, w as c, v as l, h as p } from "./index-f2a66217.js";
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -878,17 +878,17 @@ const w = class {
     if (this.show) t.push("show");
     if (this.mode === "legacy") t.push("legacy");
     return i("div", {
-      key: "ec69329181e23e7c8f46fc2d2f5b9453f0f866d1",
+      key: "dec077f6a9efa7573210773db9eca95d48fb527b",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1
     }, i("div", {
-      key: "7814ab2ab64fe363d76d1ed34005b7512c877d17",
+      key: "4e7ad06454bddbc6443922b4dac5d27f50a8b2c8",
       ref: t => this.contentElement = t,
       class: "content"
     }, i("slot", {
-      key: "7a3fec41c603d97be3bcaa0d7fd48c0517b92f7c"
+      key: "9128e4469499778c779b32561547358e1f6bd747"
     })));
   }
   get hostElement() {

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

@@ -1,32 +1,27 @@
-import { r as t, c as i, h as e, H as a, g as s } from "./index-7a5365e2.js";
+import { r as t, c as e, h as i, H as o, g as a } from "./index-7a5365e2.js";
 
-import { u as o, l as n } from "./index-504f1a9e.js";
+import { u as s, l as n } from "./index-f2a66217.js";
 
 const r = '*{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(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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-gray-11, #cccccc))}';
 
 const c = r;
 
 const d = class {
-  constructor(e) {
-    t(this, e);
-    this.displayChanged = i(this, "displayChanged", 7);
-    this.tctClick = i(this, "tctClick", 7);
+  constructor(i) {
+    t(this, i);
+    this.displayChanged = e(this, "displayChanged", 7);
+    this.tctClick = e(this, "tctClick", 7);
     // #endregion
     // #region Local Methods
-        this.handleTextContent = async () => {
+        this.initDisplay = async () => {
       if (this.multiline) return;
-      const t = await o(this.hostElement);
-      if (this.display === t) return;
-      if (this.display && !t) this.hostElement.textContent = n(this.display);
-    };
-    this.initDisplay = async () => {
-      if (this.multiline) return;
-      const t = await o(this.hostElement);
+      const t = await s(this.hostElement);
       if (this.display) this.displayProvidedAtInit = true;
       this.display = !!this.display ? n(this.display) : t;
-      await this.handleTextContent();
+      this.setTextContent();
     };
     this.initMutationObserver = () => {
+      if (!("MutationObserver" in window)) return;
       const t = new MutationObserver(this.mutationHandler);
       t.observe(this.hostElement, {
         childList: true,
@@ -36,10 +31,15 @@ const d = class {
       this.mutationObserver = t;
     };
     this.mutationHandler = async () => {
-      const t = await o(this.hostElement);
+      const t = await s(this.hostElement);
       if (this.display === t || this.multiline) return;
       if (!this.displayProvidedAtInit) this.display = t;
     };
+    this.setTextContent = () => {
+      const t = !!this.hostElement.querySelector("q2-loc");
+      if (this.multiline || t) return;
+      this.hostElement.textContent = n(this.display);
+    };
     this._multiSelectHidden = false;
     this.active = undefined;
     this.disabled = undefined;
@@ -63,36 +63,31 @@ const d = class {
     this.initDisplay();
   }
   componentDidLoad() {
-    if ("MutationObserver" in window) this.initMutationObserver();
+    this.initMutationObserver();
   }
   // #endregion
   // #region Watchers
-  async separatorChangedHandler(t) {
-    if (!t) return;
-    this.role = "separator";
-  }
-  async displayChangedHandler() {
+  displayChangedHandler() {
     this.display = n(this.display);
-    await this.handleTextContent();
+    this.setTextContent();
     this.displayChanged.emit({
       display: this.display,
       value: this.value
     });
   }
+  separatorChangedHandler(t) {
+    if (!t) return;
+    this.role = "separator";
+  }
   // #endregion
   // #region Render Methods
-  renderSeparator() {
-    return e("div", {
-      class: "separator"
-    });
-  }
   renderOption() {
-    const {display: t, disabled: i, disabledGroup: s, selected: o, _multiSelectHidden: r} = this;
-    const c = i || s;
-    return e(a, {
+    const {display: t, disabled: e, disabledGroup: a, selected: s, _multiSelectHidden: r} = this;
+    const c = e || a;
+    return i(o, {
       tabindex: "-1",
       "aria-disabled": c ? "true" : undefined,
-      "aria-selected": `${!!o}`,
+      "aria-selected": `${!!s}`,
       "aria-hidden": r ? "true" : undefined,
       display: n(t),
       onClick: () => {
@@ -114,22 +109,27 @@ const d = class {
           t.preventDefault();
         }
       }
-    }, this.selected && e("q2-icon", {
+    }, this.selected && i("q2-icon", {
       type: "checkmark"
-    }), e("div", {
+    }), i("div", {
       class: "content"
-    }, e("slot", null)));
+    }, i("slot", null)));
+  }
+  renderSeparator() {
+    return i("div", {
+      class: "separator"
+    });
   }
   render() {
     return this.separator ? this.renderSeparator() : this.renderOption();
   }
   get hostElement() {
-    return s(this);
+    return a(this);
   }
   static get watchers() {
     return {
-      separator: [ "separatorChangedHandler" ],
-      display: [ "displayChangedHandler" ]
+      display: [ "displayChangedHandler" ],
+      separator: [ "separatorChangedHandler" ]
     };
   }
 };

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

@@ -1 +1 @@
-{"version":3,"names":["q2OptionCss","Q2OptionStyle0","Q2Option","this","handleTextContent","async","multiline","textContent","getAllText","hostElement","display","loc","initDisplay","displayProvidedAtInit","initMutationObserver","observer","MutationObserver","mutationHandler","observe","childList","subtree","characterData","mutationObserver","allTextContent","disconnectedCallback","_a","disconnect","componentWillLoad","separatorChangedHandler","separator","componentDidLoad","window","role","displayChangedHandler","displayChanged","emit","value","renderSeparator","h","class","renderOption","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","Host","tabindex","undefined","onClick","tctClick","type","onKeydown","event","key","setTimeout","preventDefault","render"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\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, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCGFE,IAAQ;;;;;;;QAiIjBC,KAAAC,oBAAoBC;MAChB,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,YAAYH,GAAa;MAClC,IAAIJ,KAAKO,YAAYH,GAAaJ,KAAKM,YAAYF,cAAcI,EAAIR,KAAKO;AAAQ;IAGtFP,KAAAS,cAAcP;MACV,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,SAASP,KAAKU,wBAAwB;MAC/CV,KAAKO,YAAYP,KAAKO,UAAUC,EAAIR,KAAKO,WAAWH;YAC9CJ,KAAKC;AAAmB;IAGlCD,KAAAW,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBb,KAAKc;MAC3CF,EAASG,QAAQf,KAAKM,aAAa;QAAEU,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFlB,KAAKmB,mBAAmBP;AAAQ;IAGpCZ,KAAAc,kBAAkBZ;MACd,MAAMkB,UAAuBf,EAAWL,KAAKM;MAC7C,IAAIN,KAAKO,YAAYa,KAAkBpB,KAAKG,WAAW;MACvD,KAAKH,KAAKU,uBAAuBV,KAAKO,UAAUa;AAAc;8BAzIpC;;;;;;gBAwCf;;;;;;;EAwCf,oBAAAC;;KACIC,IAAAtB,KAAKmB,sBAAgB,QAAAG,WAAA,aAAAA,EAAEC;IACvBvB,KAAKmB,mBAAmB;;EAG5B,iBAAAK;IACIxB,KAAKyB,wBAAwBzB,KAAK0B;IAClC1B,KAAKS;;EAGT,gBAAAkB;IACI,IAAI,sBAAsBC,QAAQ5B,KAAKW;;;;EAO3C,6BAAMc,CAAwBC;IAC1B,KAAKA,GAAW;IAChB1B,KAAK6B,OAAO;;EAIhB,2BAAMC;IACF9B,KAAKO,UAAUC,EAAIR,KAAKO;UAClBP,KAAKC;IACXD,KAAK+B,eAAeC,KAAK;MAAEzB,SAASP,KAAKO;MAAS0B,OAAOjC,KAAKiC;;;;;EAoClE,eAAAC;IACI,OAAOC,EAAA;MAAKC,OAAM;;;EAGtB,YAAAC;IACI,OAAM9B,SAAEA,GAAO+B,UAAEA,GAAQC,eAAEA,GAAaC,UAAEA,GAAQC,oBAAEA,KAAuBzC;IAC3E,MAAM0C,IAAaJ,KAAYC;IAC/B,OACIJ,EAACQ,GAAI;MACDC,UAAS;MAAI,iBACEF,IAAa,SAASG;MAAS,iBAC/B,KAAKL;MAAU,eACjBC,IAAqB,SAASI;MAC3CtC,SAASC,EAAID;MACbuC,SAAS;QACL,IAAIJ,GAAY;QAChB1C,KAAK+C,SAASf,KAAK;UAAEgB,MAAM;UAAUf,OAAOjC,KAAKiC;;AAAQ;MAE7DgB,WAAYC;QACR,IAAIR,GAAY;QAChB,IAAIQ,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,KAAK;UAC5CC,YAAW;YACPpD,KAAK+C,SAASf,KAAK;cAAEgB,MAAM;cAAUf,OAAOjC,KAAKiC;;AAAQ,cAC1D;UAEHiB,EAAMG;;;OAIbrD,KAAKwC,YAAYL,EAAA;MAASa,MAAK;QAChCb,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAMhB,MAAAmB;IACI,OAAOtD,KAAK0B,YAAY1B,KAAKkC,oBAAoBlC,KAAKqC"}
+{"version":3,"names":["q2OptionCss","Q2OptionStyle0","Q2Option","this","initDisplay","async","multiline","textContent","getAllText","hostElement","display","displayProvidedAtInit","loc","setTextContent","initMutationObserver","window","observer","MutationObserver","mutationHandler","observe","childList","subtree","characterData","mutationObserver","allTextContent","hasLoc","querySelector","disconnectedCallback","_a","disconnect","componentWillLoad","separatorChangedHandler","separator","componentDidLoad","displayChangedHandler","displayChanged","emit","value","role","renderOption","disabled","disabledGroup","selected","_multiSelectHidden","isDisabled","h","Host","tabindex","undefined","onClick","tctClick","type","onKeydown","event","key","setTimeout","preventDefault","class","renderSeparator","render"],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(\n            var-prefixer(option-selected-multiline-icon-size),\n            var-prefixer(option-selected-icon-size),\n            26px\n        )};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    box-shadow: var-list(\n        --tct-option-focus-box-shadow,\n        --const-inset-double-focus-ring,\n        unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n    ) !important;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\n    mutationObserver: MutationObserver;\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, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCGFE,IAAQ;;;;;;;QAiIjBC,KAAAC,cAAcC;MACV,IAAIF,KAAKG,WAAW;MACpB,MAAMC,UAAoBC,EAAWL,KAAKM;MAC1C,IAAIN,KAAKO,SAASP,KAAKQ,wBAAwB;MAC/CR,KAAKO,YAAYP,KAAKO,UAAUE,EAAIT,KAAKO,WAAWH;MACpDJ,KAAKU;AAAgB;IAGzBV,KAAAW,uBAAuB;MACnB,MAAM,sBAAsBC,SAAS;MACrC,MAAMC,IAAW,IAAIC,iBAAiBd,KAAKe;MAC3CF,EAASG,QAAQhB,KAAKM,aAAa;QAAEW,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFnB,KAAKoB,mBAAmBP;AAAQ;IAGpCb,KAAAe,kBAAkBb;MACd,MAAMmB,UAAuBhB,EAAWL,KAAKM;MAC7C,IAAIN,KAAKO,YAAYc,KAAkBrB,KAAKG,WAAW;MACvD,KAAKH,KAAKQ,uBAAuBR,KAAKO,UAAUc;AAAc;IAGlErB,KAAAU,iBAAiB;MACb,MAAMY,MAAoBtB,KAAKM,YAAYiB,cAAc;MACzD,IAAIvB,KAAKG,aAAamB,GAAQ;MAC9BtB,KAAKM,YAAYF,cAAcK,EAAIT,KAAKO;AAAQ;8BAzItB;;;;;;gBAwCf;;;;;;;EAwCf,oBAAAiB;;KACIC,IAAAzB,KAAKoB,sBAAgB,QAAAK,WAAA,aAAAA,EAAEC;IACvB1B,KAAKoB,mBAAmB;;EAG5B,iBAAAO;IACI3B,KAAK4B,wBAAwB5B,KAAK6B;IAClC7B,KAAKC;;EAGT,gBAAA6B;IACI9B,KAAKW;;;;EAOT,qBAAAoB;IACI/B,KAAKO,UAAUE,EAAIT,KAAKO;IACxBP,KAAKU;IACLV,KAAKgC,eAAeC,KAAK;MAAE1B,SAASP,KAAKO;MAAS2B,OAAOlC,KAAKkC;;;EAIlE,uBAAAN,CAAwBC;IACpB,KAAKA,GAAW;IAChB7B,KAAKmC,OAAO;;;;EAoChB,YAAAC;IACI,OAAM7B,SAAEA,GAAO8B,UAAEA,GAAQC,eAAEA,GAAaC,UAAEA,GAAQC,oBAAEA,KAAuBxC;IAC3E,MAAMyC,IAAaJ,KAAYC;IAC/B,OACII,EAACC,GAAI;MACDC,UAAS;MAAI,iBACEH,IAAa,SAASI;MAAS,iBAC/B,KAAKN;MAAU,eACjBC,IAAqB,SAASK;MAC3CtC,SAASE,EAAIF;MACbuC,SAAS;QACL,IAAIL,GAAY;QAChBzC,KAAK+C,SAASd,KAAK;UAAEe,MAAM;UAAUd,OAAOlC,KAAKkC;;AAAQ;MAE7De,WAAYC;QACR,IAAIT,GAAY;QAChB,IAAIS,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,KAAK;UAC5CC,YAAW;YACPpD,KAAK+C,SAASd,KAAK;cAAEe,MAAM;cAAUd,OAAOlC,KAAKkC;;AAAQ,cAC1D;UAEHgB,EAAMG;;;OAIbrD,KAAKuC,YAAYG,EAAA;MAASM,MAAK;QAChCN,EAAA;MAAKY,OAAM;OACPZ,EAAA;;EAMhB,eAAAa;IACI,OAAOb,EAAA;MAAKY,OAAM;;;EAGtB,MAAAE;IACI,OAAOxD,KAAK6B,YAAY7B,KAAKuD,oBAAoBvD,KAAKoC"}

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

@@ -1,12 +1,12 @@
 import { r as t, c as e, h as i, g as n } from "./index-7a5365e2.js";
 
-import { n as a, o as s, i as o, l as r } from "./index-504f1a9e.js";
+import { n as a, o as s, i as o, l as r } from "./index-f2a66217.js";
 
 const c = "*{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:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";
 
-const d = c;
+const h = c;
 
-const h = class {
+const l = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
@@ -228,18 +228,18 @@ const h = class {
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: c, pageWithDefault: d, currentRange: h, nextRange: l, prevRange: p, showPerPageSelect: g} = this;
-    const u = d < 2;
-    const f = d === o;
+    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: c, pageWithDefault: h, currentRange: l, nextRange: d, prevRange: p, showPerPageSelect: g} = this;
+    const f = h < 2;
+    const u = h === o;
     let b = r("tecton.element.pagination.goToNext");
     let v = r("tecton.element.pagination.goToPrevious");
     if (e) {
       v = r("tecton.element.pagination.goToPages", {
-        next: d - 1,
+        next: h - 1,
         total: o
       });
       b = r("tecton.element.pagination.goToPages", {
-        next: d + 1,
+        next: h + 1,
         total: o
       });
     } else if (n) {
@@ -249,70 +249,70 @@ const h = class {
         total: c
       });
       b = r("tecton.element.pagination.goToRecords", {
-        range: l,
+        range: d,
         recordType: s.toLowerCase(),
         total: c
       });
     }
     return i("nav", {
-      key: "d91e1f0ba5a239c95fd16bda94ef1e614e3c49be",
+      key: "81ad5cb26deb25850937b8cc9532c085c7ae7a7a",
       class: "container",
       ref: t => this.containerElement = t,
       "aria-label": r("tecton.element.pagination.title")
     }, i("div", {
-      key: "aeb52cf10ec37a0ed9459660b9dad1df86e06ca1",
+      key: "80e730df9072d5d807d21fa589bb743dfc3c47c1",
       class: "description",
       "test-id": "description"
     }, e ? r("tecton.element.pagination.pages", {
-      current: d,
+      current: h,
       total: o
     }) : r("tecton.element.pagination.description", {
-      range: h,
+      range: l,
       recordType: s.toLowerCase(),
       total: c.toLocaleString()
     })), i("div", {
-      key: "24c8e8166dc90238960ae3afad0ff36eac4af66c",
+      key: "4ac5c21e45e4d4aed43e01fd49a0f398cb2ffa0b",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "7be7b963cba6c9dd5b45bced73085ff495fd4130",
+      key: "1f2a32ece3c921d9173e5d5958527d7c6e0e3910",
       ref: t => this.firstPageBtn = t,
       label: r("tecton.element.pagination.goToFirstPage"),
-      disabled: u,
+      disabled: f,
       hidden: a,
       onClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "7d58766f3d7307bcfb193d981c95895b58c2bbfb",
+      key: "11250e5b156691b6800475010416711941f60b95",
       type: "chevron-double-left"
     })), i("q2-btn", {
-      key: "b016eda2499b36b7fd82b84d39357dfa8c9f8719",
+      key: "af6e51286ec4017c92bf941a5b0aecfc5eb5e082",
       ref: t => this.prevPageBtn = t,
       label: v,
-      disabled: u,
-      onClick: () => this.handlePageChange(d - 1),
+      disabled: f,
+      onClick: () => this.handlePageChange(h - 1),
       "test-id": "prevPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "d1bed177625bf672d109fbc8a127961818dd3364",
+      key: "7090e6297c5983639e7113416101d1811e95d4c7",
       type: "chevron-left"
     }))), i("div", {
-      key: "62e7fb1e7379d54ace49f4f09f591cae2884479d",
+      key: "e09c5ef5a837b14cdbd4a26f5acc71e47cfb6728",
       class: "controls",
       hidden: a,
       "test-id": "controls"
     }, i("span", {
-      key: "ff7ee6d921a0fe08ab4705714af8a1106eb1e174",
+      key: "1dd05c355c04f568d17ccdfc927b570e8795c99f",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.page")), i("div", {
-      key: "e59bb32e696dfe162099f3efe19f95e7c76cad7b",
+      key: "a9e13e527bfe98e928a467c9c99e21cfadae182f",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, i("q2-input", {
-      key: "ecc4215e2beefd4e099f57a421d0a732cb4e14dc",
+      key: "368f0f7ee7f23c45101362b0dacf9df0ee9cc41c",
       ref: t => this.inputField = t,
       type: "number",
-      value: `${d}`,
+      value: `${h}`,
       min: 1,
       max: this.totalPages,
       hideLabel: true,
@@ -325,36 +325,36 @@ const h = class {
       "test-id": "pageInput",
       current: "page"
     })), i("span", {
-      key: "cd543116816cfe374b02fa366d64cade2887b51a",
+      key: "29a9af7d27dc1f28387df6ef1dd052c2ce0c27ac",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), i("div", {
-      key: "98826e8fbbe89ea9c34208ec8066ab47a8a17550",
+      key: "7cd9ea6486ef69c90bf03cac9f80fd575f78103a",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "5066ad089677456d90b660299b0260cc819c3e60",
+      key: "138e654a3112debc75c12ab01cca93f9a768e7a9",
       ref: t => this.nextPageBtn = t,
       label: b,
-      disabled: f,
-      onClick: () => this.handlePageChange(d + 1),
+      disabled: u,
+      onClick: () => this.handlePageChange(h + 1),
       "test-id": "nextPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "e3364523c842d9a345fd34c05cbcba87ae14da80",
+      key: "2b6ab242a2f1d090c07675753c5b5a3f2b36ffe0",
       type: "chevron-right"
     })), i("q2-btn", {
-      key: "a920ed7346c5fcadbac7c244dc1cabddd8e22b36",
+      key: "35103fb040b0b9117c035a2808be49afaffaa9f2",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: f,
+      disabled: u,
       hidden: a,
       onClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "49e610ac8459a60eac6ec771fbb3208a4a25ac34",
+      key: "47ee1ca35772437aad4319aa391b5623f3546500",
       type: "chevron-double-right"
     }))), i("div", {
-      key: "07bbdd2c0ddef20d8a14152c5977376389246c15",
+      key: "639a79c43ddb8c2757ffb34b9f54da4e75323a80",
       class: "per-page",
       hidden: a || !((t = this.perPageIncrements) === null || t === void 0 ? void 0 : t.length)
     }, g && this.renderPerPage()));
@@ -371,7 +371,7 @@ const h = class {
   }
 };
 
-h.style = d;
+l.style = h;
 
-export { h as q2_pagination };
+export { l as q2_pagination };
 //# sourceMappingURL=q2-pagination.entry.js.map