q2-tecton-elements 1.52.2 → 1.53.0

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

@@ -0,0 +1,338 @@
+import { r as e, c as i, h as t, F as r, g as o } from "./index-7a5365e2.js";
+
+import { l as s, e as a } from "./index-d18e2a20.js";
+
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{display:block}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4D4D4D));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0D0D0D));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #E8F5FC));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #BEE1F6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));--tct-btn-padding:0;--tct-item-body-color:var(--tct-file-picker-file-item-size-color, var(--t-gray-6, #4D4D4D));--tct-item-body-font-size:var(--tct-file-picker-file-item-size-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-file-item-size-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-file-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-file-item-border-width, 1px) solid var(--tct-file-picker-file-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-file-item-name-color, var(--t-gray-1, #0D0D0D));--tct-item-header-font-size:var(--tct-file-picker-file-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-file-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-file-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px))}.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:182px;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));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))}";
+
+const l = n;
+
+const c = class {
+  constructor(o) {
+    e(this, o);
+    this.tctChange = i(this, "tctChange", 7);
+    this.queuedFiles = [];
+    this.dimDropZone = e => {
+      this.disableEvent(e);
+      this.isDropZoneHighlighted = false;
+    };
+    this.grabDroppedFiles = e => {
+      this.disableEvent(e);
+      this.isDropZoneHighlighted = false;
+      const i = Array.from(e.dataTransfer.files);
+      const t = this.buildFilesObject(i);
+      this.emitChange(t);
+      this.value = t;
+    };
+    this.grabSelectedFiles = e => {
+      const i = Array.from(e.target.files);
+      const t = this.buildFilesObject(i);
+      this.emitChange(t);
+      this.value = t;
+    };
+    this.highlightDropZone = e => {
+      this.disableEvent(e);
+      this.isDropZoneHighlighted = true;
+    };
+    // #endregion
+    // #region Render Methods
+        this.render = () => t("div", {
+      class: "file-picker"
+    }, (this.hasLabel || this.hasDescription) && t("div", {
+      class: "heading"
+    }, this.hasLabel && t("label", {
+      class: "label",
+      htmlFor: "file-field",
+      "test-id": "label"
+    }, !!this.label ? s(this.label) : this.hasLabelSlotContent ? t("slot", {
+      name: "label"
+    }) : ""), this.hasDescription && t("div", {
+      class: "description",
+      id: "description",
+      "test-id": "description"
+    }, !!this.description ? s(this.description) : this.hasDescriptionSlotContent ? t("slot", {
+      name: "description"
+    }) : "")), this.variant === "browse-drop" && t("div", {
+      class: this.dropZoneClasses,
+      onDragEnter: this.disableEvent,
+      onDragLeave: this.dimDropZone,
+      onDragOver: this.highlightDropZone,
+      onDrop: this.grabDroppedFiles,
+      ref: e => this.dropZone = e !== null && e !== void 0 ? e : this.dropZone,
+      "test-id": "drop-zone"
+    }, this.areFilesUploading && t(r, null, t("q2-loading", {
+      class: "loading"
+    }), t("p", {
+      class: "drop-zone-text"
+    }, s("tecton.element.filePicker.uploadingEllipsis"))) || t(r, null, t("q2-icon", {
+      type: "upload"
+    }), t("p", {
+      class: "drop-zone-text"
+    }, t("q2-link", {
+      label: s("tecton.element.filePicker.browse"),
+      onTctClick: () => this.launchFileBrowser(),
+      variant: "inline",
+      "test-id": "browse-link"
+    }), s("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || t("div", {
+      class: "browse",
+      "test-id": "browse"
+    }, t("q2-btn", {
+      disabled: this.areFilesUploading,
+      intent: "workflow-primary",
+      loading: this.areFilesUploading,
+      onClick: () => this.launchFileBrowser(),
+      size: "medium",
+      "test-id": "browse-button"
+    }, t("q2-icon", {
+      type: "paperclip"
+    }), t("span", null, s("tecton.element.filePicker.attachFiles", [ this.maxFiles ])))), t("input", {
+      "aria-describedby": !!this.description && "description" || undefined,
+      class: "sr",
+      id: "file-field",
+      onChange: this.grabSelectedFiles,
+      ref: e => this.browseButtonInput = e !== null && e !== void 0 ? e : this.browseButtonInput,
+      type: "file",
+      "test-id": "file-input",
+      multiple: true
+    }), t("div", {
+      class: "file-list-container"
+    }, t("q2-list", {
+      class: "file-list"
+    }, this.displayedFiles.map((e => t("q2-item", {
+      class: this.getFileItemClasses(e.file.name),
+      key: e.file.name,
+      onAnimationEnd: this.getAnimationendHandlerToRemoveFileItem(e.file.name)
+    }, t("div", {
+      slot: "bullet"
+    }, e.status === "invalid-type" || e.status === "over-size-limit" || e.status === "failed" || e.status === "over-max-files-limit" ? t("q2-icon", {
+      class: "icon-error",
+      type: "error"
+    }) : e.status === "in-progress" ? t("q2-loading", {
+      class: "file-item-loading"
+    }) : t("q2-icon", {
+      class: "icon-success",
+      type: "success"
+    })), t("div", {
+      slot: "header"
+    }, e.file.name), t("div", {
+      slot: "body"
+    }, this.getFileItemStatusMessage(e.status, e.file.size)), t("div", {
+      slot: "action"
+    }, t("q2-btn", {
+      intent: "neutral-text",
+      onClick: this.getClickHandlerToRemoveFileItem(e.file.name)
+    }, t("q2-icon", {
+      type: "close"
+    })))))))));
+    this.areFilesUploading = false;
+    this.displayedFiles = [];
+    this.isDropZoneHighlighted = false;
+    this.refreshCounter = 0;
+    this.description = undefined;
+    this.fileTypes = [];
+    this.label = undefined;
+    this.maxFiles = Infinity;
+    this.maxFileSize = Infinity;
+    this.status = [];
+    this.value = {
+      invalidFiles: [],
+      validFiles: []
+    };
+    this.variant = "browse";
+  }
+  // #endregion
+  // #region Watchers
+  updateFileList(e) {
+    e.forEach((e => {
+      const i = this.queuedFiles.findIndex((i => i.name === e.name));
+      if (i > -1) {
+        const t = this.queuedFiles.splice(i, 1)[0];
+        this.displayedFiles = [ {
+          file: t,
+          status: e.status
+        }, ...this.displayedFiles ];
+      } else {
+        const i = this.displayedFiles.findIndex((i => i.file.name === e.name));
+        if (i > -1) {
+          this.displayedFiles[i].status = e.status;
+          this.disableLoaderIfAllFilesUploaded();
+        }
+      }
+    }));
+  }
+  // #endregion
+  // #region Local Methods
+  get dropZoneClasses() {
+    const e = [ "drop-zone" ];
+    if (this.isDropZoneHighlighted) {
+      e.push("drop-zone-highlighted");
+    }
+    return e.join(" ");
+  }
+  get fileTypesArray() {
+    return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(",");
+  }
+  get hasDescription() {
+    return !!this.description || this.hasDescriptionSlotContent;
+  }
+  get hasDescriptionSlotContent() {
+    return a(this.el, "description");
+  }
+  get hasLabel() {
+    return !!this.label || this.hasLabelSlotContent;
+  }
+  get hasLabelSlotContent() {
+    return a(this.el, "label");
+  }
+  buildFilesObject(e) {
+    const i = [];
+    i.push(...this.extractFilesOfInvalidTypes(e));
+    i.push(...this.extractFilesOverSizeLimit(e));
+    i.push(...this.extractFilesOverMaxFilesLimit(e));
+    this.displayedFiles = [ ...i ];
+    if (e.length === 0) {
+      this.areFilesUploading = false;
+    } else {
+      this.queuedFiles = e;
+    }
+    return {
+      invalidFiles: i,
+      validFiles: e
+    };
+  }
+  disableEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  disableLoaderIfAllFilesUploaded() {
+    if (this.queuedFiles.length === 0 && !this.displayedFiles.some((e => e.status === "in-progress"))) {
+      this.areFilesUploading = false;
+    }
+  }
+  emitChange(e) {
+    this.areFilesUploading = e.validFiles.length > 0;
+    this.tctChange.emit(e);
+  }
+  extractFilesOfInvalidTypes(e) {
+    const i = [];
+    if (this.fileTypesArray.length === 0) return i;
+    e.forEach((e => {
+      const t = e.name.split(".").pop().toLowerCase();
+      if (!this.fileTypesArray.includes(t)) {
+        i.push({
+          file: e,
+          status: "invalid-type"
+        });
+      }
+    }));
+    // Remove invalid files from the files array
+        i.forEach((i => {
+      const t = e.indexOf(i.file);
+      if (t > -1) {
+        e.splice(t, 1);
+      }
+    }));
+    return i;
+  }
+  extractFilesOverMaxFilesLimit(e) {
+    const i = [];
+    if (this.maxFiles === Infinity) return i;
+    if (e.length > this.maxFiles) {
+      const t = e.splice(this.maxFiles);
+      t.forEach((e => {
+        i.push({
+          file: e,
+          status: "over-max-files-limit"
+        });
+      }));
+    }
+    return i;
+  }
+  extractFilesOverSizeLimit(e) {
+    const i = [];
+    if (this.maxFileSize === Infinity) return i;
+    e.forEach((e => {
+      if (e.size > this.maxFileSize) {
+        i.push({
+          file: e,
+          status: "over-size-limit"
+        });
+      }
+    }));
+    // Remove files over size limit from the files array
+        i.forEach((i => {
+      const t = e.indexOf(i.file);
+      if (t > -1) {
+        e.splice(t, 1);
+      }
+    }));
+    return i;
+  }
+  forceRerender() {
+    this.refreshCounter += 1;
+ // Triggers re-render
+    }
+  getAnimationendHandlerToRemoveFileItem(e) {
+    return i => {
+      if (i.animationName === "shrinkToCenterFadeOut") {
+        this.displayedFiles = this.displayedFiles.filter((i => i.file.name !== e));
+      }
+    };
+  }
+  getClickHandlerToRemoveFileItem(e) {
+    return () => {
+      const i = this.displayedFiles.find((i => i.file.name === e));
+      if (i) {
+        i.toBeRemoved = true;
+        this.forceRerender();
+      }
+    };
+  }
+  getFileItemClasses(e) {
+    const i = [ "file-item" ];
+    const t = this.displayedFiles.find((i => i.file.name === e));
+    if (t === null || t === void 0 ? void 0 : t.toBeRemoved) {
+      i.push("fade-out");
+    } else {
+      i.push("fade-in");
+    }
+    return i.join(" ");
+  }
+  getFileItemStatusMessage(e, i) {
+    switch (e) {
+     case "invalid-type":
+      return s("tecton.element.filePicker.unsupportedFileType");
+
+     case "over-size-limit":
+      return s("tecton.element.filePicker.sizeExceedsLimit");
+
+     case "over-max-files-limit":
+      return s("tecton.element.filePicker.overMaxFilesLimit");
+
+     case "in-progress":
+      return s("tecton.element.filePicker.uploadingEllipsis");
+
+     case "failed":
+      return s("tecton.element.filePicker.uploadFailed");
+
+     case "uploaded":
+     default:
+      return s("tecton.element.filePicker.fileSize", [ (i / (1e3 * 1e3)).toFixed(2) ]);
+    }
+  }
+  launchFileBrowser() {
+    this.browseButtonInput.dispatchEvent(new MouseEvent("click"));
+  }
+  get el() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      status: [ "updateFileList" ]
+    };
+  }
+};
+
+c.style = l;
+
+export { c as q2_file_picker };
+//# sourceMappingURL=q2-file-picker.entry.js.map

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

