@globalpayments/vega 2.23.0 → 2.24.2

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -11,6 +11,9 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+/**
+ * @version 1.10.0
+ */
 /**
  * This is an internal used component and shouldn't be used by clients,
  *    it doesn't show up in storybook either.
@@ -26,16 +29,23 @@ export class VegaFieldLabel {
      *
      * It provides descriptive text that helps identify the
      *    purpose or content expected in the field.
+     *
+     * @version 1.10.0
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.label = '';
     /**
      * Determines whether the input field is required.
      *
      * Specifies whether the field must be filled in to pass form validation.
+     *
+     * @version 1.10.0
      */
     this.isFieldRequired = false;
     /**
      * Specifies whether the field is disabled.
+     *
+     * @version 1.10.0
      */
     this.disabled = false;
     /*
@@ -85,7 +95,10 @@ export class VegaFieldLabel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.10.0"
+          }],
         "text": "Specifies the label or title for the field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the field."
       },
       "attribute": "label",
@@ -103,7 +116,10 @@ export class VegaFieldLabel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.10.0"
+          }],
         "text": "Determines whether the input field is required.\n\nSpecifies whether the field must be filled in to pass form validation."
       },
       "attribute": "is-field-required",
@@ -121,7 +137,10 @@ export class VegaFieldLabel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.10.0"
+          }],
         "text": "Specifies whether the field is disabled."
       },
       "attribute": "disabled",
@@ -136,7 +155,10 @@ export class VegaFieldLabel {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.43.0"
+          }],
         "text": "An event emitter notifying that the field label has been clicked."
       },
       "complexType": {

package/dist/collection/components/vega-file-uploader/slimmers/controllers/vega-file-uploader-value-controller.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+/** manages the value and change events for a file uploader component. */
+export 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([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('watchValue')
+], VegaFileUploaderValueController.prototype, "valueChangeHandler", null);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-container-renderer.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import arrowUpFromLine from '../../../../global/icons/arrow-up-from-line';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { generateUUID } from '../../../../utils/misc';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+/* rendering a file uploader with options for drag and drop or button upload functionality. */
+export 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([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "accept", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "selectFileChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "vegaFileUploaderValueController", void 0);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-file-list-renderer.js

@@ -0,0 +1,114 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import trashCan from '../../../../global/icons/trash-can';
+import arrowRotateRight from '../../../../global/icons/arrow-rotate-right';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+/** renders a list of files for a file uploader component. */
+export 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([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderFileStatusRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "removeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderValueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "retryEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "previewEventEmitter", void 0);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-file-status-renderer.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+import { VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import circleXmark from '../../../../global/icons/circle-xmark';
+import circleCheckRegular from '../../../../global/icons/circle-check-regular';
+/** renders file status for a file uploader component. */
+export 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,
+  });
+})();

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-renderer.js

@@ -0,0 +1,42 @@
+var __decorate = (this && this.__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;
+};
+import { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** renders a file uploader component with specified properties. */
+export 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([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "hint", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "vegaFileUploaderContainerRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "vegaFileUploaderFileListRenderer", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.css

@@ -0,0 +1,154 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+: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;
+}