@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -1,34 +1,36 @@
-import { d as MapToComponentField, V as VegaSlimmer, h, F as Fragment, M as MapToComponentMethod, r as registerInstance, e as createEvent, H as Host, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-7fc7535a.js';
-import { D as DomNodeSubjectObserverFactory, b as VegaClick, V as VegaChange, r as VegaSelectFileChange, s as VegaRemove, t as VegaRetry, u as VegaPreview } from './dom-node-subject-observer-factory-80358591.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
+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-385c7124.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { a as VegaClick, f as VegaChange, r as VegaSelectFileChange, s as VegaRemove, t as VegaRetry, u as VegaPreview } from './dom-node-subject-factory-5831cdd4.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.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-c03cf145.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-e06a3840.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-de5fe574.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6ef5641b.js';
 import { R as RequiredFieldRule } from './required-field-rule-368b31fa.js';
-import { T as TranslationSlimmer } from './translation-slimmer-860cd766.js';
-import './icon-manager-3cef32e7.js';
-import './ui-5600b48f.js';
-import './dynamic-slimmer-85746483.js';
-import './internal-vega-event-manager-3a3815d3.js';
+import { T as TranslationSlimmer } from './translation-slimmer-5ee9912b.js';
+import './icon-manager-b889176b.js';
+import './ui-62e4be97.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-07e1b3d9.js';
 import './string-be824360.js';
-import './vega-internal-event-id-4af5c6e9.js';
-import './translation-b3fe8e74.js';
-import './page-resize-observer-slimmer-8589ebc8.js';
+import './vega-internal-event-id-458939b6.js';
+import './translation-a98970d8.js';
+import './page-resize-observer-slimmer-beb7b0bd.js';
 import './breakpoints-91116111.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
-import './mutation-observer-slimmer-ca2cb2e8.js';
+import './mutation-observer-slimmer-6cef9549.js';
 import './mutation-observer-filters-1035b064.js';
 import './array-b668466e.js';
 import './number-4398f2e1.js';
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -50,22 +52,22 @@ class VegaFileUploaderRenderer extends VegaSlimmer {
       this.vegaFileUploaderFileListRenderer.render()));
   }
 }
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "required", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "disabled", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "label", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "hint", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "vegaFileUploaderContainerRenderer", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "vegaFileUploaderFileListRenderer", void 0);
 
@@ -73,7 +75,7 @@ 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$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -90,7 +92,7 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
      */
     this.handleDropAreaClick = (e) => {
       e.stopPropagation();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         this.triggerFileInputClick();
       }
     };
@@ -108,7 +110,7 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.inputChangeHandler = (e) => {
       e.stopPropagation();
       const files = this.getVegaFilesFromFileList(e.target.files);
-      this.selectFileChangeEventEmitHandler(files);
+      this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       this.inputElementRef.value = '';
     };
     /**
@@ -119,9 +121,9 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.dropHandler = (e) => {
       var _a;
       e.preventDefault();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         const files = this.getVegaFilesFromFileList(this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files));
-        this.selectFileChangeEventEmitHandler(files);
+        this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       }
     };
   }
@@ -139,7 +141,7 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    */
   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) }),
