q2-tecton-elements 1.59.1 → 1.60.0

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

@@ -1,12 +1,12 @@
 import { r as t, c as i, h as o, g as e } from "./index-COzomxjJ.js";
 
-import { b as r, o as a, a as n, w as s, l as c } from "./index-CkXFIBxL.js";
+import { b as r, o as a, a as n, w as c, l as s } from "./index-CkXFIBxL.js";
 
 import { a as l, s as p } from "./action-sheet-D3xPdhm8.js";
 
-const d = "*{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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentcolor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
+const d = "*{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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus,:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
 
-const h = class {
+const v = class {
   constructor(o) {
     t(this, o);
     this.change = i(this, "change", 7);
@@ -81,7 +81,6 @@ const h = class {
           value: t,
           display: i
         } ] : [];
-        this.selectedOptions = e;
         this.change.emit({
           value: t,
           values: e,
@@ -151,7 +150,7 @@ const h = class {
     };
     this.syncValueProperties = () => {
       const {value: t, selectedOptions: i} = this;
-      if (!!(i === null || i === void 0 ? void 0 : i.length)) this.selectedOptionsChanged(i); else if (t) this.valueChanged(t);
+      if (!!(i === null || i === void 0 ? void 0 : i.length)) this.selectedOptionsChanged(i); else if (t) this.valueChanged(t, null, "value");
     };
     this.updateSelectedOptionElements = async () => {
       var t;
@@ -243,7 +242,7 @@ const h = class {
     const r = await ((o = this.optionList) === null || o === void 0 ? void 0 : o.getOptions());
     if (!this.open) {
       await this.openPopover();
-      await s();
+      await c();
     }
     e.forEach((t => {
       var i;
@@ -251,7 +250,7 @@ const h = class {
     }));
     if (i.closePopover) {
       await this.closePopover();
-      await s();
+      await c();
     }
   }
   // #endregion
@@ -269,16 +268,18 @@ const h = class {
       this.value = r;
     }
   }
-  async valueChanged(t) {
-    var i, o;
-    const {multiple: e, selectedOptions: r} = this;
-    if (e) return;
-    const a = (o = (i = r === null || r === void 0 ? void 0 : r[0]) === null || i === void 0 ? void 0 : i.value) !== null && o !== void 0 ? o : null;
-    if (t === a) this.updateSelectedOptionElements(); else {
+  async valueChanged(t, i, o) {
+    var e, r;
+    const {label: a, multiple: n, selectedOptions: c, value: s} = this;
+    const l = o === "value" ? t : s;
+    const p = o === "label" ? t : a;
+    if (n) return;
+    const d = (r = (e = c === null || c === void 0 ? void 0 : c[0]) === null || e === void 0 ? void 0 : e.value) !== null && r !== void 0 ? r : null;
+    if (o === "value" && t === d) this.updateSelectedOptionElements(); else {
       const i = await this.getOption(t);
       const {value: o, display: e} = i || {
-        value: t,
-        display: null
+        value: l,
+        display: p
       };
       this.selectedOptions = o ? [ {
         value: o,
@@ -290,8 +291,8 @@ const h = class {
   // #region Local Methods
   get buttonContent() {
     const {label: t, selectedOptions: i, selectedOptionElements: o, optionCount: e} = this;
-    if (!e || o.length === 0) return c(t); else if (o.length === 1) return c(o[0].display);
-    return c("tecton.element.pill.activeCount", {
+    if (!e || o.length === 0) return s(t); else if (o.length === 1) return s(o[0].display);
+    return s("tecton.element.pill.activeCount", {
       count: i.length
     });
   }
@@ -312,7 +313,7 @@ const h = class {
       id: "option-description",
       class: "sr",
       "aria-hidden": "true"
-    }, c("tecton.element.optionList.optionCount", [ this.optionCount ]));
+    }, s("tecton.element.optionList.optionCount", [ this.optionCount ]));
   }
   renderIcon() {
     const {optionCount: t, active: i} = this;
@@ -323,7 +324,7 @@ const h = class {
       class: "btn-close",
       onClick: e && this.clearSelectedOptions || undefined,
       disabled: e && this.disabled || undefined,
-      "aria-label": e && c("tecton.element.pill.clearSelection") || undefined,
+      "aria-label": e && s("tecton.element.pill.clearSelection") || undefined,
       type: e && "button" || undefined
     }, o("q2-icon", {
       type: a
@@ -335,19 +336,19 @@ const h = class {
     if (t || i) r.push("has-icon");
     if (t) r.push("has-options");
     return o("click-elsewhere", {
-      key: "0086bf06f2ddf4defbd7c844ce6d3e8be39ee4ab",
+      key: "612e277fb831b60becbdac0df520de45cc08a398",
       onChange: this.onClickElsewhere
     }, o("div", {
-      key: "ba4352eab5845d8959631b69c307a37573a4200f",
+      key: "5f56c66943e7fefd4295bd5c96019039aac039c9",
       class: r.join(" ")
     }, o("div", {
-      key: "ff77afa3c14755e150d031758003f3992fe7ca34",
+      key: "1b101344313e3bc6357e69378b929b47b53a9e50",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, o("button", {
-      key: "480428d0aa1960a7c5af959913b1022122e5fcb9",
+      key: "f0231168c9043ac7d2596ecbb3a7a382cf27d33b",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -363,10 +364,10 @@ const h = class {
       "aria-label": this.buttonContent,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent, !t && i && o("span", {
-      key: "e29d0ac2bd383e908786496e1950c3f2b0518187",
+      key: "066f5d1132937be8eb8e925c8394d219aadeb819",
       class: "sr"
-    }, "(", c("tecton.element.pill.active"), ")"))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
-      key: "f5c8c08712f77f30d1c03d3b99ad8fedf22dbd7f",
+    }, "(", s("tecton.element.pill.active"), ")"))), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
+      key: "f38e3d6f605f10e8907b40d16cd70276c6f85a73",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -376,20 +377,20 @@ const h = class {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, o("div", {
-      key: "4b7a0d909f17ed9f6e4284cef08099fd97ee9600",
+      key: "e4ce39ff508b27e82126fa4b08cca3d3c39ff3a7",
       class: "popover-content"
     }, o("div", {
-      key: "7b9cac2c0ab261a342e67f078c4eeb5da2ce6289",
+      key: "4075cea397c412b24ffa17194158b9fd0aec6ad4",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "07aa6e85152fc552ef321d4d0c236d55de09c061",
+      key: "1f48ca125b79984bb49ac5e21ba6290402462c9d",
       name: "popover-top"
     })), o("q2-option-list", {
-      key: "0423382f075777c10454e9e174c57f0baa5bd12d",
+      key: "9dcfea71f57897a393604167e629fa4a956ef3d8",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -397,18 +398,18 @@ const h = class {
       multiple: this.multiple,
       selectedOptions: this.selectedOptions,
       onReady: () => this.updateSelectedOptionElements(),
-      label: c("tecton.element.optionList.label", [ this.optionListLabel ])
+      label: s("tecton.element.optionList.label", [ this.optionListLabel ])
     }, o("slot", {
-      key: "2254c24de25573b6547efe07e3c65a2f5ecc10f9"
+      key: "1915a1abd9801102248fc8b516b13f2a34e4554d"
     })), o("div", {
-      key: "13e1ad159d175200b5d37f912e4a3211bf0dcec0",
+      key: "0073dd48f8fb6dfbe282f84ce134b258dff237a8",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "50abd4b0d43c24f74b0e6789349b658197233bf8",
+      key: "92da82497608b7fdee73587b677ec8673bbe1411",
       name: "popover-bottom"
     })))));
   }
@@ -418,13 +419,14 @@ const h = class {
   static get watchers() {
     return {
       selectedOptions: [ "selectedOptionsChanged" ],
-      value: [ "valueChanged" ]
+      value: [ "valueChanged" ],
+      label: [ "valueChanged" ]
     };
   }
 };
 
-h.style = d;
+v.style = d;
 
-export { h as q2_pill };
+export { v as q2_pill };
 //# sourceMappingURL=q2-pill.entry.esm.js.map
 //# sourceMappingURL=q2-pill.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2PillCss","Q2Pill","constructor","hostRef","this","scheduledAfterRender","hasPopoverBottom","hasPopoverTop","selectedOptionElements","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMinHeight","selectedOptions","clearSelectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleFocusOut","relatedTarget","contains","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","direction","popoverDirection","align","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: var(--comp-btn-background);\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]) & {\n        background: var(--comp-active-btn-background);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --t-icon-stroke-primary: currentcolor;\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    async valueChanged(newValue) {\n        const { multiple, selectedOptions } = this;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: newValue, display: null };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.selectedOptions = values;\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value);\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2PillCss","Q2Pill","constructor","hostRef","this","scheduledAfterRender","hasPopoverBottom","hasPopoverTop","selectedOptionElements","hoist","_a","window","Tecton","useActionSheets","popoverAlignment","popoverMinHeight","selectedOptions","clearSelectedOptions","value","active","open","primaryBtn","focus","change","emit","values","push","resizeIframe","determineOptionCount","async","optionList","allOptions","getOptions","optionCount","length","numberOfOptions","hostElement","querySelectorAll","executeActionSheet","event","result","showActionSheetList","handleSelectionChanges","getOption","options","find","option","querySelector","handleChange","stopPropagation","detail","handleClick","disabled","shouldShowActionSheet","popoverElement","toggle","label","isActive","display","handleFocusOut","relatedTarget","contains","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","hasSlot","handleExternalKeydown","changeDetails","multiple","onchange","undefined","selectedOption","handleWrapperClick","click","onClickElsewhere","target","localName","onMutationObserved","updateSlotState","updateSelectedOptionElements","syncValueProperties","selectedOptionsChanged","valueChanged","selectedValues","map","filter","includes","popTopSlot","shadowRoot","popBottomSlot","topSlotHasNode","assignedNodes","bottomSlotHasNode","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","observer","MutationObserver","observe","childList","attributes","componentDidLoad","overrideFocus","componentDidRender","forEach","fn","handleSelectedDisplay","delegateFocus","isEventFromElement","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","setValue","valueSet","Set","Array","isArray","waitForNextPaint","newValue","firstValue","_b","_oldValue","propName","valueProxy","labelProxy","buttonContent","loc","count","truncatedButtonContent","maxLength","substring","dispatchEvent","FocusEvent","renderHiddenElement","h","id","class","renderIcon","isButton","TagName","iconName","onClick","type","render","wrapperClassNames","onChange","join","ref","el","primaryBtnWrapper","tabIndex","role","onKeyDown","onFocusout","controlElement","popoverMaxHeight","minHeight","direction","popoverDirection","align","popoverTopContainer","tabindex","hidden","name","onReady","optionListLabel","popoverBottomContainer"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n    --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, none)};\n    --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]:not([active='false'])) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    box-shadow: var(--comp-btn-box-shadow);\n    backdrop-filter: var(--comp-btn-backdrop-filter);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    font-weight: var-list(--tct-pill-btn-font-weight, 400);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]:not([active='false'])) & {\n        background: var(--comp-active-btn-background);\n        box-shadow: var(--comp-active-btn-box-shadow);\n        backdrop-filter: var(--comp-active-btn-backdrop-filter);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]:not([active='false'])) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n    --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]:not([active='false'])) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    @Watch('label')\n    async valueChanged(newValue, _oldValue, propName) {\n        const { label, multiple, selectedOptions, value } = this;\n        const valueProxy = propName === 'value' ? newValue : value;\n        const labelProxy = propName === 'label' ? newValue : label;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: valueProxy, display: labelProxy };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value, null, 'value');\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-radio-group.entry.esm.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-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-radio-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.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-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-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-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 radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\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     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={hasError ? `${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"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-radio-group.entry.esm.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-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-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    color: var-list(--tct-radio-group-label-font-color, inherit);\n    font-size: var-list(--tct-radio-group-label-font-size, inherit);\n    font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n    text-transform: var-list(--tct-radio-group-label-text-transform, none);\n    letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\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.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-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-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n/** @slot label - An optional slot to display a custom label. */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-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 radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\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     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={hasError ? `${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"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,44GAA44G;;MCiBv5G,YAAY,GAAA,MAAA;AADzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,eAAe,UAAU,EAAE,EAAE;;;;AAc3C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAIzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AA+BzB,QAAA,IAAa,CAAA,aAAA,GAAgC,QAAQ;AAyKrD,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;;YAEtB,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,SAAS;;YAG/F,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE;AACpC,gBAAA,IAAI,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK;;iBACjC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,iBAAiB,EAAE;;AAE1C,gBAAA,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM;oBAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC;;AAEzE,SAAC;AAsBD,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAkB,KAAI;YACxC,KAAK,CAAC,wBAAwB,EAAE;YAChC,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;AACnD,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;YAC7B,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C,SAAC;AAkCJ;;;IA9NG,iBAAiB,GAAA;QACb,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,UAAU,CAAC;;IAGpD,gBAAgB,GAAA;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAC9D,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACvD,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;AAChC,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE;;;;AAO7B,IAAA,mBAAmB,CAAC,KAAkB,EAAA;QAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;;;;AAM3C,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC;QAC/G,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;AAIjD,IAAA,cAAc,CAAC,KAAoB,EAAA;AAC/B,QAAA,MAAM,YAAY,GAAI,KAAK,CAAC,MAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK;QACtF,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACpC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,MAAM,IAAK,EAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAC1F;QACD,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,QAAQ,KAAK,CAAC,GAAG;AACb,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;gBACV,IAAI,GAAG,EAAE;gBACT;AAEJ,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;gBACZ,IAAI,GAAG,CAAC;gBACR;;QAGR,IAAI,KAAK,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE;YAC5B;;QAEJ,KAAK,IAAI,IAAI;AACb,QAAA,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC;QACtF,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK;;AAEhD,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;;;;AAMpE;;;;AAIG;AAEH,IAAA,QAAQ,CAAC,KAAa,EAAA;AAClB,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAG;AAC/B,YAAA,IAAI,KAAK,KAAK,KAAK,CAAC,KAAK;gBAAE;YAC3B,KAAK,CAAC,KAAK,EAAE;AACjB,SAAC,CAAC;;;;IAON,eAAe,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAG;AAC/B,YAAA,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ;AACvC,SAAC,CAAC;;IAIN,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAG;YAC/B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG;AACtC,SAAC,CAAC;;IAIN,eAAe,GAAA;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ;AAC9B,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC;;AAIzE,IAAA,0BAA0B,CAAC,UAAmB,EAAA;QAC1C,IAAI,OAAO,UAAU,KAAK,SAAS;YAAE;AACrC,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU;AAC5B,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAI/B,IAAA,iBAAiB,CAAC,UAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAG;AAC/B,YAAA,KAAK,CAAC,eAAe,GAAG,UAAU;AACtC,SAAC,CAAC;;AAIN,IAAA,YAAY,CAAC,MAAc,EAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAG;YAC/B,KAAK,CAAC,OAAO,GAAG,MAAM,KAAK,KAAK,CAAC,KAAK;;AAEtC,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AAChB,gBAAA,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC;AAChC,gBAAA,KAAK,CAAC,QAAQ,GAAG,EAAE;;AAChB,iBAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACtB,gBAAA,KAAK,CAAC,QAAQ,GAAG,CAAC;;AAE1B,SAAC,CAAC;;;;AAMN,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,IAAI,CAAC,GAAG;;AAGnB,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAyB;;IAgB5F,QAAQ,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI;YAC9B,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,aAAa,GAAG,QAAQ;AAChG,YAAA,QACI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAE,EAAA,EACrC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC1B,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACN,CACJ;;aAEP;AACH,YAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC1B,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACN;;;;;IAuBlB,MAAM,GAAA;AACF,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AAC9D,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ;AAC/D,QAAA,QACI,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,YAAY,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACjB,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAE,EAAA,WAAW,CAAC,IAAI,CAAC,CAAO,EACnF,QAAQ,KACL,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,IAAI,EAAC,OAAO,EAAA,SAAA,EACJ,WAAW,EAAA,CACZ,CACd,CACC,CACT,EACD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,QAAQ,EAAE,IAAI,CAAC,kBAAkB,kBACnB,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAE,CAAA,GAAG,SAAS,EAAA,EAEjD,SAAS,IAAI,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,IAAE,WAAW,CAAC,IAAI,CAAC,CAAU,EACjE,IAAI,CAAC,QAAQ,EAAE,CACT,CACJ;;;;;;;;;;;;;;;;"}