@@ -0,0 +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","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","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(.75) scaleY(.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(.75) scaleY(.75);\n        opacity: 0;\n    }\n}\n\n:host {\n    display: block;\n}\n\n.browse {\n    text-align: left;\n}\n\n.drop-zone-text {\n    color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4D4D4D);\n    font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n    margin-bottom: 0;\n    margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n    color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0D0D0D);\n    font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n    font-weight: var(--tct-file-picker-description-font-weight, 400);\n    text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n    align-items: center;\n    background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #E8F5FC);\n    border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n    border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n    border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n    border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n    color: var(--tct-file-picker-drop-zone-color, #747474);\n    display: flex;\n    flex-direction: column;\n    font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n    height: var(--tct-file-picker-drop-zone-height, 150px);\n    justify-content: center;\n    padding: var(--tct-file-picker-drop-zone-padding, 20px);\n    text-align: center;\n    width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n    background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #BEE1F6);\n    border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n  animation-fill-mode: both;\n  animation-play-state: running;\n  animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n  animation: shrinkToCenterFadeOut 0.1s ease-out;\n  animation-play-state: running;\n  animation-fill-mode: both;\n}\n\n.file-item {\n    --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0D0D0D)};\n    --tct-btn-padding: 0;\n    --tct-item-body-color: #{var-list(--tct-file-picker-file-item-size-color, --t-gray-6, #4D4D4D)};\n    --tct-item-body-font-size: #{var-list(--tct-file-picker-file-item-size-font-size, --app-font-size-small, 12px)};\n    --tct-item-body-font-weight: var(--tct-file-picker-file-item-size-font-weight, 400);\n    --tct-item-border-radius: #{var-list(--tct-file-picker-file-item-border-radius, --app-border-radius-3, 12px)};\n    --tct-item-border: var(--tct-file-picker-file-item-border-width, 1px) solid #{var-list(--tct-file-picker-file-item-border-color, --t-gray-8, #808080)};\n    --tct-item-header-color: #{var-list(--tct-file-picker-file-item-name-color, --t-gray-1, #0D0D0D)};\n    --tct-item-header-font-size: #{var-list(--tct-file-picker-file-item-name-font-size, --app-font-size-small, 12px)};\n    --tct-item-header-font-weight: var(--tct-file-picker-file-item-name-font-weight, 400);\n    --tct-item-padding: var(--tct-file-picker-file-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\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: 182px;\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    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","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     * An array of strings representing the allowed file types based on file extension.\n     * Example: ['jpg', 'png', 'pdf']\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(',');\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                                    />\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                                        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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"}