+      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()));
   }
   /**
@@ -148,7 +150,7 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    * @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) => {
+    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);
       } }));
   }
@@ -160,7 +162,7 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
   renderUploadDropArea() {
     return (h("vega-box", { class: {
         'vega-file-upload-area': true,
-        'disabled': this.disabled,
+        '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') }),
@@ -208,40 +210,69 @@ class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     }
     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$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "variant", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "accept", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "disabled", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "value", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "selectFileChangeEventEmitter", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "vegaFileUploaderValueController", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "dropFileFilterController", void 0);
-__decorate$4([
+__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$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -327,25 +358,25 @@ class VegaFileUploaderFileListRenderer extends VegaSlimmer {
     'arrow-rotate-right': arrowRotateRight,
   });
 })();
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "value", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "disabled", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderFileStatusRenderer", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "removeEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderValueController", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "retryEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "previewEventEmitter", void 0);
 
@@ -379,7 +410,7 @@ class VegaFileUploaderFileStatusRenderer extends VegaSlimmer {
   });
 })();
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -413,16 +444,16 @@ class VegaFileUploaderValueController extends VegaSlimmer {
     this.value = value;
   }
 }
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaFileUploaderValueController.prototype, "host", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField({ writable: true })
 ], VegaFileUploaderValueController.prototype, "value", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaFileUploaderValueController.prototype, "changeEventEmitter", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentMethod('watchValue')
 ], VegaFileUploaderValueController.prototype, "valueChangeHandler", null);
 
@@ -442,7 +473,7 @@ class ObjectArrayRequiredRule extends RequiredFieldRule {
   }
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -489,10 +520,45 @@ class VegaFileUploaderDropFileFilterController extends VegaSlimmer {
     });
   }
 }
-__decorate$1([
+__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) {
@@ -540,6 +606,7 @@ const VegaFileUploader = class {
     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);
@@ -583,6 +650,12 @@ const VegaFileUploader = class {
      * @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.
      *
@@ -617,6 +690,11 @@ const VegaFileUploader = class {
    */
   watchValue(newValue) {
   }
+  /**
+   * Watches the maxCount change.
+   */
+  watchMaxCount() {
+  }
   watchValidationRules() {
   }
   render() {
@@ -625,6 +703,7 @@ const VegaFileUploader = class {
   get host() { return getElement(this); }
   static get watchers() { return {
     "value": ["watchValue"],
+    "maxCount": ["watchMaxCount"],
     "validationRules": ["watchValidationRules"]
   }; }
 };
@@ -658,6 +737,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "dropFileFilterController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "fileLimitController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "changeEventEmitter", void 0);

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

@@ -1,11 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { F as FeatureFlag } from './feature-flag-controller-dfde0cfa.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { f as formatAndValidResponsiveToken, l as formatAndValidFlexBreakpoint } from './design-token-20fdba82.js';
-import { a as arrayToClassString } from './ui-5600b48f.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8589ebc8.js';
-import { f as formatFlexStyles } from './style-formatter-51845b6d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { F as FeatureFlag } from './feature-flag-controller-4b3fe6f8.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { f as formatAndValidResponsiveToken, l as formatAndValidFlexBreakpoint } from './design-token-d06bc718.js';
+import { a as arrayToClassString } from './ui-62e4be97.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
+import { f as formatFlexStyles } from './style-formatter-f91471e8.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
 import './type-guard-158f6d7a.js';
@@ -13,11 +14,11 @@ import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './responsive-format-facade-559ec469.js';
+import './responsive-format-facade-c2ab9c87.js';
 import './breakpoints-91116111.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
