q2-tecton-elements 1.57.0 → 1.58.0

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

@@ -1,14 +1,14 @@
-import { r as t, c as n, h as e, a as o } from "./index-YFPMNbDm.js";
+import { r as t, c as e, h as n, a as o } from "./index-YFPMNbDm.js";
 
-import { l as a, o as i } from "./index-DHD1Dbkd.js";
+import { l as a, o as i } from "./index-CYgcpzXH.js";
 
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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))))}";
 
 const c = class {
-  constructor(e) {
-    t(this, e);
-    this.toggleChange = n(this, "toggleChange", 7);
-    this.viewChange = n(this, "viewChange", 7);
+  constructor(n) {
+    t(this, n);
+    this.toggleChange = e(this, "toggleChange", 7);
+    this.viewChange = e(this, "viewChange", 7);
     // #region Own Properties
         this.monthGrid = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
     this.months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].map((t => ({
@@ -27,34 +27,34 @@ const c = class {
     // #endregion
     // #region Local Methods
         this.focusMonth = t => {
-      const n = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);
-      if (n) {
+      const e = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);
+      if (e) {
         this.focusedIndex = t;
-        n.focus();
+        e.focus();
       }
     };
-    this.moveMonth = (t, n, e) => {
+    this.moveMonth = (t, e, n) => {
       const o = t.length;
       const a = t[0].length;
-      const i = Math.floor(n / a);
-      const r = n % a;
+      const i = Math.floor(e / a);
+      const r = e % a;
       const c = [ i, r ];
-      if (e.key === "ArrowUp") {
-        e.stopPropagation();
-        e.preventDefault();
+      if (n.key === "ArrowUp") {
+        n.stopPropagation();
+        n.preventDefault();
         return t[Math.max(0, c[0] - 1)][c[1]];
-      } else if (e.key === "ArrowDown") {
-        e.stopPropagation();
-        e.preventDefault();
+      } else if (n.key === "ArrowDown") {
+        n.stopPropagation();
+        n.preventDefault();
         return t[Math.min(o - 1, c[0] + 1)][c[1]];
-      } else if (e.key === "ArrowLeft") {
-        e.stopPropagation();
-        e.preventDefault();
-        return Math.max(0, n - 1);
-      } else if (e.key === "ArrowRight") {
-        e.stopPropagation();
-        e.preventDefault();
-        return Math.min(this.months.length - 1, n + 1);
+      } else if (n.key === "ArrowLeft") {
+        n.stopPropagation();
+        n.preventDefault();
+        return Math.max(0, e - 1);
+      } else if (n.key === "ArrowRight") {
+        n.stopPropagation();
+        n.preventDefault();
+        return Math.min(this.months.length - 1, e + 1);
       } else {
         return t[c[0]][c[1]];
       }
@@ -66,30 +66,30 @@ const c = class {
         });
         return;
       }
-      const n = t.target.dataset.index;
-      if (!n) return;
+      const e = t.target.dataset.index;
+      if (!e) return;
       if (t.key === "Enter" || t.key === " ") {
         t.preventDefault();
         t.stopPropagation();
-        this.selectMonth(Number(n));
+        this.selectMonth(Number(e));
       } else {
-        const e = this.moveMonth(this.monthGrid, Number(n), t);
-        this.focusMonth(e);
+        const n = this.moveMonth(this.monthGrid, Number(e), t);
+        this.focusMonth(n);
       }
     };
     this.onMonthSelection = t => {
-      var n, e;
+      var e, n;
       const o = t.target.closest(".month-button");
-      if ((n = o === null || o === void 0 ? void 0 : o.dataset) === null || n === void 0 ? void 0 : n.index) {
-        this.selectMonth(Number((e = o === null || o === void 0 ? void 0 : o.dataset) === null || e === void 0 ? void 0 : e.index));
+      if ((e = o === null || o === void 0 ? void 0 : o.dataset) === null || e === void 0 ? void 0 : e.index) {
+        this.selectMonth(Number((n = o === null || o === void 0 ? void 0 : o.dataset) === null || n === void 0 ? void 0 : n.index));
       }
     };
     this.selectMonth = t => {
-      var n, e, o;
+      var e, n, o;
       this.selectedIndex = t;
       this.focusedIndex = t;
       const a = this.hostElement.shadowRoot.querySelector(`.month-button[data-index="${t}"]`);
-      (n = this.hostElement.shadowRoot.querySelectorAll(`.month-button`)) === null || n === void 0 ? void 0 : n.forEach((t => t.classList.remove("active")));
+      (e = this.hostElement.shadowRoot.querySelectorAll(`.month-button`)) === null || e === void 0 ? void 0 : e.forEach((t => t.classList.remove("active")));
       a === null || a === void 0 ? void 0 : a.classList.add("active");
       a === null || a === void 0 ? void 0 : a.focus();
       const i = {
@@ -98,7 +98,7 @@ const c = class {
         monthIndex: t,
         selectedYear: this.year
       };
-      (o = (e = this.hostElement).onchange) === null || o === void 0 ? void 0 : o.call(e, new CustomEvent("click", {
+      (o = (n = this.hostElement).onchange) === null || o === void 0 ? void 0 : o.call(n, new CustomEvent("click", {
         bubbles: true,
         detail: i
       }));
@@ -121,67 +121,67 @@ const c = class {
   // #endregion
   // #region Render Methods
   render() {
-    return e("div", {
-      key: "dfa012542089f3e031225e11d942731d95caa467",
+    return n("div", {
+      key: "9f1061efa14de366263d03f04332dd5c557a92ff",
       class: "month-container",
       onKeyDown: this.onMonthKeydown
-    }, e("div", {
-      key: "2196be700d87a1e01b1f90e6f4b7d661d593bf48",
+    }, n("div", {
+      key: "531903263ae61ba605e95ece9b95210a8d2db140",
       class: "navigation"
-    }, e("q2-btn", {
-      key: "ff943c45617ff8b3a17a9ef1b61b82e67356c300",
+    }, n("q2-btn", {
+      key: "21879897ce084c038fbcfbf737586bf4b4edf3cd",
       class: "year-btn",
       onClick: () => this.viewChange.emit({
         view: "year",
         selectedYear: this.year
       })
-    }, e("span", {
-      key: "c6f84bf595bf100315098d9afd5df8e70506a79d",
+    }, n("span", {
+      key: "ca4696076487b72d8e32b62de452108e62d6ae07",
       class: "year"
-    }, this.year), e("q2-icon", {
-      key: "f1cb6d06f24c3bdd3247b4d6a6af04efc481fc67",
+    }, this.year), n("q2-icon", {
+      key: "97c0c7291e96f4b6778d1500804924bd7fa8f843",
       class: "year-icon off",
       type: "chevron-down"
-    })), e("div", {
-      key: "c617358f45586c3d7a6492e3573ec92b810535ab",
+    })), n("div", {
+      key: "0aea238f619868343979712040bf910ffdb0e577",
       class: "month-controller"
-    }, e("div", {
-      key: "500c5a6765139d5b62449a0ba388494e85524d0a",
+    }, n("div", {
+      key: "a3f01ed1cd953b42bd704bd260e46c2d0b7a0ebb",
       class: "cal-year-prev-next"
-    }, e("q2-btn", {
-      key: "697f65cfd3d52698f7004395d428848548fbc856",
+    }, n("q2-btn", {
+      key: "5503a8ee3167d236cf54dafc57da57453c824131",
       label: a("tecton.element.calendar.previousYear"),
       "hide-label": true,
       class: "cal-nav-btn prev-year",
       "test-id": "previousYearButton",
       onClick: () => this.selectYear(this.year - 1)
-    }, e("q2-icon", {
-      key: "aa83487a228127ef847439d876172afa17c3557e",
+    }, n("q2-icon", {
+      key: "385d6c55b1aa5e79037e42f2e6a35afd2916b67c",
       type: "arrow-left"
-    })), e("q2-btn", {
-      key: "0813d6a858b325ba240bc1c9c84196a810e231ec",
+    })), n("q2-btn", {
+      key: "dcbea8a0e4844addba6093f579712ed1265d2bb3",
       label: a("tecton.element.calendar.nextYear"),
       "hide-label": true,
       class: "cal-nav-btn next-year",
       "test-id": "nextYearButton",
       onClick: () => this.selectYear(this.year + 1)
-    }, e("q2-icon", {
-      key: "2c8f1259ebafba900e913dffeb1b5df05d37f916",
+    }, n("q2-icon", {
+      key: "d89ebc4ad4c538d10a6abf500dbacca472e4c92c",
       type: "arrow-right"
-    }))))), e("div", {
-      key: "27bdc96d859976a0c1483aabef3794ada911f02a",
+    }))))), n("div", {
+      key: "48bc1cd4c0b57f65f79f3f4c03097b1323292868",
       class: "month-list",
       onClick: this.onMonthSelection
-    }, this.months.map(((t, n) => e("div", {
+    }, this.months.map(((t, e) => n("div", {
       class: "month"
-    }, e("span", {
+    }, n("span", {
       role: "button",
       class: "month-button",
-      "data-index": n,
+      "data-index": e,
       "aria-label": t.label,
-      tabindex: n === this.focusedIndex ? 0 : -1
-    }, t.abbr))))), this.today && e("div", {
-      key: "ccd5c945bc1abcc38e545577178678e4c0ca54dc",
+      tabindex: e === this.focusedIndex ? 0 : -1
+    }, t.abbr))))), this.today && n("div", {
+      key: "fcce11a5922d4a5c65016c1429e6b05e4d32a136",
       class: "today-label"
     }, a("tecton.element.calendar.today"), ": ", this.today));
   }

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, a as r } from "./index-YFPMNbDm.js";
 
-import { c as o, l as a } from "./index-DHD1Dbkd.js";
+import { c as o, l as a } from "./index-CYgcpzXH.js";
 
 const i = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}";
 
@@ -57,20 +57,20 @@ const s = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "e1c456d3e2e5dab24bb89bcc557462845956dc2f",
+      key: "0f8403da29d7afc8a1923ae7ff5019cc00304a06",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
     }, e("div", {
-      key: "7f4a4e26a3410533f7e32bcc6d17dec5e2cc3e35",
+      key: "e7819a536272ff24a1b6e909c2bbf6296efcd022",
       class: "q2-optgroup-header",
       id: this.headerId
     }, this.label && a(this.label) || ""), e("div", {
-      key: "8ce837415989b4199968682e703e9a411f167ce0",
+      key: "89512227cb963d634b8be6552bc59f060892b449",
       class: "q2-optgroup-options"
     }, e("slot", {
-      key: "a6ecae1aa6e1a54240a7c9b8c945bd0d663cb5c0"
+      key: "4e8f413d05a363d1a4f3c3a8364d596354fd1ca8"
     })));
   }
   get hostElement() {