q2-tecton-elements 1.54.5 → 1.55.1

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

@@ -1,14 +1,14 @@
-import { r as e, h as t, g as i } from "./index-7a5365e2.js";
+import { r as t, h as e, g as i } from "./index-7a5365e2.js";
 
-import { e as l, l as s } from "./index-504f1a9e.js";
+import { e as l, l as s } from "./index-f2a66217.js";
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 
 const o = a;
 
 const n = class {
-  constructor(t) {
-    e(this, t);
+  constructor(e) {
+    t(this, e);
     this.alignment = "left";
     this.description = undefined;
     this.label = undefined;
@@ -23,36 +23,36 @@ const n = class {
   // #endregion
   // #region Local Methods
   get descriptionClasses() {
-    const e = [ "description" ];
+    const t = [ "description" ];
     if (this.size) {
-      e.push(`description-size-${this.size}`);
+      t.push(`description-size-${this.size}`);
     } else {
-      e.push(`description-size-inline`);
+      t.push(`description-size-inline`);
     }
     if (!this.stacked) {
-      e.push(`description-alignment-right`);
+      t.push(`description-alignment-right`);
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get detailClasses() {
-    const e = [ "detail" ];
+    const t = [ "detail" ];
     if (this.size) {
-      e.push(`detail-block`);
+      t.push(`detail-block`);
     } else {
-      e.push(`detail-inline`);
+      t.push(`detail-inline`);
     }
     if (this.stacked || this.onlyHasDescripiton || this.onlyHasLabel) {
-      e.push("detail-stacked", `detail-stacked-alignment-${this.alignment}`);
+      t.push("detail-stacked", `detail-stacked-alignment-${this.alignment}`);
     } else {
-      e.push("detail-horizontal");
+      t.push("detail-horizontal");
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get hasDefaultSlotContent() {
-    const e = !!this.hostElement.innerHTML.trim();
-    const t = this.hostElement.querySelectorAll(":scope > [slot]").length;
+    const t = !!this.hostElement.innerHTML.trim();
+    const e = this.hostElement.querySelectorAll(":scope > [slot]").length;
     const i = this.hostElement.childNodes.length;
-    return e && i > t;
+    return t && i > e;
   }
   get hasDescripiton() {
     return !!this.description || this.hasDefaultSlotContent;
@@ -64,16 +64,16 @@ const n = class {
     return l(this.hostElement, "label");
   }
   get labelClasses() {
-    const e = [ "label" ];
+    const t = [ "label" ];
     if (this.size) {
-      e.push(`label-size-${this.size}`);
+      t.push(`label-size-${this.size}`);
     } else {
-      e.push(`label-size-inline`);
+      t.push(`label-size-inline`);
     }
     if (!this.stacked) {
-      e.push(`label-align-left`);
+      t.push(`label-align-left`);
     }
-    return e.join(" ");
+    return t.join(" ");
   }
   get onlyHasDescripiton() {
     return this.hasDescripiton && !this.hasLabel;
@@ -82,40 +82,40 @@ const n = class {
     return this.hasLabel && !this.hasDescripiton;
   }
   setSlotSizeProps() {
-    const e = Array.from(this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot="label"] > *'));
-    e.forEach((e => {
-      let t = this.size;
-      if (e.localName === "q2-currency") {
-        switch (t) {
+    const t = Array.from(this.hostElement.querySelectorAll(':scope > *:not([slot]), :scope > [slot="label"] > *'));
+    t.forEach((t => {
+      let e = this.size;
+      if (t.localName === "q2-currency") {
+        switch (e) {
          case "xsmall":
-          t = "small";
+          e = "small";
           break;
 
          case "xlarge":
-          t = "large";
+          e = "large";
           break;
         }
       }
-      e.slotSize = t;
+      t.slotSize = e;
     }));
   }
   // #endregion
   // #region Render Methods
   render() {
-    return t("div", {
-      key: "279671eea96d480283a80f3de70e8a3057e153a0",
+    return e("div", {
+      key: "5266648e705eff434fd3f70992e4131b465093a1",
       class: this.detailClasses
-    }, this.hasLabel && t("div", {
-      key: "561d1ede1db345e2a7979947e463ba45db33559e",
+    }, this.hasLabel && e("div", {
+      key: "8790254081b4a51a2e71ffd0342f5946b0d49bfe",
       class: this.labelClasses,
       "aria-describedby": !!this.description ? "label-description" : undefined
-    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? t("slot", {
+    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? e("slot", {
       name: "label"
-    }) : ""), this.hasDescripiton && t("div", {
-      key: "e8f20b79064d73157058cee3d73496bbd346531f",
+    }) : ""), this.hasDescripiton && e("div", {
+      key: "226f0df4f71a50e44cb8eafff8d1f74d3a9a7b33",
       id: "label-description",
       class: this.descriptionClasses
-    }, !!this.description ? s(this.description) : this.hasDefaultSlotContent ? t("slot", null) : ""));
+    }, !!this.description ? s(this.description) : this.hasDefaultSlotContent ? e("slot", null) : ""));
   }
   get hostElement() {
     return i(this);

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as e, g as r } from "./index-7a5365e2.js";
 
-import { l as i, a as n, o as d } from "./index-504f1a9e.js";
+import { l as i, a as n, o as d } from "./index-f2a66217.js";
 
 /**
  * Emits specified events from a given component context with the provided detail.

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

@@ -2,7 +2,7 @@ import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
 
 import { s as o, a as s } from "./action-sheet-1e24cb38.js";
 
-import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-504f1a9e.js";
+import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-f2a66217.js";
 
 const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as e, g as s } from "./index-7a5365e2.js";
 
-import { a as n, o as a, i as h, w as r, l as d } from "./index-504f1a9e.js";
+import { a as n, o as a, i as h, w as r, l as d } from "./index-f2a66217.js";
 
 const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 

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

@@ -1,8 +1,8 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
 
-import { l as s, e as a } from "./index-504f1a9e.js";
+import { l as s, e as a } from "./index-f2a66217.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 
 const l = n;
 

package/dist/q2-tecton-elements/q2-file-picker.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2FilePickerCss","Q2FilePickerStyle0","Q2FilePicker","this","queuedFiles","dimDropZone","e","disableEvent","isDropZoneHighlighted","grabDroppedFiles","droppedFiles","Array","from","dataTransfer","files","filesObject","buildFilesObject","emitChange","value","grabSelectedFiles","selectedFiles","target","highlightDropZone","render","h","class","hasLabel","hasDescription","htmlFor","label","loc","hasLabelSlotContent","name","id","description","hasDescriptionSlotContent","variant","dropZoneClasses","onDragEnter","onDragLeave","onDragOver","onDrop","ref","el","dropZone","areFilesUploading","Fragment","type","onTctClick","launchFileBrowser","href","maxFiles","disabled","intent","loading","onClick","size","undefined","onChange","browseButtonInput","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","disableLoaderIfAllFilesUploaded","classes","push","join","fileTypesArray","isArray","fileTypes","split","trim","hasSlotContent","filesToUpload","extractFilesOfInvalidTypes","extractFilesOverSizeLimit","extractFilesOverMaxFilesLimit","length","event","preventDefault","stopPropagation","some","tctChange","emit","fileExtension","pop","toLowerCase","includes","invalidFile","index","indexOf","filesOverMaxFilesLimit","excessFiles","filesOverSizeLimit","maxFileSize","overSizeFile","forceRerender","refreshCounter","fileName","animationName","filter","fileToDelete","find","toBeRemoved","toFixed","dispatchEvent","MouseEvent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n    from {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n    to {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes shrinkToCenterFadeOut {\n    from {\n        transform: scaleX(1) scaleY(1);\n        opacity: 1;\n    }\n    to {\n        transform: scaleX(0.75) scaleY(0.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n    animation-fill-mode: both;\n    animation-play-state: running;\n    animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n    animation: shrinkToCenterFadeOut 0.1s ease-out;\n    animation-play-state: running;\n    animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-icon-border-radius: 4px;\n    --tct-btn-neutral-text-active-font-color: #{var-list(\n            --tct-file-picker-item-close-btn-active-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n            --tct-file-picker-item-close-btn-hover-focus-ring-color,\n            --t-gray-1,\n            #0d0d0d\n        )};\n    --tct-btn-icon-padding: 0;\n    --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n            --tct-file-picker-item-border-color,\n            --t-gray-8,\n            #808080\n        )};\n    --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n    text-align: left;\n}\n\n.file-item-loading {\n    font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n    // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n    margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n    margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n    --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n    max-height: var(--tct-file-picker-list-max-height, 190px);\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n    display: flex;\n    flex-direction: column;\n    gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n    justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n    --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n    --tct-icon-stroke-width: 2px;\n}\n\n.label {\n    color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n    display: inline-block;\n    font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-label-font-weight, 600);\n    text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n    font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n    color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n    margin: 0;\n}\n\n.loading-message {\n    color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n    font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n    margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n    margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n    height: 30px;\n    width: 30px;\n    &:hover {\n        --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n    }\n}\n\n[slot='action'] {\n    display: flex;\n    align-items: center;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    Fragment,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n    invalidFiles: {\n        file: File;\n        status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n    }[];\n    validFiles: File[];\n};\n\n@Component({\n    tag: 'q2-file-picker',\n    styleUrl: 'q2-file-picker.scss',\n    shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n    // #region Own Properties\n\n    browseButtonInput: HTMLElement;\n    dropZone: HTMLElement;\n    fileItemsToBeDeleted;\n    queuedFiles: File[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    areFilesUploading: boolean = false;\n\n    @State()\n    displayedFiles: {\n        file: File;\n        status: FileStatus;\n        toBeRemoved?: boolean;\n    }[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * A description of the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n     * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n     * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n     * via JavaScript.\n     */\n    @Prop({ reflect: true })\n    fileTypes: string[] | string = [];\n\n    /**\n     * The label for the field. This is announced by screen readers when the field is focused.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of files that can be selected.\n     */\n    @Prop({ reflect: true })\n    // maxFiles: number | string = Infinity;\n    maxFiles: number = Infinity;\n\n    /**\n     * The maximum size (in bytes) of any file that can be selected.\n     */\n    @Prop({ reflect: true })\n    maxFileSize: number = Infinity;\n\n    /**\n     * An array of objects representing the status of the files being uploaded.\n     * Each object should have a `name` property (the file name) and a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed' or 'uploaded'.\n     */\n    @Prop({ reflect: true })\n    status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n    /**\n     * Returns an array of File objects representing the files selected by the\n     * user. If no files are selected, the value is an empty array.\n     * @readonly\n     */\n    @Prop({ mutable: true })\n    value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n    /**\n     * Determines if the file picker is a browse button or a drop zone with a\n     * browse link.\n     */\n    @Prop({ reflect: true })\n    variant: 'browse' | 'browse-drop' = 'browse';\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    tctChange: EventEmitter<FilesObject>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('status')\n    updateFileList(newValue: { name: string; status: FileStatus }[]) {\n        newValue.forEach(statusItem => {\n            const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n            if (matchingQueuedFileIndex > -1) {\n                const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n                this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n            } else {\n                const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n                    file => file.file.name === statusItem.name\n                );\n                if (matchingDisplayedFileIndex > -1) {\n                    this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dropZoneClasses() {\n        const classes = ['drop-zone'];\n        if (this.isDropZoneHighlighted) {\n            classes.push('drop-zone-highlighted');\n        }\n\n        return classes.join(' ');\n    }\n\n    get fileTypesArray() {\n        return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n    }\n\n    get hasDescription() {\n        return !!this.description || this.hasDescriptionSlotContent;\n    }\n\n    get hasDescriptionSlotContent() {\n        return hasSlotContent(this.el, 'description');\n    }\n\n    get hasLabel() {\n        return !!this.label || this.hasLabelSlotContent;\n    }\n\n    get hasLabelSlotContent() {\n        return hasSlotContent(this.el, 'label');\n    }\n\n    buildFilesObject(filesToUpload: File[]): FilesObject {\n        const invalidFiles = [];\n        invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n        invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n        this.displayedFiles = [...invalidFiles];\n\n        if (filesToUpload.length === 0) {\n            this.areFilesUploading = false;\n        } else {\n            this.queuedFiles = filesToUpload;\n        }\n\n        return { invalidFiles, validFiles: filesToUpload };\n    }\n\n    dimDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n    };\n\n    disableEvent(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    disableLoaderIfAllFilesUploaded() {\n        if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n            this.areFilesUploading = false;\n        }\n    }\n\n    emitChange(filesObject: FilesObject) {\n        this.areFilesUploading = filesObject.validFiles.length > 0;\n        this.tctChange.emit(filesObject);\n    }\n\n    extractFilesOfInvalidTypes(files: File[]) {\n        const invalidFiles = [];\n\n        if (this.fileTypesArray.length === 0) return invalidFiles;\n\n        files.forEach(file => {\n            const fileExtension = file.name.split('.').pop().toLowerCase();\n            if (!this.fileTypesArray.includes(fileExtension)) {\n                invalidFiles.push({ file, status: 'invalid-type' });\n            }\n        });\n\n        // Remove invalid files from the files array\n        invalidFiles.forEach(invalidFile => {\n            const index = files.indexOf(invalidFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return invalidFiles;\n    }\n\n    extractFilesOverMaxFilesLimit(files: File[]) {\n        const filesOverMaxFilesLimit = [];\n\n        if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n        if (files.length > this.maxFiles) {\n            const excessFiles = files.splice(this.maxFiles);\n            excessFiles.forEach(file => {\n                filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n            });\n        }\n\n        return filesOverMaxFilesLimit;\n    }\n\n    extractFilesOverSizeLimit(files: File[]) {\n        const filesOverSizeLimit = [];\n\n        if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n        files.forEach(file => {\n            if (file.size > this.maxFileSize) {\n                filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n            }\n        });\n\n        // Remove files over size limit from the files array\n        filesOverSizeLimit.forEach(overSizeFile => {\n            const index = files.indexOf(overSizeFile.file);\n            if (index > -1) {\n                files.splice(index, 1);\n            }\n        });\n\n        return filesOverSizeLimit;\n    }\n\n    forceRerender() {\n        this.refreshCounter += 1; // Triggers re-render\n    }\n\n    getAnimationendHandlerToRemoveFileItem(fileName: string) {\n        return (e: AnimationEvent) => {\n            if (e.animationName === 'shrinkToCenterFadeOut') {\n                this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n            }\n        };\n    }\n\n    getClickHandlerToRemoveFileItem(fileName: string) {\n        return () => {\n            const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n            if (fileToDelete) {\n                fileToDelete.toBeRemoved = true;\n                this.forceRerender();\n            }\n        };\n    }\n\n    getFileItemClasses(fileName: string) {\n        const classes = ['file-item'];\n        const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n        if (matchingFile?.toBeRemoved) {\n            classes.push('fade-out');\n        } else {\n            classes.push('fade-in');\n        }\n        return classes.join(' ');\n    }\n\n    getFileItemStatusMessage(status: FileStatus, size: number) {\n        switch (status) {\n            case 'invalid-type':\n                return loc('tecton.element.filePicker.unsupportedFileType');\n            case 'over-size-limit':\n                return loc('tecton.element.filePicker.sizeExceedsLimit');\n            case 'over-max-files-limit':\n                return loc('tecton.element.filePicker.overMaxFilesLimit');\n            case 'in-progress':\n                return loc('tecton.element.filePicker.uploadingEllipsis');\n            case 'failed':\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n        }\n    }\n\n    grabDroppedFiles = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = false;\n        const droppedFiles = Array.from(e.dataTransfer.files);\n        const filesObject = this.buildFilesObject(droppedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    grabSelectedFiles = (e: Event) => {\n        const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n        const filesObject = this.buildFilesObject(selectedFiles);\n\n        this.emitChange(filesObject);\n        this.value = filesObject;\n    };\n\n    highlightDropZone = (e: DragEvent) => {\n        this.disableEvent(e);\n        this.isDropZoneHighlighted = true;\n    };\n\n    launchFileBrowser() {\n        this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => {\n        return (\n            <div class=\"file-picker\">\n                {(this.hasLabel || this.hasDescription) && (\n                    <div class=\"heading\">\n                        {this.hasLabel && (\n                            <label\n                                class=\"label\"\n                                htmlFor=\"file-field\"\n                                test-id=\"label\"\n                            >\n                                {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n                            </label>\n                        )}\n                        {this.hasDescription && (\n                            <div\n                                class=\"description\"\n                                id=\"description\"\n                                test-id=\"description\"\n                            >\n                                {!!this.description ? (\n                                    loc(this.description)\n                                ) : this.hasDescriptionSlotContent ? (\n                                    <slot name=\"description\" />\n                                ) : (\n                                    ''\n                                )}\n                            </div>\n                        )}\n                    </div>\n                )}\n\n                {(this.variant === 'browse-drop' && (\n                    <div\n                        class={this.dropZoneClasses}\n                        onDragEnter={this.disableEvent}\n                        onDragLeave={this.dimDropZone}\n                        onDragOver={this.highlightDropZone}\n                        onDrop={this.grabDroppedFiles}\n                        ref={el => (this.dropZone = el ?? this.dropZone)}\n                        test-id=\"drop-zone\"\n                    >\n                        {(this.areFilesUploading && (\n                            <Fragment>\n                                <q2-loading class=\"loading\"></q2-loading>\n                                <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n                            </Fragment>\n                        )) || (\n                            <Fragment>\n                                <q2-icon type=\"upload\"></q2-icon>\n                                <p class=\"drop-zone-text\">\n                                    <q2-link\n                                        label={loc('tecton.element.filePicker.browse')}\n                                        onTctClick={() => this.launchFileBrowser()}\n                                        variant=\"inline\"\n                                        test-id=\"browse-link\"\n                                        href=\"javascript:void(0)\"\n                                    />\n                                    {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n                                </p>\n                            </Fragment>\n                        )}\n                    </div>\n                )) || (\n                    <div\n                        class=\"browse\"\n                        test-id=\"browse\"\n                    >\n                        <q2-btn\n                            disabled={this.areFilesUploading}\n                            intent=\"workflow-primary\"\n                            loading={this.areFilesUploading}\n                            onClick={() => this.launchFileBrowser()}\n                            size=\"medium\"\n                            test-id=\"browse-button\"\n                        >\n                            <q2-icon type=\"paperclip\"></q2-icon>\n                            <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n                        </q2-btn>\n                    </div>\n                )}\n                <input\n                    aria-describedby={(!!this.description && 'description') || undefined}\n                    class=\"sr\"\n                    id=\"file-field\"\n                    onChange={this.grabSelectedFiles}\n                    ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n                    type=\"file\"\n                    test-id=\"file-input\"\n                    multiple\n                />\n                <div class=\"file-list-container\">\n                    <q2-list class=\"file-list\">\n                        {this.displayedFiles.map(file => (\n                            <q2-item\n                                class={this.getFileItemClasses(file.file.name)}\n                                key={file.file.name}\n                                onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n                            >\n                                <div slot=\"bullet\">\n                                    {file.status === 'invalid-type' ||\n                                    file.status === 'over-size-limit' ||\n                                    file.status === 'failed' ||\n                                    file.status === 'over-max-files-limit' ? (\n                                        <q2-icon\n                                            class=\"icon-error\"\n                                            type=\"error\"\n                                        ></q2-icon>\n                                    ) : file.status === 'in-progress' ? (\n                                        <q2-loading class=\"file-item-loading\"></q2-loading>\n                                    ) : (\n                                        <q2-icon\n                                            class=\"icon-success\"\n                                            type=\"success\"\n                                        ></q2-icon>\n                                    )}\n                                </div>\n                                <div slot=\"header\">{file.file.name}</div>\n                                <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n                                <div slot=\"action\">\n                                    <q2-btn\n                                        class=\"dismiss-button\"\n                                        intent=\"neutral-text\"\n                                        onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n                                    >\n                                        <q2-icon type=\"close\"></q2-icon>\n                                    </q2-btn>\n                                </div>\n                            </q2-item>\n                        ))}\n                    </q2-list>\n                </div>\n            </div>\n        );\n    };\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { r as o, h as a } from "./index-7a5365e2.js";
+
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{--tct-input-margin:var(--comp-spacing);--tct-select-margin:var(--comp-spacing);--tct-calendar-margin:var(--comp-spacing);--tct-file-picker-margin:var(--comp-spacing);--tct-textarea-margin:var(--comp-spacing);--tct-checkbox-margin:var(--comp-spacing);--tct-checkbox-group-margin:var(--comp-spacing);--tct-radio-group-margin:var(--comp-spacing)}:host([spacing=none]) .container{--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none) 0)}:host([spacing=compact]) .container{--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0)}:host(:not([spacing]),[spacing=normal]) .container{--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0)}:host([spacing=comfortable]) .container{--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0)}";
+
+const n = c;
+
+const i = class {
+  constructor(a) {
+    o(this, a);
+    this.spacing = "normal";
+  }
+  render() {
+    return a("div", {
+      key: "aa542ff0f5ecdee36ffdb070cb863553c3d725bc",
+      class: "container"
+    }, a("slot", {
+      key: "980dc6939c003dfbd57189e7ba9fb151033e8b29"
+    }));
+  }
+};
+
+i.style = n;
+
+export { i as q2_form };
+//# sourceMappingURL=q2-form.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2FormCss","Q2FormStyle0","Q2Checkbox","render","h","key","class"],"sources":["src/components/q2-form/q2-form.scss?tag=q2-form&encapsulation=shadow","src/components/q2-form/q2-form.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.container {\n    :host([spacing='none']) & {\n        --comp-spacing-none: #{var-list(--app-scale-0x, 0px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-none, unquote('var(--comp-spacing-none) 0'))};\n    }\n    :host([spacing='compact']) & {\n        --comp-spacing-compact: #{var-list(--app-scale-3x, 15px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-compact, unquote('var(--comp-spacing-compact) 0'))};\n    }\n    :host(:not([spacing]), [spacing='normal']) & {\n        --comp-spacing-normal: #{var-list(--app-scale-5x, 25px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-normal, unquote('var(--comp-spacing-normal) 0'))};\n    }\n\n    :host([spacing='comfortable']) & {\n        --comp-spacing-comfortable: #{var-list(--app-scale-7x, 35px)};\n        --comp-spacing: #{var-list(--tct-form-spacing-comfortable, unquote('var(--comp-spacing-comfortable) 0'))};\n    }\n\n    --tct-input-margin: var(--comp-spacing);\n    --tct-select-margin: var(--comp-spacing);\n    --tct-calendar-margin: var(--comp-spacing);\n    --tct-file-picker-margin: var(--comp-spacing);\n    --tct-textarea-margin: var(--comp-spacing);\n    --tct-checkbox-margin: var(--comp-spacing);\n    --tct-checkbox-group-margin: var(--comp-spacing);\n    --tct-radio-group-margin: var(--comp-spacing);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\n\n@Component({ tag: 'q2-form', shadow: true, styleUrl: 'q2-form.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    /** Changes the vertical spacing of the form-fields contained within the component's slot */\n    @Prop({ reflect: true }) spacing: 'none' | 'compact' | 'normal' | 'comfortable' = 'normal';\n\n    render() {\n        return (\n            <div class=\"container\">\n                <slot />\n            </div>\n        );\n    }\n}\n"],"mappings":";;AAAA,MAAMA,IAAY;;AAClB,MAAAC,IAAeD;;MCEFE,IAAU;;;mBAE+D;;EAElF,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAA;MAAAC,KAAA"}

package/dist/q2-tecton-elements/q2-formatted-text.entry.js

@@ -49,11 +49,11 @@ const s = class {
   render() {
     const {formattedTextClasses: t} = this;
     return e("div", {
-      key: "1957c3f976bc87c24859d94c27e1baf35da8fc03",
+      key: "f8729c7f3dea39a14da8add529ae642e78d20643",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "8dac0d558d205fc183d16c4aef922ab470eec6ab"
+      key: "94390c62b148e3a0ce2d470377818ac442e9257e"
     }, this.formattedValue));
   }
   static get watchers() {

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
 
-import { o as n, e as r } from "./index-504f1a9e.js";
+import { o as n, e as r } from "./index-f2a66217.js";
 
 const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 
@@ -106,44 +106,44 @@ const d = class {
   render() {
     const {clickable: t} = this;
     return e("div", {
-      key: "0829fd5b35d9479ab8a7dae744e8a09e90a1a128",
+      key: "7b0894fa0180d68cba7b47a6e63f837255a70057",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
     }, this.hasBulletSlotContent && e("div", {
-      key: "6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2",
+      key: "5ef5a26d2fb4644e9b9d902bc7ff314a90df9976",
       class: this.bulletClasses
     }, e("slot", {
-      key: "9bd9880d99124c1102725b5ce6ca49ac1e229cf9",
+      key: "7db082ffd73b04494e67cbdee93b140afb11e016",
       name: "bullet"
     })), e("div", {
-      key: "0c184236511ba043c91a009c93680858e34de545",
+      key: "42212f56e12da4b57ae14b613efcdc59fbbc93b4",
       class: this.mainClasses
     }, this.hasHeaderSlotContent && e("div", {
-      key: "2570b5fd60955dbbc97f5f3d941a5d653785fb0e",
+      key: "9153d8de21c4809716f17f31717d97463bb045a5",
       class: "header"
     }, e("slot", {
-      key: "a438cafe8aeded03ee814f736ae897852a9f1415",
+      key: "ab504063f003daa1ea3984555ccf703426116dc0",
       name: "header"
     })), this.hasBodySlotContent && e("div", {
-      key: "270585a7a4ca111aedd4baeab101c353814aa72c",
+      key: "1a8b650df30033853919f6492aaa194f60a11c60",
       class: "body"
     }, e("slot", {
-      key: "cc95afec425e06c0a9edccedb0420207ccab88a0",
+      key: "b8262d4ef02751e63b62b525543394d0f14824db",
       name: "body"
     }))), this.hasActionSlotContent && e("div", {
-      key: "c6a32baa731bd79c57a625d615058442a5bc764a",
+      key: "056bc3b9f932495baf46613b66857325d19c0e3b",
       class: this.actionClasses
     }, e("slot", {
-      key: "2b3104f1e0b4eed5e605c5784468f608240a881b",
+      key: "f5332dd36657b470c993b773195044f7c809fe66",
       name: "action"
     })), this.hasFooterSlotContent && e("div", {
-      key: "0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35",
+      key: "111359c030a37ad8e72df6e3a40d8b8d226a4734",
       class: this.footerClasses
     }, e("slot", {
-      key: "76ae62c0b433f78b187853da2cf40394f7ca315e",
+      key: "8afe6c9372a9c53663d6383116256f19b470858b",
       name: "footer"
     })));
   }
@@ -154,9 +154,9 @@ const d = class {
 
 d.style = s;
 
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
 
-const l = c;
+const c = l;
 
 const h = class {
   constructor(e) {
@@ -232,7 +232,7 @@ const h = class {
   }
 };
 
-h.style = l;
+h.style = c;
 
 const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
 
@@ -302,23 +302,23 @@ const f = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "e4371faae59ae85dee324d6d6783a4b93c23f67f",
+      key: "cb7c090b2e018bc46ef3ae829f4fd7f3cbb896e8",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "59cc98b62d2581a66a9ed127189fb23364c49bff",
+      key: "16672b343894a78a378b17e18f21b1412b103683",
       class: this.headerClasses
     }, e("div", {
-      key: "568b6fab57c7552d5a577d19bd31760f6d1aa461",
+      key: "4f78dabab7f982fb6e472c29195bbcc8f4c6758c",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "d27e785788847cf1a422568383bfe5d986764b2b",
+      key: "7ce97a75b66749f137a6c1b70827ddcef60df8ce",
       name: "filter"
     })), e("div", {
-      key: "7a00add6911167d7a27008f10f5d44cfae5d80b2",
+      key: "05f39d183177a30f3d5edacecafa57503e1bef9c",
       role: "list"
     }, e("slot", {
-      key: "dd5a0290091b0f1cb00a14cde43bab36e87573d2"
+      key: "37be8bca5d3b81404db947d96605585b3a1cce32"
     })));
   }
   get hostElement() {