@globalpayments/vega 2.23.0 → 2.24.2

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

@@ -0,0 +1,595 @@
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-187f71d1.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-ebe6ecf4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-926991a9.js';
+import { a as VegaClick, e as VegaChange, o as VegaSelectFileChange, p as VegaRemove, q as VegaRetry, r as VegaPreview } from './vega-event-id-728eb2ac.js';
+import { g as generateUUID } from './misc-9fdbcfbb.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-79be1c60.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-2e153754.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-374541fd.js';
+import { R as RequiredFieldRule } from './required-field-rule-f438a73f.js';
+import './icon-manager-754cda3f.js';
+import './create-public-api-runtime-metrics-slimmer-dc9af92b.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-c17ae641.js';
+import './string-be824360.js';
+import './ui-153f4ae7.js';
+import './vega-internal-event-id-809b4ec8.js';
+import './page-resize-observer-slimmer-8caeb03b.js';
+import './breakpoints-e59edf8d.js';
+import './ui-df46cc20.js';
+import './mutation-observer-slimmer-6cef9549.js';
+import './mutation-observer-filters-9086b5cc.js';
+import './array-506b88b9.js';
+import './number-e2519d1c.js';
+
+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 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$4([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "required", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "label", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "hint", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "vegaFileUploaderContainerRenderer", void 0);
+__decorate$4([
+  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$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;
+};
+/* 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.disabled) {
+        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(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) => {
+      e.preventDefault();
+      if (!this.disabled) {
+        const files = this.getVegaFilesFromFileList(e.dataTransfer.files);
+        this.selectFileChangeEventEmitHandler(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: true, 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.disabled, 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.disabled,
+      }, 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" }, "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([].concat(this.value, files));
+      }
+    }
+  }
+  /**
+   * extracting the files from a file list object. It first initializes an empty array `result` to store the extracted files
+   *
+   * @param {FileList} 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;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'arrow-up-from-line': arrowUpFromLine });
+})();
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "variant", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "accept", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "disabled", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "value", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "selectFileChangeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "vegaFileUploaderValueController", void 0);
+
+const trashCan = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>`,
+};
+
+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$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;
+};
+/** 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$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "value", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "disabled", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderFileStatusRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "removeEventEmitter", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderValueController", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "retryEventEmitter", void 0);
+__decorate$2([
+  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$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;
+};
+/** 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$1([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "value", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  MapToComponentMethod('watchValue')
+], VegaFileUploaderValueController.prototype, "valueChangeHandler", null);
+
+/**
+ * A rule that checks if file-uploader value is empty or not
+ */
+class FileUploaderRequiredRule extends RequiredFieldRule {
+  constructor() {
+    super(...arguments);
+    /**
+     * re-define the file object array check item type method
+     *
+     * @param {unknown} item the array item
+     * @returns {boolean} true or false
+     */
+    this.checkArrayItemType = (item) => item && typeof item === 'object';
+  }
+}
+
+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.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.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.
+     */
+    this.label = '';
+    /**
+     * Specifies the uploader type that activates when clicked
+     *    or when a file is dragged, determining how users
+     *    interact with the file uploader.
+     */
+    this.variant = 'uploadArea';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the file uploader field.
+     */
+    this.hint = '';
+    /**
+     * Specifies the initial file content to display, enabling a preview
+     *    of the uploaded file or a default placeholder.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = [];
+    /**
+     * Specifies whether the File Uploader field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether uploading a file is mandatory.
+     */
+    this.required = false;
+    /**
+     * Defines custom validation rules for the File Uploader field.
+     */
+    this.validationRules = [];
+    /**
+     * Determines whether the input field should undergo automatic validation
+     *    during the user's input.
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the validation status of the file uploader component.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+  }
+  /**
+   * Watches the value change.
+   *
+   * @param {VegaFileUploaderFile[]} newValue The new value
+   */
+  watchValue(newValue) {
+  }
+  watchValidationRules() {
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.vegaFileUploaderRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaFileUploader.prototype, "globalSlimmers", 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, "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 };

package/dist/esm/vega-flex.entry.js

@@ -137,16 +137,21 @@ const VegaFlex = class {
      *    row-based layout to column-based layout, or vice versa.
      *
      * @deprecated Please use the `direction` property instead.
+     * @version 1.0.4
      */
     this.breakpoint = 'S';
     /**
      * Specifies the flex direction.
+     *
+     * @version 1.3.0
      */
     this.direction = 'row';
     /**
      * Specifies whether to use the native flex layout.
      *
      * @deprecated This property will be removed soon and vega-flex will only support native-based flex behaviors.
+     *
+     * @version 1.10.0
      */
     this.useNativeFlex = true;
   }

package/dist/esm/vega-font.entry.js

@@ -37,9 +37,6 @@ class VegaFontVariantController extends VegaSlimmer {
 __decorate$4([
   MapToComponentField()
 ], VegaFontVariantController.prototype, "variant", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaFontVariantController.prototype, "currentBreakpoint", void 0);
 
 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;
@@ -218,20 +215,28 @@ const VegaFont = class {
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Specifies the typography token used for styling the text within this component. A typography token includes values for font size and line height.
+     *
+     * @version 1.46.0
      */
     this.variant = 'font-field-label';
     /**
      * Specifies the font color represented by a valid text color token.
+     *
+     * @version 1.46.0
      */
     this.color = 'text-primary';
     /**
      * Specifies the capability to enable or disable the font's
      *      responsiveness from native code.
+     *
+     * @version 1.46.0
      */
     this.disableResponsive = false;
     /**
      * Indicates the rendering of an additional node with a
      *     value that is an HTML tag name. It can be set as `ResponsiveType`.
+     *
+     * @version 1.46.0
      */
     this.as = '';
   }