q2-tecton-elements 1.55.3 → 1.56.0

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-f2a66217.js";
+import { l as a, e as s } from "./index-c215e8ef.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{--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 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-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);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;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);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-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.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);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);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;
 
@@ -26,6 +26,8 @@ const c = class {
     this.grabSelectedFiles = t => {
       const e = Array.from(t.target.files);
       const i = this.buildFilesObject(e);
+      // Reset the input value to allow re-selection of the same file
+            this.browseButtonInput.value = "";
       this.emitChange(i);
       this.value = i;
     };
@@ -43,13 +45,13 @@ const c = class {
       class: "label",
       htmlFor: "file-field",
       "test-id": "label"
-    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? i("slot", {
+    }, !!this.label ? a(this.label) : this.hasLabelSlotContent ? i("slot", {
       name: "label"
     }) : ""), this.hasDescription && i("div", {
       class: "description",
       id: "description",
       "test-id": "description"
-    }, !!this.description ? s(this.description) : this.hasDescriptionSlotContent ? i("slot", {
+    }, !!this.description ? a(this.description) : this.hasDescriptionSlotContent ? i("slot", {
       name: "description"
     }) : "")), this.variant === "browse-drop" && i("div", {
       class: this.dropZoneClasses,
@@ -63,17 +65,17 @@ const c = class {
       class: "loading"
     }), i("p", {
       class: "drop-zone-text"
-    }, s("tecton.element.filePicker.uploadingEllipsis"))) || i(r, null, i("q2-icon", {
+    }, a("tecton.element.filePicker.uploadingEllipsis"))) || i(r, null, i("q2-icon", {
       type: "upload"
     }), i("p", {
       class: "drop-zone-text"
     }, i("q2-link", {
-      label: s("tecton.element.filePicker.browse"),
+      label: a("tecton.element.filePicker.browse"),
       onTctClick: () => this.launchFileBrowser(),
       variant: "inline",
       "test-id": "browse-link",
       href: "javascript:void(0)"
-    }), s("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || i("div", {
+    }), a("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || i("div", {
       class: "browse",
       "test-id": "browse"
     }, i("q2-btn", {
@@ -81,11 +83,11 @@ const c = class {
       intent: "workflow-primary",
       loading: this.areFilesUploading,
       onClick: () => this.launchFileBrowser(),
-      size: "medium",
+      size: this.actualButtonSize,
       "test-id": "browse-button"
     }, i("q2-icon", {
       type: "paperclip"
-    }), i("span", null, s("tecton.element.filePicker.attachFiles", [ this.maxFiles ])))), i("input", {
+    }), i("span", null, a("tecton.element.filePicker.attachFiles", [ this.maxFiles ])))), i("input", {
       "aria-describedby": !!this.description && "description" || undefined,
       class: "sr",
       id: "file-field",
@@ -115,8 +117,9 @@ const c = class {
     })), i("div", {
       slot: "header"
     }, t.file.name), i("div", {
+      class: "file-item-info",
       slot: "body"
-    }, this.getFileItemStatusMessage(t.status, t.file.size)), i("div", {
+    }, this.getFileItemStatusMessage(t)), i("div", {
       slot: "action"
     }, i("q2-btn", {
       class: "dismiss-button",
@@ -129,6 +132,7 @@ const c = class {
     this.displayedFiles = [];
     this.isDropZoneHighlighted = false;
     this.refreshCounter = 0;
+    this.buttonSize = "medium";
     this.description = undefined;
     this.fileTypes = [];
     this.label = undefined;
@@ -156,6 +160,9 @@ const c = class {
         const e = this.displayedFiles.findIndex((e => e.file.name === t.name));
         if (e > -1) {
           this.displayedFiles[e].status = t.status;
+          if (t.status === "failed" && t.message) {
+            this.displayedFiles[e].message = t.message;
+          }
           this.disableLoaderIfAllFilesUploaded();
         }
       }
@@ -163,6 +170,9 @@ const c = class {
   }
   // #endregion
   // #region Local Methods
+  get actualButtonSize() {
+    return this.buttonSize === "none" ? undefined : this.buttonSize;
+  }
   get dropZoneClasses() {
     const t = [ "drop-zone" ];
     if (this.isDropZoneHighlighted) {
@@ -177,13 +187,13 @@ const c = class {
     return !!this.description || this.hasDescriptionSlotContent;
   }
   get hasDescriptionSlotContent() {
-    return a(this.el, "description");
+    return s(this.el, "description");
   }
   get hasLabel() {
     return !!this.label || this.hasLabelSlotContent;
   }
   get hasLabelSlotContent() {
-    return a(this.el, "label");
+    return s(this.el, "label");
   }
   buildFilesObject(t) {
     const e = [];
@@ -299,26 +309,27 @@ const c = class {
     }
     return e.join(" ");
   }
-  getFileItemStatusMessage(t, e) {
-    switch (t) {
+  getFileItemStatusMessage(t) {
+    switch (t.status) {
      case "invalid-type":
-      return s("tecton.element.filePicker.unsupportedFileType");
+      return a("tecton.element.filePicker.unsupportedFileType");
 
      case "over-size-limit":
-      return s("tecton.element.filePicker.sizeExceedsLimit");
+      return a("tecton.element.filePicker.sizeExceedsLimit");
 
      case "over-max-files-limit":
-      return s("tecton.element.filePicker.overMaxFilesLimit");
+      return a("tecton.element.filePicker.overMaxFilesLimit");
 
      case "in-progress":
-      return s("tecton.element.filePicker.uploadingEllipsis");
+      return a("tecton.element.filePicker.uploadingEllipsis");
 
      case "failed":
-      return s("tecton.element.filePicker.uploadFailed");
+      if (t.message) return a(t.message);
+      return a("tecton.element.filePicker.uploadFailed");
 
      case "uploaded":
      default:
-      return s("tecton.element.filePicker.fileSize", [ (e / (1e3 * 1e3)).toFixed(2) ]);
+      return a("tecton.element.filePicker.fileSize", [ (t.file.size / (1e3 * 1e3)).toFixed(2) ]);
     }
   }
   launchFileBrowser() {

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    --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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"}
+{"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","browseButtonInput","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","actualButtonSize","undefined","onChange","multiple","displayedFiles","map","file","getFileItemClasses","key","onAnimationEnd","getAnimationendHandlerToRemoveFileItem","slot","status","getFileItemStatusMessage","getClickHandlerToRemoveFileItem","Infinity","invalidFiles","validFiles","updateFileList","newValue","forEach","statusItem","matchingQueuedFileIndex","findIndex","matchingFile","splice","matchingDisplayedFileIndex","message","disableLoaderIfAllFilesUploaded","buttonSize","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","displayedFile","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-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\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    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\n    min-width: var(--tct-file-picker-drop-zone-min-width, 320px);\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-info {\n    @include line-clamp(1);\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    max-width: var(--tct-file-picker-drop-zone-max-width, 640px);\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 DisplayedFile = {\n    file: File;\n    message?: string;\n    status: FileStatus;\n    toBeRemoved?: boolean;\n};\ntype UploadFileStatus = 'in-progress' | 'failed' | 'uploaded';\ntype FileStatus = UploadFileStatus | 'invalid-type' | 'over-size-limit' | 'over-max-files-limit';\nexport type StatusFile = {\n    name: string;\n    status: UploadFileStatus;\n    message?: string;\n};\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@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: DisplayedFile[] = [];\n\n    @State()\n    isDropZoneHighlighted: boolean = false;\n\n    @State()\n    refreshCounter = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The size of the browse button. Can be 'none', 'small', 'medium', or 'large'.\n     */\n    @Prop({ reflect: true })\n    buttonSize: 'none' | 'small' | 'medium' | 'large' = 'medium';\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), a `status`\n     * property (the status of the file) that equals either 'in-progress',\n     * 'failed', or 'uploaded', and an optional `message` property.\n     *\n     * Custom messages provided in the `message` property will only be used for\n     * failed uploads (`status: 'failed'`). This allows for more specific error\n     * messages in failure scenarios, while ensuring that all other file status\n     * messages remain consistent and aligned with approved design/UX standards.\n     * Custom messages for failed uploads are limited to a single line.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    status: StatusFile[] = [];\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: [] };\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: StatusFile[]) {\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                    if (statusItem.status === 'failed' && statusItem.message) {\n                        this.displayedFiles[matchingDisplayedFileIndex].message = statusItem.message;\n                    }\n                    this.disableLoaderIfAllFilesUploaded();\n                }\n            }\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actualButtonSize() {\n        return this.buttonSize === 'none' ? undefined : this.buttonSize;\n    }\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(displayedFile: DisplayedFile) {\n        switch (displayedFile.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                if (displayedFile.message) return loc(displayedFile.message);\n                return loc('tecton.element.filePicker.uploadFailed');\n            case 'uploaded':\n            default:\n                return loc('tecton.element.filePicker.fileSize', [\n                    (displayedFile.file.size / (1000 * 1000)).toFixed(2),\n                ]);\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        // Reset the input value to allow re-selection of the same file\n        (this.browseButtonInput as HTMLInputElement).value = '';\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={this.actualButtonSize}\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\n                                    class=\"file-item-info\"\n                                    slot=\"body\"\n                                >\n                                    {this.getFileItemStatusMessage(file)}\n                                </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

@@ -1,25 +1,25 @@
-import { r as o, h as a } from "./index-7a5365e2.js";
+import { r as a, h as o } 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 = "*{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-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 c = n;
 
 const i = class {
-  constructor(a) {
-    o(this, a);
+  constructor(o) {
+    a(this, o);
     this.spacing = "normal";
   }
   render() {
-    return a("div", {
-      key: "aa542ff0f5ecdee36ffdb070cb863553c3d725bc",
+    return o("div", {
+      key: "04799c303aece51e5a4db5b73b250b23042ac929",
       class: "container"
-    }, a("slot", {
-      key: "980dc6939c003dfbd57189e7ba9fb151033e8b29"
+    }, o("slot", {
+      key: "8461f1f0db3fe541583548fe574a12a6dfb8bd26"
     }));
   }
 };
 
-i.style = n;
+i.style = c;
 
 export { i as q2_form };
 //# sourceMappingURL=q2-form.entry.js.map

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

@@ -1 +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"}
+{"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-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: "f8729c7f3dea39a14da8add529ae642e78d20643",
+      key: "59f16336df671d957674678a7c129652ba98672d",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "94390c62b148e3a0ce2d470377818ac442e9257e"
+      key: "9bdf70755092e11ad43b2f7d6d487d0bb0b838a1"
     }, this.formattedValue));
   }
   static get watchers() {

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

@@ -0,0 +1,135 @@
+import { r as i, h as s, H as t } from "./index-7a5365e2.js";
+
+const d = ':host{--grid-column-start:"";--grid-column-end:"";--grid-row-start:"";--grid-row-end:"";--justify-self:"";--align-self:"";--z-index:"";--xs-grid-column-start:"";--xs-grid-column-end:"";--xs-grid-row-start:"";--xs-grid-row-end:"";--xs-justify-self:"";--xs-align-self:"";--xs-z-index:"";--sm-grid-column-start:"";--sm-grid-column-end:"";--sm-grid-row-start:"";--sm-grid-row-end:"";--sm-justify-self:"";--sm-align-self:"";--sm-z-index:"";--md-grid-column-start:"";--md-grid-column-end:"";--md-grid-row-start:"";--md-grid-row-end:"";--md-justify-self:"";--md-align-self:"";--md-z-index:"";--lg-grid-column-start:"";--lg-grid-column-end:"";--lg-grid-row-start:"";--lg-grid-row-end:"";--lg-justify-self:"";--lg-align-self:"";--lg-z-index:"";--xl-grid-column-start:"";--xl-grid-column-end:"";--xl-grid-row-start:"";--xl-grid-row-end:"";--xl-justify-self:"";--xl-align-self:"";--xl-z-index:""}:host{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end);grid-row-start:var(--grid-row-start);grid-row-end:var(--grid-row-end);justify-self:var(--justify-self);align-self:var(--align-self);z-index:var(--z-index)}@media screen and (min-width: 480px){:host{grid-column-start:var(--xs-grid-column-start);grid-column-end:var(--xs-grid-column-end);grid-row-start:var(--xs-grid-row-start);grid-row-end:var(--xs-grid-row-end);justify-self:var(--xs-justify-self);align-self:var(--xs-align-self);z-index:var(--xs-z-index)}}@media screen and (min-width: 768px){:host{grid-column-start:var(--sm-grid-column-start);grid-column-end:var(--sm-grid-column-end);grid-row-start:var(--sm-grid-row-start);grid-row-end:var(--sm-grid-row-end);justify-self:var(--sm-justify-self);align-self:var(--sm-align-self);z-index:var(--sm-z-index)}}@media screen and (min-width: 992px){:host{grid-column-start:var(--md-grid-column-start);grid-column-end:var(--md-grid-column-end);grid-row-start:var(--md-grid-row-start);grid-row-end:var(--md-grid-row-end);justify-self:var(--md-justify-self);align-self:var(--md-align-self);z-index:var(--md-z-index)}}@media screen and (min-width: 1200px){:host{grid-column-start:var(--lg-grid-column-start);grid-column-end:var(--lg-grid-column-end);grid-row-start:var(--lg-grid-row-start);grid-row-end:var(--lg-grid-row-end);justify-self:var(--lg-justify-self);align-self:var(--lg-align-self);z-index:var(--lg-z-index)}}@media screen and (min-width: 1400px){:host{grid-column-start:var(--xl-grid-column-start);grid-column-end:var(--xl-grid-column-end);grid-row-start:var(--xl-grid-row-start);grid-row-end:var(--xl-grid-row-end);justify-self:var(--xl-justify-self);align-self:var(--xl-align-self);z-index:var(--xl-z-index)}}';
+
+const r = d;
+
+const n = class {
+  constructor(s) {
+    i(this, s);
+    this.align = "auto";
+    this.columnSpan = 1;
+    this.columnStart = "auto";
+    this.justify = "auto";
+    this.lgAlign = undefined;
+    this.lgColumnSpan = undefined;
+    this.lgColumnStart = undefined;
+    this.lgJustify = undefined;
+    this.lgRowSpan = undefined;
+    this.lgRowStart = undefined;
+    this.lgZIndex = undefined;
+    this.mdAlign = undefined;
+    this.mdColumnSpan = undefined;
+    this.mdColumnStart = undefined;
+    this.mdJustify = undefined;
+    this.mdRowSpan = undefined;
+    this.mdRowStart = undefined;
+    this.mdZIndex = undefined;
+    this.rowSpan = 1;
+    this.rowStart = "auto";
+    this.smAlign = undefined;
+    this.smColumnSpan = undefined;
+    this.smColumnStart = undefined;
+    this.smJustify = undefined;
+    this.smRowSpan = undefined;
+    this.smRowStart = undefined;
+    this.smZIndex = undefined;
+    this.xlAlign = undefined;
+    this.xlColumnSpan = undefined;
+    this.xlColumnStart = undefined;
+    this.xlJustify = undefined;
+    this.xlRowSpan = undefined;
+    this.xlRowStart = undefined;
+    this.xlZIndex = undefined;
+    this.xsAlign = undefined;
+    this.xsColumnSpan = undefined;
+    this.xsColumnStart = undefined;
+    this.xsJustify = undefined;
+    this.xsRowSpan = undefined;
+    this.xsRowStart = undefined;
+    this.xsZIndex = undefined;
+    this.zIndex = 0;
+  }
+  // #endregion
+  // #region Local Methods
+  get computedLgZIndex() {
+    return this.lgZIndex || this.lgZIndex === 0 ? this.lgZIndex : this.computedMdZIndex;
+  }
+  get computedMdZIndex() {
+    return this.mdZIndex || this.mdZIndex === 0 ? this.mdZIndex : this.computedSmZIndex;
+  }
+  get computedSmZIndex() {
+    return this.smZIndex || this.smZIndex === 0 ? this.smZIndex : this.computedXsZIndex;
+  }
+  get computedXlZIndex() {
+    return this.xlZIndex || this.xlZIndex === 0 ? this.xlZIndex : this.computedLgZIndex;
+  }
+  get computedXsZIndex() {
+    return this.xsZIndex || this.xsZIndex === 0 ? this.xsZIndex : this.zIndex;
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const i = {
+      // base:
+      "--grid-column-start": `${this.columnStart}`,
+      "--grid-column-end": `span ${this.columnSpan}`,
+      "--grid-row-start": `${this.rowStart}`,
+      "--grid-row-end": `span ${this.rowSpan}`,
+      "--justify-self": this.justify,
+      "--align-self": this.align,
+      "--z-index": `${this.zIndex}`,
+      // xs:
+      "--xs-grid-column-start": `${this.xsColumnStart || this.columnStart}`,
+      "--xs-grid-column-end": `span ${this.xsColumnSpan || this.columnSpan}`,
+      "--xs-grid-row-start": `${this.xsRowStart || this.rowStart}`,
+      "--xs-grid-row-end": `span ${this.xsRowSpan || this.rowSpan}`,
+      "--xs-justify-self": this.xsJustify || this.justify,
+      "--xs-align-self": this.xsAlign || this.align,
+      "--xs-z-index": `${this.computedXsZIndex}`,
+      // sm:
+      "--sm-grid-column-start": `${this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+      "--sm-grid-column-end": `span ${this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+      "--sm-grid-row-start": `${this.smRowStart || this.xsRowStart || this.rowStart}`,
+      "--sm-grid-row-end": `span ${this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+      "--sm-justify-self": this.smJustify || this.xsJustify || this.justify,
+      "--sm-align-self": this.smAlign || this.xsAlign || this.align,
+      "--sm-z-index": `${this.computedSmZIndex}`,
+      // md:
+      "--md-grid-column-start": `${this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+      "--md-grid-column-end": `span ${this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+      "--md-grid-row-start": `${this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+      "--md-grid-row-end": `span ${this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+      "--md-justify-self": this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+      "--md-align-self": this.mdAlign || this.smAlign || this.xsAlign || this.align,
+      "--md-z-index": `${this.computedMdZIndex}`,
+      // lg:
+      "--lg-grid-column-start": `${this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+      "--lg-grid-column-end": `span ${this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+      "--lg-grid-row-start": `${this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+      "--lg-grid-row-end": `span ${this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+      "--lg-justify-self": this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+      "--lg-align-self": this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+      "--lg-z-index": `${this.computedLgZIndex}`,
+      // xl:
+      "--xl-grid-column-start": `${this.xlColumnStart || this.lgColumnStart || this.mdColumnStart || this.smColumnStart || this.xsColumnStart || this.columnStart}`,
+      "--xl-grid-column-end": `span ${this.xlColumnSpan || this.lgColumnSpan || this.mdColumnSpan || this.smColumnSpan || this.xsColumnSpan || this.columnSpan}`,
+      "--xl-grid-row-start": `${this.xlRowStart || this.lgRowStart || this.mdRowStart || this.smRowStart || this.xsRowStart || this.rowStart}`,
+      "--xl-grid-row-end": `span ${this.xlRowSpan || this.lgRowSpan || this.mdRowSpan || this.smRowSpan || this.xsRowSpan || this.rowSpan}`,
+      "--xl-justify-self": this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+      "--xl-align-self": this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+      "--xl-z-index": `${this.computedXlZIndex}`
+    };
+    return s(t, {
+      key: "f8e261f2b0ef797a8b66f6da08579be08c1c47b0",
+      style: i
+    }, s("slot", {
+      key: "41d23b118b2030a76a31a151cee55e080d2b804e"
+    }));
+  }
+};
+
+n.style = r;
+
+export { n as q2_grid_area };
+//# sourceMappingURL=q2-grid-area.entry.js.map