q2-tecton-elements 1.54.5 → 1.55.1

package/dist/q2-tecton-elements/q2-carousel-pane.entry.js

@@ -1,15 +1,15 @@
-import { r as e, c as t, h as a, H as r, g as o } from "./index-7a5365e2.js";
+import { r as e, c as a, h as t, H as r, g as o } from "./index-7a5365e2.js";
 
-import { l as n } from "./index-504f1a9e.js";
+import { l as n } from "./index-f2a66217.js";
 
 const s = "*{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 
 const i = s;
 
 const c = class {
-  constructor(a) {
-    e(this, a);
-    this.clickCarouselPane = t(this, "clickCarouselPane", 7);
+  constructor(t) {
+    e(this, t);
+    this.clickCarouselPane = a(this, "clickCarouselPane", 7);
     // #region Own Properties
         this.disabledElements = [];
     this.generatePaneClass = e => `q2-carousel-pane swiper-slide q2-carousel-pane-${e}`;
@@ -59,21 +59,21 @@ const c = class {
   // #region Watchers
   determineDisabledContent() {
     const {isActivePane: e} = this;
-    const t = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
-    t.forEach((t => {
-      const a = t.hasAttribute("tabindex") && parseInt(t.getAttribute("tabindex")) >= 0;
-      if (a) {
-        t.setAttribute("data-q2-tabindex", `${t.tabIndex}`);
+    const a = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
+    a.forEach((a => {
+      const t = a.hasAttribute("tabindex") && parseInt(a.getAttribute("tabindex")) >= 0;
+      if (t) {
+        a.setAttribute("data-q2-tabindex", `${a.tabIndex}`);
       }
       if (e) {
-        if (t.hasAttribute("data-q2-tabindex")) {
-          t.tabIndex = parseInt(t.getAttribute("data-q2-tabindex"));
-          t.removeAttribute("data-q2-tabindex");
+        if (a.hasAttribute("data-q2-tabindex")) {
+          a.tabIndex = parseInt(a.getAttribute("data-q2-tabindex"));
+          a.removeAttribute("data-q2-tabindex");
         } else {
-          t.removeAttribute("tabindex");
+          a.removeAttribute("tabindex");
         }
       } else {
-        t.tabIndex = -1;
+        a.tabIndex = -1;
       }
     }));
   }
@@ -98,8 +98,8 @@ const c = class {
   // #region Render Methods
   render() {
     const {label: e} = this;
-    return a(r, {
-      key: "d71b36dcf424483f8d72024513a2ef41af68cfbe",
+    return t(r, {
+      key: "2aedd4957b29975f2a33168729e4764f9a5054f4",
       class: this.generatePaneClass(this.currentPaneIndex),
       tabIndex: this.isActivePane ? 0 : -1,
       role: "group",
@@ -107,11 +107,11 @@ const c = class {
       "aria-hidden": this.isActivePane ? undefined : "true",
       "aria-label": e ? n(e) : n("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
       onClick: this.paneClicked
-    }, a("article", {
-      key: "fb6543bd551d8d4ece1df1f8dd77940465bdc03a",
+    }, t("article", {
+      key: "1b1f852451f3f58f96b0e38a6051b49f83b9fb3c",
       class: "q2-carousel-pane-main-content"
-    }, a("slot", {
-      key: "b0abb74467220e13dcca406cdf3beffeef0cdf5b"
+    }, t("slot", {
+      key: "00bec6dca522ec9ebea3285405ed3bf94eea65ae"
     })));
   }
   get hostElement() {

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

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as i, F as n, H as s, g as r } from "./index-7a5365e2.js";
 
-import { c as o, l as a, a as l, o as c, i as f } from "./index-504f1a9e.js";
+import { c as o, l as a, a as l, o as c, i as f } from "./index-f2a66217.js";
 
 /**
  * SSR Window 4.0.2

package/dist/q2-tecton-elements/q2-chart-area.entry.js

@@ -1,6 +1,6 @@
 import { r, c as a, h as t, g as e } from "./index-7a5365e2.js";
 
-import { o as i, l as n } from "./index-504f1a9e.js";
+import { o as i, l as n } from "./index-f2a66217.js";
 
 import { _ as o, c as s, e as v, l as f, u, s as l, i as h, g as d, n as c, Z as p, a as m, b as y, t as b, d as S, r as g, f as P, G as w, h as M, j as I, S as D, m as L, k as x, o as N, p as T, q as k, P as C, v as A, w as E, x as O, y as B, z as F, A as z, C as G, B as U, D as V, E as R, F as q, H as K, I as j, L as _, J as Z, K as $, M as X, N as Y, O as H, Q as J, R as W, T as Q, U as rr, V as ar, W as tr, X as er, Y as ir, $ as nr, a0 as or, a1 as sr, a2 as vr, a3 as fr, a4 as ur, a5 as lr, a6 as hr, a7 as dr, a8 as cr, a9 as pr, aa as mr, ab as yr, ac as br, ad as Sr, ae as gr, af as Pr } from "./charting-1abfb877.js";
 
@@ -4284,10 +4284,10 @@ const aa = class {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "4f547daaeaf622ac320a7760e93b7cd34f6c77d9",
+      key: "30a28bc85debc198a9f18f255921135b894c1977",
       class: "container"
     }, t("div", {
-      key: "7aaae35934415b5bc06a1d57253c0683c9cc448b",
+      key: "2809c713137cc4469eff5a65c3680da8f9b83a37",
       ref: r => this.chartContainer = r,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as e, h as r, g as a } from "./index-7a5365e2.js";
 
-import { o as t, l as i } from "./index-504f1a9e.js";
+import { o as t, l as i } from "./index-f2a66217.js";
 
 import { _ as s, I as n, S as o, b6 as h, P as u, b7 as l, o as d, a0 as c, h as f, i as v, u as p, s as g, H as b, b8 as m, G as w, m as S, d as B, C as A, W as y, a as x, g as M, b as k, b9 as P, t as V, z as C, ba as N, V as L, ai as D, bb as z, bc as j, a9 as U, aa as T, ab as I, ac as O, ad as R, ae as E, af as W } from "./charting-1abfb877.js";
 
@@ -1439,10 +1439,10 @@ const Se = class {
   // #region Render Methods
   render() {
     return r("div", {
-      key: "b40ff8d49858ebfc55afb86a2a385bbe3c3e6851",
+      key: "40fbc74d1ee54a918bdbdcd0cd21369576bb175c",
       class: "container"
     }, r("div", {
-      key: "dffb3ce8dd7e638842d58d59ef09c34f9904af56",
+      key: "3646090b3d0f826a91f01afb0413fb674380b025",
       ref: e => this.chartContainer = e,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as r } from "./index-7a5365e2.js";
 
-import { o as a, i as n, l as o, d as s } from "./index-504f1a9e.js";
+import { o as a, i as n, l as o, d as s } from "./index-f2a66217.js";
 
 import { br as l, W as c, _ as h, ay as u, bs as v, bt as d, b5 as f, bu as p, D as g, bv as b, x as m, a0 as w, I as y, bw as x, aM as S, bx as T, by as M, j as L, bz as C, E as I, bA as A, bB as P, bC as k, bD as V, d as D, bE as z, bF as O, bG as N, bH as R, bI as B, bJ as H, bK as W, bL as U, a as F, bM as j, bN as $, bO as X, bP as G, bQ as Y, bj as E, aK as _, bR as K, a$ as q, bS as J, bT as Z, bU as Q, a9 as tt, b0 as et, bV as it, aA as rt, bW as at, a4 as nt, m as ot, a6 as st, o as lt, y as ct, bX as ht, bY as ut, b as vt, bZ as dt, b2 as ft, b_ as pt, b$ as gt, c0 as bt, c as mt, ai as wt, G as yt, aB as xt, b6 as St, aC as Tt, c1 as Mt, b1 as Lt, u as Ct, c2 as It, aw as At, a3 as Pt, R as kt, bm as Vt, i as Dt, s as zt, z as Ot, t as Nt, g as Rt, be as Bt, c3 as Ht, V as Wt, b8 as Ut, C as Ft, ak as jt, am as $t, c4 as Xt, c5 as Gt, c6 as Yt, S as Et, c7 as _t, ab as Kt, aa as qt, ac as Jt, ad as Zt } from "./charting-1abfb877.js";
 
@@ -4483,15 +4483,15 @@ const Ee = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "061f0df2cfc531af2df0d583f7cea0a2e7d68c7d",
+      key: "46371f94c2bd94407b40585b73f0bb47c5e315f6",
       onChange: this.onClickElsewhere
     }, i("figure", {
-      key: "324163777739ef74d986c94fda412a91f0f34124"
+      key: "9481cae2bb3c65f0c3a0ffb839bde2688808777d"
     }, i("div", {
-      key: "a866867bfd653239d8f7c0a630f2b222c353bdb1",
+      key: "13865b38e703c6deaf921d3bdf228f3b8fa42486",
       class: "container"
     }, i("div", {
-      key: "fcb2076e8b390ef19ab28f03d25e66bb48c7bdd9",
+      key: "7020e99dc26d9127e255b0609d6f8d9de2ad14a7",
       ref: t => this.chartContainer = t,
       "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
       class: "chart-container",
@@ -4501,9 +4501,9 @@ const Ee = class {
       tabIndex: !this.isClickable ? 0 : undefined,
       onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
     }), this.renderCenterBlock()), this.showLegend && i("figcaption", {
-      key: "2115b858f955bb6751a8d7d4476d4addc76e8f50"
+      key: "0fc4fa0da6f895a5f0d0fd044739652ccb0b87f1"
     }, i("q2-legend", {
-      key: "2a20e076a5bb3ac2b3430f1cefe38d9cdf594ccb",
+      key: "1ab827762eb139944842075305f3b2628ec59d32",
       class: "legend",
       data: this.legendData,
       format: this.format,

package/dist/q2-tecton-elements/q2-checkbox-group.entry.js

@@ -1,8 +1,8 @@
-import { r as t, c as e, h as r, F as o, g as i } from "./index-7a5365e2.js";
+import { r as t, c as e, h as r, F as o, g as a } from "./index-7a5365e2.js";
 
-import { c as a, f as s } from "./index-504f1a9e.js";
+import { c as i, f as s } from "./index-f2a66217.js";
 
-const n = '*{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{margin-top:var(--tct-checkbox-group-margin-top, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}';
+const n = '*{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{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}::slotted(q2-checkbox){--tct-checkbox-margin:var(--tct-checkbox-group-checkbox-margin, var(--app-scale-0x, 0));--tct-checkbox-padding:var(--tct-checkbox-group-checkbox-padding, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}';
 
 const c = n;
 
@@ -11,7 +11,7 @@ const d = class {
     t(this, r);
     this.change = e(this, "change", 7);
     // #region Own Properties
-        this._id = `checkbox-group-${a()}`;
+        this._id = `checkbox-group-${i()}`;
     this.onInnerCheckboxChange = t => {
       t.stopImmediatePropagation();
       const e = {};
@@ -149,7 +149,7 @@ const d = class {
     }, s(this)), this.inputDom()));
   }
   get hostElement() {
-    return i(this);
+    return a(this);
   }
   static get watchers() {
     return {

package/dist/q2-tecton-elements/q2-checkbox-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","onMutationObserved","updateValue","updateDisabled","updateReadonly","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","subtree","onHostElementChange","target","onchange","detail","setValue","values","valuesSet","Set","Array","isArray","has","click","disabledObserver","readonlyObserver","valueObserver","from","querySelectorAll","inputId","protectedValue","inputDom","h","class","groupDisabled","disabled","checkbox","slotReadonly","readonly","hasOwnProperty","render","showLabel","label","optional","showLabelRow","hideLabel","hasError","Fragment","key","renderLabel","type","onChange","undefined"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-checkbox-group-margin-top, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: var(--tct-checkbox-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\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    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group'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     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAqB;;AAC3B,MAAAC,IAAeD;;MCeFE,IAAe;;;;;QAGxBC,KAAAC,MAAc,kBAAkBC;IA4JhCF,KAAAG,wBAAyBC;MACrBA,EAAMC;MACN,MAAMC,IAAa;MACnBC,YAAW;QACPP,KAAKQ,iBAAiBC,SAAQC;UAC1BJ,EAAWI,EAAMC,WAAWD,EAAME;AAAO;QAE7CZ,KAAKa,OAAOC,KAAKR;AAAW,UAC7B;AAAE;IAGTN,KAAAe,qBAAqB;MACjBf,KAAKgB;MACLhB,KAAKiB;MACLjB,KAAKkB;AAAgB;;;;;;;;;;;EAnGzB,oBAAAC;IACI,IAAInB,KAAKoB,kBAAkB;MACvBpB,KAAKoB,iBAAiBC;MACtBrB,KAAKoB,mBAAmB;;;EAIhC,iBAAAE;IACItB,KAAKkB;;EAGT,gBAAAK;IACI,MAAMC,IAAW,IAAIC,iBAAiBzB,KAAKe;IAC3CS,EAASE,QAAQ1B,KAAK2B,aAAa;MAAEC,WAAW;MAAMC,SAAS;;IAC/D7B,KAAKoB,mBAAmBI;IACxBxB,KAAKe;;;;EAOT,mBAAAe,CAAoB1B;IAChB,IAAIA,EAAM2B,WAAW/B,KAAK2B,gBAAgB3B,KAAK2B,YAAYK,UAAU;MACjEhC,KAAKW,QAAQP,EAAM6B;;;;;;;;;;EAa3B,QAAAC,CAASC;IACL,MAAMC,IAAY,IAAIC,IAAIC,MAAMC,QAAQJ,KAAUA,IAAS,EAACA;IAC5DnC,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAI0B,EAAUI,IAAI9B,EAAMC,QAAQD,EAAM+B;AAAO;;;;EAQrD,gBAAAC;IACI1C,KAAKiB;;EAIT,gBAAA0B;IACI3C,KAAKkB;;EAIT,aAAA0B;IACI5C,KAAKgB;;;;EAMT,oBAAIR;IACA,OAAO8B,MAAMO,KAAK7C,KAAK2B,YAAYmB,iBAAiB;;EAGxD,WAAIC;IACA,OAAO/C,KAAKC;;EAGhB,kBAAI+C;IACA,OAAOhD,KAAKW,SAAS;;EAGzB,QAAAsC;IACI,OACIC,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAsBZ,cAAAjC;IACI,MAAMmC,IAAgBpD,KAAKqD;IAC3BrD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASF,gBAAgBA;AAAa;;EAI9C,cAAAlC;IACI,MAAMqC,IAAevD,KAAKwD;IAC1BxD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASC,eAAeA;AAAY;;EAI5C,WAAAvC;IACI,IAAIhB,KAAKwD,UAAU;IACnBxD,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAIV,KAAKgD,eAAeS,eAAe/C,EAAMC,QAAQ;QACjDD,EAAME,UAAUZ,KAAKW,MAAMD,EAAMC;;;;;;EAQ7C,MAAA+C;IACI,MAAMC,IAAY3D,KAAK4D,SAAS5D,KAAK6D,YAAY7D,KAAKwD;IACtD,MAAMM,IAAgBH,MAAc3D,KAAK+D,aAAc/D,KAAKgE;IAC5D,OACId,EAACe,GAAQ;MAAAC,KAAA;OACJJ,KACGZ,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OACNQ,MAAc3D,KAAK+D,aAAab,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OAAgBgB,EAAYnE,QACvEA,KAAKgE,YACFd,EAAA;MAAAgB,KAAA;MACIE,MAAK;MAAO,WACJ;SAKxBlB,EAAA;MAAAgB,KAAA;MACIG,UAAUrE,KAAKG;MAAqB,gBACtBH,KAAKgE,WAAW,GAAGhE,KAAKgE,aAAaM;OAElDX,KAAaT,EAAA;MAAAgB,KAAA;MAAQf,OAAM;OAAWgB,EAAYnE,QAClDA,KAAKiD"}
+{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","onMutationObserved","updateValue","updateDisabled","updateReadonly","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","subtree","onHostElementChange","target","onchange","detail","setValue","values","valuesSet","Set","Array","isArray","has","click","disabledObserver","readonlyObserver","valueObserver","from","querySelectorAll","inputId","protectedValue","inputDom","h","class","groupDisabled","disabled","checkbox","slotReadonly","readonly","hasOwnProperty","render","showLabel","label","optional","showLabelRow","hideLabel","hasError","Fragment","key","renderLabel","type","onChange","undefined"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\n::slotted(q2-checkbox) {\n    --tct-checkbox-margin: #{var-list(--tct-checkbox-group-checkbox-margin, --app-scale-0x, 0)};\n    --tct-checkbox-padding: #{var-list(--tct-checkbox-group-checkbox-padding, --app-scale-2x, 10px)};\n}\n\nfieldset {\n    padding: var(--tct-checkbox-group-fieldset-padding, 0);\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    column-gap: var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-group-${createGuid()}`;\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    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\n\n    /**\n     * Hide's the group'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     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAqB;;AAC3B,MAAAC,IAAeD;;MCeFE,IAAe;;;;;QAGxBC,KAAAC,MAAc,kBAAkBC;IA4JhCF,KAAAG,wBAAyBC;MACrBA,EAAMC;MACN,MAAMC,IAAa;MACnBC,YAAW;QACPP,KAAKQ,iBAAiBC,SAAQC;UAC1BJ,EAAWI,EAAMC,WAAWD,EAAME;AAAO;QAE7CZ,KAAKa,OAAOC,KAAKR;AAAW,UAC7B;AAAE;IAGTN,KAAAe,qBAAqB;MACjBf,KAAKgB;MACLhB,KAAKiB;MACLjB,KAAKkB;AAAgB;;;;;;;;;;;EAnGzB,oBAAAC;IACI,IAAInB,KAAKoB,kBAAkB;MACvBpB,KAAKoB,iBAAiBC;MACtBrB,KAAKoB,mBAAmB;;;EAIhC,iBAAAE;IACItB,KAAKkB;;EAGT,gBAAAK;IACI,MAAMC,IAAW,IAAIC,iBAAiBzB,KAAKe;IAC3CS,EAASE,QAAQ1B,KAAK2B,aAAa;MAAEC,WAAW;MAAMC,SAAS;;IAC/D7B,KAAKoB,mBAAmBI;IACxBxB,KAAKe;;;;EAOT,mBAAAe,CAAoB1B;IAChB,IAAIA,EAAM2B,WAAW/B,KAAK2B,gBAAgB3B,KAAK2B,YAAYK,UAAU;MACjEhC,KAAKW,QAAQP,EAAM6B;;;;;;;;;;EAa3B,QAAAC,CAASC;IACL,MAAMC,IAAY,IAAIC,IAAIC,MAAMC,QAAQJ,KAAUA,IAAS,EAACA;IAC5DnC,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAI0B,EAAUI,IAAI9B,EAAMC,QAAQD,EAAM+B;AAAO;;;;EAQrD,gBAAAC;IACI1C,KAAKiB;;EAIT,gBAAA0B;IACI3C,KAAKkB;;EAIT,aAAA0B;IACI5C,KAAKgB;;;;EAMT,oBAAIR;IACA,OAAO8B,MAAMO,KAAK7C,KAAK2B,YAAYmB,iBAAiB;;EAGxD,WAAIC;IACA,OAAO/C,KAAKC;;EAGhB,kBAAI+C;IACA,OAAOhD,KAAKW,SAAS;;EAGzB,QAAAsC;IACI,OACIC,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAsBZ,cAAAjC;IACI,MAAMmC,IAAgBpD,KAAKqD;IAC3BrD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASF,gBAAgBA;AAAa;;EAI9C,cAAAlC;IACI,MAAMqC,IAAevD,KAAKwD;IAC1BxD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASC,eAAeA;AAAY;;EAI5C,WAAAvC;IACI,IAAIhB,KAAKwD,UAAU;IACnBxD,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAIV,KAAKgD,eAAeS,eAAe/C,EAAMC,QAAQ;QACjDD,EAAME,UAAUZ,KAAKW,MAAMD,EAAMC;;;;;;EAQ7C,MAAA+C;IACI,MAAMC,IAAY3D,KAAK4D,SAAS5D,KAAK6D,YAAY7D,KAAKwD;IACtD,MAAMM,IAAgBH,MAAc3D,KAAK+D,aAAc/D,KAAKgE;IAC5D,OACId,EAACe,GAAQ;MAAAC,KAAA;OACJJ,KACGZ,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OACNQ,MAAc3D,KAAK+D,aAAab,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OAAgBgB,EAAYnE,QACvEA,KAAKgE,YACFd,EAAA;MAAAgB,KAAA;MACIE,MAAK;MAAO,WACJ;SAKxBlB,EAAA;MAAAgB,KAAA;MACIG,UAAUrE,KAAKG;MAAqB,gBACtBH,KAAKgE,WAAW,GAAGhE,KAAKgE,aAAaM;OAElDX,KAAaT,EAAA;MAAAgB,KAAA;MAAQf,OAAM;OAAWgB,EAAYnE,QAClDA,KAAKiD"}