@globalpayments/vega 2.24.0 → 2.25.0

package/dist/collection/components/vega-field-label/slimmers/renderers/vega-field-label-suffix-element-renderer.js

@@ -0,0 +1,50 @@
+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 { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+/** Render the suffix button in a field label component. */
+export class VegaFieldLabelSuffixElementRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Stop click event propagation and emit an event.
+     *
+     * @param {MouseEvent} e click event object
+     */
+    this.handleSuffixButtonClick = (e) => {
+      e.stopPropagation();
+      this.suffixButtonClickEventEmitter.emit();
+    };
+  }
+  /**
+   * Render a suffix button if the property is not empty.
+   *
+   * @returns {HTMLElement | null}
+   */
+  render() {
+    if (this.suffixButtonProps) {
+      const { icon, tooltipText, trigger = 'hover' } = this.suffixButtonProps;
+      return (h("div", { class: "label-suffix-button", role: "button", tabIndex: 0, onClick: this.handleSuffixButtonClick, onKeyDown: createEnterKeyHandlerToTriggerClick() }, tooltipText ? (h("vega-tooltip", { trigger: trigger, text: tooltipText }, this.renderSuffixButton(icon))) : (this.renderSuffixButton(icon))));
+    }
+  }
+  /**
+   * Render a vega button circle component.
+   *
+   * @param {string} icon the button icon name
+   * @returns {HTMLElement} vega button circle component
+   */
+  renderSuffixButton(icon) {
+    return (h("vega-button-circle", { size: "extra-small", variant: "icon-only", iconColor: "text-link", showTooltip: false, icon: icon }));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFieldLabelSuffixElementRenderer.prototype, "suffixButtonProps", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFieldLabelSuffixElementRenderer.prototype, "suffixButtonClickEventEmitter", void 0);

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

@@ -63,4 +63,10 @@ label:first-of-type {
 
 .vega-field-label-required.hidden {
   display: none;
+}
+
+.label-suffix-button {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: top;
 }

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

@@ -8,9 +8,12 @@ import { Component, Host, h, Element, Prop, Event } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
-import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaLabelButtonClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaFieldLabelSuffixElementRenderer } from './slimmers/renderers/vega-field-label-suffix-element-renderer';
+/**
+ * @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.
@@ -19,23 +22,40 @@ export class VegaFieldLabel {
   constructor() {
     this.globalSlimmers = {};
     this.clickEventEmitter = createEventEmitSlimmer(VegaFieldLabel, VegaClick);
-    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.labelRef);
+    this.suffixButtonClickEventEmitter = createEventEmitSlimmer(VegaFieldLabel, VegaLabelButtonClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.suffixElementRenderer = new VegaFieldLabelSuffixElementRenderer();
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality related to
+     *    the suffix button's role and behavior.
+     *
+     * @version 2.25.0
+     */
+    this.suffixButtonProps = null;
     /**
      * Specifies the label or title for the field.
      *
      * 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;
     /*
@@ -58,12 +78,13 @@ export class VegaFieldLabel {
         hidden: this.label === '',
         disabled: this.disabled,
       }, onClick: this.handleClick },
-      h("label", { ref: (node) => (this.labelRef = node) },
+      h("label", null,
         h("span", { class: "vega-field-label" }, this.label),
         h("span", { class: {
             'vega-field-label-required': true,
             'hidden': !this.isFieldRequired,
-          } }, "*"))), this.host);
+          } }, "*")),
+      this.suffixElementRenderer.render()), this.host);
   }
   static get is() { return "vega-field-label"; }
   static get encapsulation() { return "shadow"; }
@@ -74,6 +95,30 @@ export class VegaFieldLabel {
     "$": ["vega-field-label.css"]
   }; }
   static get properties() { return {
+    "suffixButtonProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "LabelSuffixButtonProps",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "references": {
+          "LabelSuffixButtonProps": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality related to\n   the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
     "label": {
       "type": "string",
       "mutable": true,
@@ -85,7 +130,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 +151,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 +172,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 +190,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": {
@@ -144,6 +201,45 @@ export class VegaFieldLabel {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": false,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
 }
@@ -155,7 +251,10 @@ __decorate([
 ], VegaFieldLabel.prototype, "clickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaFieldLabel.prototype, "inputEventPrevent", void 0);
+], VegaFieldLabel.prototype, "suffixButtonClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaFieldLabel.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFieldLabel.prototype, "suffixElementRenderer", void 0);

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);