-import './state-background-color-formatter-16031a43.js';
+import './state-background-color-formatter-121ae7d3.js';
 
 const VegaFlexRuntimeMetricsPayloadDefinition = [
   {

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

@@ -1,13 +1,14 @@
-import { d as MapToComponentField, V as VegaSlimmer, L as LogUtility, h, r as registerInstance, H as Host, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
+import { h, r as registerInstance, 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, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8589ebc8.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
 import { g as getCurrentBreakpoint } from './breakpoints-91116111.js';
 import { C as ComponentLoadRequired } from './component-load-required-ce710ef5.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-559ec469.js';
-import { a as arrayToClassString } from './ui-5600b48f.js';
-import { m as formatAndValidTypographyToken, i as formatAndValidTextColor, f as formatAndValidResponsiveToken } from './design-token-20fdba82.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
+import { a as arrayToClassString } from './ui-62e4be97.js';
+import { m as formatAndValidTypographyToken, i as formatAndValidTextColor, f as formatAndValidResponsiveToken } from './design-token-d06bc718.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
 import './type-guard-158f6d7a.js';
@@ -15,7 +16,7 @@ import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
-import './state-background-color-formatter-16031a43.js';
+import './state-background-color-formatter-121ae7d3.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;
@@ -156,7 +157,14 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 class VegaFontRenderer extends VegaSlimmer {
   render(hostClasses) {
     const tagName = this.asController.getTagNameFromPropAs();
-    return tagName ? h(tagName, { className: hostClasses }, [h("slot", null)]) : h("slot", null);
+    if (tagName) {
+      const Tag = tagName;
+      return (h(Tag, { class: hostClasses },
+        h("slot", null)));
+    }
+    else {
+      return h("slot", null);
+    }
   }
 }
 __decorate$1([

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

@@ -1,31 +1,33 @@
-import { r as registerInstance, e as createEvent, h, H as Host, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-de5fe574.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { v as VegaFormSubmit, w as VegaFormReset, x as VegaValidate, O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-80358591.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6ef5641b.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { v as VegaFormSubmit, w as VegaFormReset, x as VegaValidate, O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
 import { g as FORM_ELEMENT_VALIDATE, b as FORM_ELEMENT_VALUE_CHANGE, d as FORM_FIELD_ELEMENT_DISCONNECTED, c as FORM_FIELD_PENDING_VALID_CHANGE, e as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, a as FORM_RESET } from './static-subject-title-e06a3840.js';
 import { d as isObjectArrayLike } from './array-b668466e.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { f as findParent, c as isElementVisible, i as isParent } from './ui-5600b48f.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { f as findParent, c as isElementVisible, i as isParent } from './ui-62e4be97.js';
 import { I as ImmutableMap } from './immutable-map-f545ed1a.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-c03cf145.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-8ceabe63.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-afc15e00.js';
-import { d as VegaInternalValid } from './vega-internal-event-id-4af5c6e9.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-97aae8a8.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-289caacc.js';
+import { d as VegaInternalValid } from './vega-internal-event-id-458939b6.js';
 import './string-be824360.js';
-import './create-public-api-runtime-metrics-slimmer-14cb4599.js';
-import './dynamic-slimmer-85746483.js';
-import './translation-b3fe8e74.js';
-import './page-resize-observer-slimmer-8589ebc8.js';
+import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import './dynamic-slimmer-90b8af32.js';
+import './translation-a98970d8.js';
+import './page-resize-observer-slimmer-beb7b0bd.js';
 import './breakpoints-91116111.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
-import './mutation-observer-slimmer-ca2cb2e8.js';
+import './dom-node-subject-observer-factory-dc486a8b.js';
+import './mutation-observer-slimmer-6cef9549.js';
 import './mutation-observer-filters-1035b064.js';
 import './number-4398f2e1.js';
-import './internal-vega-event-manager-3a3815d3.js';
+import './internal-vega-event-manager-07e1b3d9.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-dfde0cfa.js';
+import './feature-flag-controller-4b3fe6f8.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
 
@@ -182,13 +184,18 @@ const VegaForm = class {
         if (!nestedFormValidationResult.isValid) {
           result.isValid = false;
           result.invalidFields.push(...nestedFormValidationResult.invalidFields);
+          result.invalidFieldsErrorMessages = Object.assign(Object.assign({}, result.invalidFieldsErrorMessages), nestedFormValidationResult.invalidFieldsErrorMessages);
         }
       }
       else {
-        const isValid = await this.handleChildFormFieldElementValid(element, showError);
+        const { isValid, message } = await this.handleChildFormFieldElementValid(element, showError);
         if (!isValid) {
           result.isValid = false;
           result.invalidFields.push(this.getFormFieldName(element));
+          if (!result.invalidFieldsErrorMessages) {
+            result.invalidFieldsErrorMessages = {};
+          }
+          result.invalidFieldsErrorMessages[this.getFormFieldName(element)] = message;
         }
       }
     });
@@ -429,10 +436,10 @@ const VegaForm = class {
   }
   async handleChildFormFieldElementValid(element, showError) {
     const subject = domNodeSubjectFactory.getSubject(element, VegaInternalValid);
-    const isValid = await new Promise((resolve) => {
+    const { isValid, message } = await new Promise((resolve) => {
       //This setTimeout method here to avoid the dom node subject observer not existing and blocks the promise status
       const timerId = setTimeout(() => {
-        resolve(true);
+        resolve({ isValid: true, message: '' });
       }, 2000);
       ChangeManager.notify(subject, {
         host: element,
@@ -441,7 +448,7 @@ const VegaForm = class {
         timerId,
       });
     });
-    return isValid;
+    return { isValid, message };
   }
   get host() { return getElement(this); }
   static get watchers() { return {