@heartlandone/vega 2.72.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-file-uploader.entry.js

@@ -0,0 +1,751 @@
+import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { a as VegaClick, h as VegaChange, y as VegaSelectFileChange, n as VegaRemove, z as VegaRetry, A as VegaPreview } from './vega-event-id-61c8bd9f.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { t as trashCan } from './trash-can-8819a939.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
+import { F as FileUploaderRequiredRule } from './file-uploader-required-rule-ad886d01.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './observer-3959f9dd.js';
+import './dom-node-subject-factory-5798693b.js';
+import './ui-5f775fd9.js';
+import './internal-vega-event-manager-826279b7.js';
+import './try-get-document-bef0f526.js';
+import './string-a953eafc.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './index-81ce67e2.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './ui-189dae23.js';
+import './breakpoints-d9faf11c.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './array-a1d98264.js';
+import './number-4398f2e1.js';
+import './sub-state-observer-slimmer-4fc8b3da.js';
+import './required-field-rule-ab4bdc47.js';
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** renders a file uploader component with specified properties. */
+class VegaFileUploaderRenderer extends VegaSlimmer {
+  /**
+   * The render function returns a JSX element that includes a field label, file uploader button, hint, and file list renderer.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a fragment with a vega-field-label component, a
+   * vegaFileUploaderContainerRenderer element, a vega-hint component (if hint is provided), and a vegaFileUploaderFileListRenderer element.
+   */
+  render() {
+    return (h(Fragment, null,
+      h("vega-field-label", { isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
+      this.vegaFileUploaderContainerRenderer.render(),
+      this.hint ? h("vega-hint", null, this.hint) : null,
+      this.vegaFileUploaderFileListRenderer.render()));
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "required", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "disabled", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "label", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "hint", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "vegaFileUploaderContainerRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "vegaFileUploaderFileListRenderer", void 0);
+
+const arrowUpFromLine = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.3V208 320c0 17.7 14.3 32 32 32s32-14.3 32-32V208 141.3l73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"/></svg>`,
+};
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* rendering a file uploader with options for drag and drop or button upload functionality. */
+class VegaFileUploaderContainerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * An event handler function that is triggered when the drop area is clicked
+     *
+     * @param {MouseEvent} e click event object
+     */
+    this.handleDropAreaClick = (e) => {
+      e.stopPropagation();
+      if (!this.shouldDisableUploadButton()) {
+        this.triggerFileInputClick();
+      }
+    };
+    /**
+     * Trigger a click event on the native input element.
+     */
+    this.triggerFileInputClick = () => {
+      this.inputElementRef.click();
+    };
+    /**
+     * An event handler function that is triggered when the input file is changed
+     *
+     * @param {MouseEvent} e change event object
+     */
+    this.inputChangeHandler = (e) => {
+      e.stopPropagation();
+      const files = this.getVegaFilesFromFileList(e.target.files);
+      this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
+      this.inputElementRef.value = '';
+    };
+    /**
+     * an event handler that is triggered when files are dropped onto the file uploader drop area
+     *
+     * @param {DragEvent} e drag event object
+     */
+    this.dropHandler = (e) => {
+      var _a;
+      e.preventDefault();
+      if (!this.shouldDisableUploadButton()) {
+        const files = this.getVegaFilesFromFileList(this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files));
+        this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
+      }
+    };
+  }
+  /**
+   * The function `getUploaderContainerRef` returns a reference to an HTMLDivElement element.
+   * @returns {HTMLDivElement} An HTMLDivElement with the reference to the uploader container.
+   */
+  getUploaderContainerRef() {
+    return this.uploaderContainerRef;
+  }
+  /**
+   * generating the HTML structure of the file uploader component
+   *
+   * @returns {HTMLElement} uploader component upload area element
+   */
+  render() {
+    return (h("div", { class: "vega-file-uploader-container", ref: (ref) => (this.uploaderContainerRef = ref) },
+      h("input", { onChange: this.inputChangeHandler, type: "file", multiple: !this.fileLimitController.isSingleMode(), accept: this.accept, style: { display: 'none' }, ref: (node) => (this.inputElementRef = node) }),
+      this.variant === 'uploadButton' ? this.renderUploadButton() : this.renderUploadDropArea()));
+  }
+  /**
+   * An upload button element
+   *
+   * @returns {HTMLElement} html element
+   */
+  renderUploadButton() {
+    return (h("vega-button", { label: "Upload Document", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line'), variant: "secondary", size: "small", disabled: this.shouldDisableUploadButton(), ref: (button) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.triggerFileInputClick);
+      } }));
+  }
+  /**
+   * The uploader file drop area element
+   *
+   * @returns {HTMLElement} html element
+   */
+  renderUploadDropArea() {
+    return (h("vega-box", { class: {
+        'vega-file-upload-area': true,
+        'disabled': this.shouldDisableUploadButton(),
+      }, padding: "size-24", border: "border-input-field", borderStyle: "dashed", backgroundColor: "bg-tertiary", corners: "rounded-8", tabIndex: 0, onDrop: this.dropHandler, onDragEnter: this.preventDefaultBehavior, onDragOver: this.preventDefaultBehavior, onClick: this.handleDropAreaClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-flex", { gap: "size-8", alignItems: "center", justifyContent: "center" },
+        h("vega-icon", { color: "text-link", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line') }),
+        h("vega-font", { color: "text-link", variant: "font-btn-label" }, this.translationSlimmer.t('Select or drop your file here')))));
+  }
+  /**
+   * Used to prevent the default behavior of the browser when a drag event occurs, such as preventing the browser from opening the file when it is dropped onto the page.
+   *
+   * @param {DragEvent} e drag event object
+   */
+  preventDefaultBehavior(e) {
+    e.preventDefault();
+  }
+  /**
+   * emits a custom event with selected files and updates the value if the event is not prevented.
+   *
+   * @param {VegaFileUploaderFile[]} files - The `files` parameter in the `selectFileChangeEventEmitHandler` method is an array of `VegaFileUploaderFile` objects.
+   */
+  selectFileChangeEventEmitHandler(files) {
+    if (files && files.length) {
+      const e = this.selectFileChangeEventEmitter.emit(files);
+      if (!e.defaultPrevented) {
+        this.vegaFileUploaderValueController.setValue(this.value && this.value.length
+          ? new Array().concat(this.value, files)
+          : files);
+      }
+    }
+  }
+  /**
+   * extracting the files from a file list object. It first initializes an empty array `result` to store the extracted files
+   *
+   * @param {FileList|File[]|null} fileList file list object
+   * @returns {VegaFileUploaderFile[]} the vega file array
+   */
+  getVegaFilesFromFileList(fileList) {
+    const result = [];
+    if (fileList && fileList.length) {
+      Array.from(fileList).map((file) => {
+        result.push({
+          key: generateUUID(),
+          name: file.name,
+          url: file,
+        });
+      });
+    }
+    return result;
+  }
+  /**
+   * Determines if the upload button should be disabled based on the component's state.
+   *
+   * @returns {boolean} True if the upload button should be disabled, otherwise false.
+   */
+  shouldDisableUploadButton() {
+    return this.disabled || !!(this.value && this.maxCount && this.value.length >= this.maxCount);
+  }
+  /**
+   * Filters the selected files to ensure the total number of files does not exceed the maximum count.
+   *
+   * @param {VegaFileUploaderFile[]} selectedFiles - The files selected by the user.
+   * @returns {VegaFileUploaderFile[]} The filtered list of files that do not exceed the maximum count.
+   */
+  filterExceedLimitFiles(selectedFiles) {
+    const maxCount = Number(this.maxCount);
+    if (!isNaN(maxCount) && maxCount && selectedFiles.length) {
+      const existFileCount = this.value ? this.value.length : 0;
+      const availableFileCount = Math.max(0, maxCount - existFileCount);
+      return selectedFiles.slice(0, availableFileCount);
+    }
+    return selectedFiles;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'arrow-up-from-line': arrowUpFromLine });
+})();
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "variant", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "accept", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "selectFileChangeEventEmitter", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "vegaFileUploaderValueController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "dropFileFilterController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "translationSlimmer", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "fileLimitController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "maxCount", void 0);
+
+const arrowRotateRight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M456 224c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24s-24 10.7-24 24v80.1l-20-23.5C371 63.4 309.1 32 240 32C116.3 32 16 132.3 16 256s100.3 224 224 224c50.4 0 97-16.7 134.4-44.8c10.6-8 12.7-23 4.8-33.6s-23-12.7-33.6-4.8C316.2 418.9 279.7 432 240 432c-97.2 0-176-78.8-176-176s78.8-176 176-176c54.3 0 102.9 24.6 135.2 63.4l.1 .2 0 0L402.9 176H312c-13.3 0-24 10.7-24 24s10.7 24 24 24H456z"/></svg>`,
+};
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** renders a list of files for a file uploader component. */
+class VegaFileUploaderFileListRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Used to trigger an event or action related to remove a specific file in the file uploader component
+     *
+     * @param {VegaFileUploaderFile} file the vega file object
+     */
+    this.fileRemoveHandler = (file) => {
+      const removeEvent = this.removeEventEmitter.emit(file);
+      if (!removeEvent.defaultPrevented) {
+        this.vegaFileUploaderValueController.setValue(this.value.filter((item) => item !== file));
+      }
+    };
+    /**
+     * Used to trigger an event or action related to retrying the upload of a specific file in the file uploader component
+     *
+     * @param {VegaFileUploaderFile} file the vega file object
+     */
+    this.fileReUploadHandler = (file) => {
+      this.retryEventEmitter.emit(file);
+    };
+    /**
+     * Used to trigger an event or action related to preview of a specific file in the file uploader component
+     *
+     * @param {VegaFileUploaderFile} file the vega file object
+     */
+    this.filePreviewHandler = (file) => {
+      this.previewEventEmitter.emit(file);
+    };
+  }
+  /**
+   * The function renders a list of file within a div element based on the value provided.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a div element with class 'file-uploader-file-list' and
+   * 'file-list-hidden' if the value is empty. If the value is not empty, it will map over the value
+   * array and return a div element for each file with the file name displayed.
+   */
+  render() {
+    const isFileListEmpty = !this.value || this.value.length < 1;
+    return (h("div", { class: {
+        'vega-file-uploader-file-list': true,
+        'vega-file-list-hidden': isFileListEmpty,
+      } }, !isFileListEmpty &&
+      this.value.map((file) => {
+        return (h("vega-box", { key: file.key, class: "vega-file-uploader-file", padding: "size-8", corners: "rounded-8" },
+          h("vega-flex", { alignItems: "start", justifyContent: "space-between" },
+            h("vega-flex", { class: "vega-file-status-and-name", gap: "size-8", alignItems: "start" },
+              h("div", { style: { paddingTop: '3px' } }, this.vegaFileUploaderFileStatusRenderer.render(file.status, file.uploadingPercent)),
+              h("vega-flex", { gap: "size-4", direction: "col" },
+                h("vega-font", { color: file.status === 'done' || file.status === 'error'
+                    ? 'text-primary'
+                    : 'text-secondary', variant: "font-field-label" }, file.name),
+                file.status === 'error' && file.errorMessage && (h("vega-font", { color: "text-error", variant: "font-footnote1-short" }, file.errorMessage)))),
+            h("vega-flex", { gap: "size-4", class: "vega-file-list-buttons", justifyContent: "end" },
+              file.previewable && (h("vega-button-circle", { class: "vega-file-preview-button", variant: "icon-only", size: "small", icon: "zoom-in", iconColor: "text-secondary", label: "Preview", tooltip: { disableInteractive: true }, ref: (button) => {
+                  DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => {
+                    this.filePreviewHandler(file);
+                  });
+                } })),
+              file.status === 'error' && (h("vega-button-circle", { variant: "icon-only", size: "small", icon: VegaInternalIconManager.getIconKey('arrow-rotate-right'), iconColor: "text-secondary", label: "Retry", tooltip: { disableInteractive: true }, disabled: this.disabled, ref: (button) => {
+                  DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => {
+                    this.fileReUploadHandler(file);
+                  });
+                } })),
+              h("vega-button-circle", { variant: "icon-only", size: "small", icon: VegaInternalIconManager.getIconKey('trash-can'), iconColor: "text-secondary", label: "Delete", tooltip: { disableInteractive: true }, disabled: this.disabled, ref: (button) => {
+                  DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => {
+                    this.fileRemoveHandler(file);
+                  });
+                } })))));
+      })));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'trash-can': trashCan,
+    'arrow-rotate-right': arrowRotateRight,
+  });
+})();
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "value", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderFileStatusRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "removeEventEmitter", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderValueController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "retryEventEmitter", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "previewEventEmitter", void 0);
+
+const circleXmark = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175V175zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>`,
+};
+
+const circleCheckRegular = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>`,
+};
+
+/** renders file status for a file uploader component. */
+class VegaFileUploaderFileStatusRenderer extends VegaSlimmer {
+  render(status, uploadingPercent) {
+    switch (status) {
+      case 'uploading':
+        return (h("vega-loading-indicator", Object.assign({ class: "vega-file-list-status", mode: uploadingPercent ? 'determinate' : 'indeterminate', size: "micro" }, (uploadingPercent ? { percent: uploadingPercent } : {}))));
+      case 'done':
+        return (h("vega-icon", { class: "vega-file-list-status", color: "text-success", icon: VegaInternalIconManager.getIconKey('circle-check-regular') }));
+      case 'error':
+        return (h("vega-icon", { class: "vega-file-list-status", color: "text-error", icon: VegaInternalIconManager.getIconKey('circle-xmark') }));
+      default:
+        return (h("vega-loading-indicator", { class: "vega-file-list-status", mode: "determinate", size: "micro" }));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'circle-check-regular': circleCheckRegular,
+    'circle-xmark': circleXmark,
+  });
+})();
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** manages the value and change events for a file uploader component. */
+class VegaFileUploaderValueController extends VegaSlimmer {
+  /**
+   * Emit the change event and notify the value change subject when component value change, reset the value to null if the value is not valid
+   *
+   * @param {VegaFileUploaderFile[]} newValue The new value
+   */
+  valueChangeHandler(newValue) {
+    if (!newValue || Array.isArray(newValue)) {
+      this.changeEventEmitter.emit(newValue);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
+    else if (newValue && !Array.isArray(newValue)) {
+      this.setValue(null);
+    }
+  }
+  /**
+   * Set the component value to a new value
+   *
+   * @param {VegaFileUploaderFile[]|null} value The new value
+   */
+  setValue(value) {
+    this.value = value;
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderValueController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "value", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentMethod('watchValue')
+], VegaFileUploaderValueController.prototype, "valueChangeHandler", null);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Used to filters files based on accepted file types specified in the `accept` property. */
+class VegaFileUploaderDropFileFilterController extends VegaSlimmer {
+  /**
+   * Filters the files based on accepted file types if specified.
+   *
+   * @param {FileList|null} fileList - FileList is a FileList object
+   * @returns {File[]} An array of `File` objects after filtering based on the accepted file types specified in the `accept` property
+   */
+  process(fileList) {
+    const files = Array.from(fileList || []);
+    if (fileList && this.accept && this.accept !== '*' && this.accept !== '/*') {
+      const acceptFileTypes = this.accept.split(',');
+      return files.filter((file) => this.validateFileType(file, acceptFileTypes));
+    }
+    return files;
+  }
+  /**
+   * Checks if a given file matches any of the accepted file types based on file name, MIME type, or base type.
+   *
+   * @param {File} file - File object
+   * @param {string[]} acceptTypes - An array of strings that represent the file types that are accepted. These strings can have different formats:
+   * @returns {boolean} A boolean value, indicating whether the provided file matches any of the accepted file types specified in the `acceptTypes` array.
+   */
+  validateFileType(file, acceptTypes) {
+    const fileName = file.name;
+    const fileType = (file.type || '').toLowerCase();
+    const fileBaseType = fileType.replace(/\/.*$/, '');
+    return acceptTypes.some((acceptFileType) => {
+      acceptFileType = acceptFileType.trim().toLowerCase();
+      if (acceptFileType.startsWith('.')) {
+        return fileName.toLowerCase().endsWith(acceptFileType);
+      }
+      else if (acceptFileType.endsWith('/*')) {
+        return fileBaseType === acceptFileType.replace(/\/.*$/, '');
+      }
+      else {
+        return fileType === acceptFileType;
+      }
+    });
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderDropFileFilterController.prototype, "accept", void 0);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller class for managing the file upload limit in the Vega file uploader component.
+ */
+class VegaFileUploaderFileLimitController extends VegaSlimmer {
+  /**
+   * Determines if the file uploader is in single mode.
+   *
+   * @returns {boolean} `true` if the maximum file count is 1, otherwise `false`.
+   */
+  isSingleMode() {
+    return Number(this.maxCount) === 1;
+  }
+  /**
+   * Checks if the `maxCount` property is valid. If `maxCount` is less than 1 and not `null`, it will be set to `null`.
+   */
+  checkMaxCount() {
+    if (this.maxCount !== null && this.maxCount < 1) {
+      this.maxCount = null;
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderFileLimitController.prototype, "maxCount", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad'),
+  MapToComponentMethod('watchMaxCount')
+], VegaFileUploaderFileLimitController.prototype, "checkMaxCount", null);
+
+const vegaFileUploaderCss = ":host{display:inline-block;text-align:left;width:100%;line-height:normal}:host .vega-file-uploader-container .vega-file-upload-area{text-align:center}:host .vega-file-uploader-container .vega-file-upload-area:hover{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border-color:rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1))}:host .vega-file-uploader-container .vega-file-upload-area:hover vega-icon,:host .vega-file-uploader-container .vega-file-upload-area:hover vega-font{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .vega-file-uploader-container .vega-file-upload-area:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}:host .vega-file-uploader-container .vega-file-upload-area:active{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host .vega-file-uploader-container .vega-file-upload-area:active vega-icon,:host .vega-file-uploader-container .vega-file-upload-area:active vega-font{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .vega-file-uploader-container .vega-file-upload-area.disabled{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1));outline:none}:host .vega-file-uploader-container .vega-file-upload-area.disabled vega-icon,:host .vega-file-uploader-container .vega-file-upload-area.disabled vega-font{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host .vega-file-uploader-container vega-button::part(button):focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;box-shadow:0 0 0}:host .vega-file-uploader-container.error .vega-file-upload-area{border-color:rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))}:host .vega-file-uploader-container.error .vega-file-upload-area:hover{border-color:rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-file-uploader-container.error .vega-file-upload-area:focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}:host .vega-file-uploader-container.error .vega-file-upload-area:active{border-color:rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-file-uploader-container.error vega-button::part(button),:host .vega-file-uploader-container.error vega-button::part(button):hover{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1));border-color:rgba(var(--v-border-color-danger, 230, 50, 87, 1))}:host .vega-file-uploader-container.error vega-button::part(button):hover{background-color:rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host .vega-file-uploader-container.error vega-button::part(button):focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;box-shadow:0 0 0}:host .vega-file-uploader-container.error vega-button::part(button):active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));border-color:rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));background-color:rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))}:host .vega-file-uploader-file-list .vega-file-uploader-file .vega-file-preview-button{visibility:hidden}:host .vega-file-uploader-file-list .vega-file-uploader-file:hover{background-color:rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))}:host .vega-file-uploader-file-list .vega-file-uploader-file:hover .vega-file-preview-button{visibility:visible}:host .vega-file-uploader-file-list .vega-file-list-buttons{margin-left:8px;flex-shrink:0}:host .vega-file-uploader-file-list .vega-file-list-status svg{width:16px;height:16px}:host .vega-file-uploader-file-list .vega-file-status-and-name{padding-top:5px}:host .vega-file-uploader-file-list .vega-file-status-and-name vega-font{word-break:break-word}:host vega-field-label{margin-bottom:8px}:host .vega-file-uploader-file-list{margin-top:8px}:host .vega-file-uploader-file-list.vega-file-list-hidden{display:none}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaFileUploader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaSelectedFileChange = createEvent(this, "vegaSelectedFileChange", 7);
+    this.selectedFileChange = createEvent(this, "selectedFileChange", 7);
+    this.vegaRemove = createEvent(this, "vegaRemove", 7);
+    this.remove = createEvent(this, "remove", 7);
+    this.vegaRetry = createEvent(this, "vegaRetry", 7);
+    this.retry = createEvent(this, "retry", 7);
+    this.vegaPreview = createEvent(this, "vegaPreview", 7);
+    this.preview = createEvent(this, "preview", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired ? new FileUploaderRequiredRule() : null,
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: [],
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaFileUploaderContainerRenderer.getUploaderContainerRef(),
+      touchableAreaGetter: () => [this.vegaFileUploaderContainerRenderer.getUploaderContainerRef()],
+    });
+    this.vegaFileUploaderRenderer = new VegaFileUploaderRenderer();
+    this.vegaFileUploaderContainerRenderer = new VegaFileUploaderContainerRenderer();
+    this.vegaFileUploaderFileListRenderer = new VegaFileUploaderFileListRenderer();
+    this.vegaFileUploaderFileStatusRenderer = new VegaFileUploaderFileStatusRenderer();
+    this.vegaFileUploaderValueController = new VegaFileUploaderValueController();
+    this.dropFileFilterController = new VegaFileUploaderDropFileFilterController();
+    this.fileLimitController = new VegaFileUploaderFileLimitController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaChange);
+    this.selectFileChangeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaSelectFileChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaRemove);
+    this.retryEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaRetry);
+    this.previewEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaPreview);
+    /**
+     * Specifies the label or title for the field.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the field.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.label = '';
+    /**
+     * Specifies the uploader type that activates when clicked
+     *    or when a file is dragged, determining how users
+     *    interact with the file uploader.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.variant = 'uploadArea';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the file uploader field.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.hint = '';
+    /**
+     * Specifies the initial file content to display, enabling a preview
+     *    of the uploaded file or a default placeholder.
+     *
+     * @vegaVersion 2.25.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = [];
+    /**
+     * Specifies whether the File Uploader field is disabled.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer.
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.maxCount = null;
+    /**
+     * Specifies whether uploading a file is mandatory.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.required = false;
+    /**
+     * Defines custom validation rules for the File Uploader field.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.validationRules = [];
+    /**
+     * Determines whether the input field should undergo automatic validation
+     *    during the user's input.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the validation status of the file uploader component.
+     *
+     * @vegaVersion 2.25.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+  }
+  /**
+   * Watches the value change.
+   *
+   * @param {VegaFileUploaderFile[]} newValue The new value
+   */
+  watchValue(newValue) {
+    methodPlaceholder(newValue);
+  }
+  /**
+   * Watches the maxCount change.
+   */
+  watchMaxCount() {
+    methodPlaceholder();
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.vegaFileUploaderRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "maxCount": ["watchMaxCount"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaFileUploader.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaFileUploaderRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaFileUploaderContainerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaFileUploaderFileListRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaFileUploaderFileStatusRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "vegaFileUploaderValueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "dropFileFilterController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "fileLimitController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "selectFileChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "removeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "retryEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "previewEventEmitter", void 0);
+VegaFileUploader.style = vegaFileUploaderCss;
+
+export { VegaFileUploader as vega_file_uploader };