@heartlandone/vega-sandbox-pr-1506-3239befdcdad5bfa650ecfb1249bcd1b261543fe 2.27.0

package/dist/cjs/vega-image-uploader.cjs.entry.js

@@ -0,0 +1,935 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const component = require('./component-73a88c4e.js');
+const requiredFieldRule = require('./required-field-rule-9a57b1a0.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const responsiveFormatFacade = require('./responsive-format-facade-7bc51a43.js');
+const placeholder = require('./placeholder-cb6d37ad.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
+const vegaEventId = require('./vega-event-id-e40ac8f0.js');
+const staticSubjectTitle = require('./static-subject-title-3599787e.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const vegaDialogController = require('./vega-dialog-controller-6a8525b3.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-223f8ee3.js');
+const ui = require('./ui-08f33116.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e383a914.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-8f51adaa.js');
+const translationSlimmer = require('./translation-slimmer-83577cfd.js');
+require('./type-guard-a07b353b.js');
+require('./breakpoints-7e2dff90.js');
+require('./ui-32e69595.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./number-459031f7.js');
+require('./pixel-98f2a10c.js');
+require('./observer-f49483e8.js');
+require('./create-public-api-runtime-metrics-slimmer-7510221b.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./string-21427167.js');
+require('./vega-internal-event-id-c98e9a7d.js');
+require('./translation-0dd74433.js');
+require('./page-resize-observer-slimmer-a8cf1874.js');
+require('./mutation-observer-slimmer-895b3d3e.js');
+require('./mutation-observer-filters-79b60f28.js');
+require('./array-6e559cde.js');
+require('./internal-vega-event-manager-627b1328.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./feature-flag-controller-078da332.js');
+require('./index-5792390b.js');
+
+var __decorate$b = (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;
+};
+/** The VegaImageUploaderRenderer class is a TypeScript React component that renders a VegaImageUploader with different content based on its status. */
+class VegaImageUploaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  getImageUploaderContainer() {
+    return this.imageUploaderContainerRef;
+  }
+  /**
+   * The render function returns a JSX element that represents a VegaImageUploader component with a disabled border if it is disabled and does not have a value.
+   *
+   * @returns {VegaImageUploader} The render() function is returning a JSX element of type VegaImageUploader.
+   */
+  render() {
+    return (index.h(index.Host, { class: { disabled: this.disabled } },
+      this.renderLabelDom(),
+      index.h("div", { ref: (e) => (this.imageUploaderContainerRef = e), class: {
+          'vega-image-uploader-select': true,
+          'disabled-border': this.disabled && !this.value,
+        }, style: {
+          width: this.getSize(this.width),
+          height: this.getSize(this.height),
+        } }, this.renderContentByStatus()),
+      this.inputRenderer.render(),
+      this.renderHint()));
+  }
+  renderLabelDom() {
+    return (index.h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+  }
+  renderContentByStatus() {
+    if (this.status === 'uploading') {
+      return this.uploadingContentRenderer.render();
+    }
+    else {
+      const imagePreviewURL = this.previewController.getImagePreviewURL();
+      return imagePreviewURL
+        ? this.previewContentRenderer.render(imagePreviewURL)
+        : this.defaultContentRenderer.render();
+    }
+  }
+  renderHint() {
+    return (this.hint && (index.h("div", { class: "vega-hint" },
+      index.h("label", null, this.hint))));
+  }
+  getSize(size) {
+    if (size) {
+      const result = responsiveFormatFacade.ResponsiveFormatFacade.format(size, 'size');
+      return typeof result === 'number' ? `${result}px` : `${result}`;
+    }
+  }
+}
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputRenderer' })
+], VegaImageUploaderRenderer.prototype, "inputRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderDefaultContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "defaultContentRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "previewContentRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderUploadingContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "uploadingContentRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewController' })
+], VegaImageUploaderRenderer.prototype, "previewController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "value", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "disabled", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "status", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "label", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "required", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "width", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "height", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "hint", void 0);
+
+var __decorate$a = (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;
+};
+/** The VegaImageUploaderInputRenderer class is a TypeScript React component that renders an input element of type "file" for uploading images and provides methods for accessing and manipulating the file input element. */
+class VegaImageUploaderInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:the-value-will-be-changed-when-selected-the-image-file}
+     */
+    /* istanbul ignore next */
+    this.handleFileInputChange = (e) => {
+      e.stopPropagation();
+      const input = e.target;
+      if (!input.files.length) {
+        return;
+      }
+      this.valueController.setValue(input.files[0]);
+    };
+  }
+  /**
+   * The `getFileInputRef()` method is returning a reference to the HTMLInputElement that represents the
+   * file input element in the component's render method. This allows other parts of the code to access
+   * and manipulate the file input element if needed.
+   *
+   * @returns {HTMLInputElement} the input ref
+   */
+  getFileInputRef() {
+    return this.fileInputRef;
+  }
+  /** The `render()` method is defining the JSX/HTML structure that will be rendered by this component. In this case, it is returning an `<input>` element of type "file". */
+  render() {
+    return (index.h("input", { type: "file", accept: this.accept, class: "v-hidden", ref: (ref) => (this.fileInputRef = ref), onChange: this.handleFileInputChange }));
+  }
+}
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderInputRenderer.prototype, "valueController", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderInputRenderer.prototype, "accept", void 0);
+
+var __decorate$9 = (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;
+};
+/** The VegaImageUploaderInputController class is responsible for handling user interactions and controlling the input element of the VegaImageUploader component. */
+class VegaImageUploaderInputController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * The function triggers a click event on a file input element if it is not disabled.
+   */
+  triggerInputClick() {
+    if (this.disabled)
+      return;
+    this.inputRenderer.getFileInputRef().click();
+  }
+  /**
+   * The function "resetInput" clears the value of a file input element.
+   */
+  resetInput() {
+    this.inputRenderer.getFileInputRef().value = '';
+  }
+}
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputRenderer' })
+], VegaImageUploaderInputController.prototype, "inputRenderer", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderInputController.prototype, "disabled", void 0);
+
+var __decorate$8 = (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;
+};
+/** The `VegaImageUploaderActionsRenderer` class is a TypeScript React component that renders action buttons for an image uploader component. */
+class VegaImageUploaderActionsRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * render the action button by action type, preview button, delete button
+     *
+     * @param {UploaderActionTypes} actionType action type
+     * @returns {HTMLVegaButtonCircleElement} tooltip element
+     */
+    this.renderActionButton = (actionType) => {
+      const options = this.getButtonOptions(actionType);
+      return (index.h("vega-button-circle", Object.assign({ size: "small", variant: "icon-only", iconColor: "text-inverted-primary", role: "menuitem", ref: (ref) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+            this.handleClick(actionType);
+          });
+        } }, options)));
+    };
+  }
+  /**
+   * The handleClick function takes a type parameter and performs different actions based on the value of the type.
+   *
+   * @param {string} type - The `type` parameter is a string that represents the type of action to be performed. It can have one of the following values: 'Preview', 'Delete', or 'Replace'.
+   */
+  handleClick(type) {
+    switch (type) {
+      case 'Preview':
+        this.previewController.showPreview();
+        break;
+      case 'Delete':
+        this.removeController.showRemoveDialog();
+        break;
+      case 'Replace':
+        this.inputController.triggerInputClick();
+        break;
+    }
+  }
+  /**
+   * The render function returns a span element with action buttons based on certain conditions.
+   *
+   * @returns {HTMLSpanElement | null} an HTMLSpanElement if the condition "withActions" is true. Otherwise, it returns null.
+   */
+  render() {
+    const withActions = this.showRemoveButton || this.showPreviewButton || this.showReplaceButton;
+    return withActions ? (index.h("span", { class: "actions" },
+      this.showPreviewButton && this.renderActionButton('Preview'),
+      this.showReplaceButton && !this.disabled && this.renderActionButton('Replace'),
+      this.showRemoveButton && !this.disabled && this.renderActionButton('Delete'))) : null;
+  }
+  /**
+   * get action button props icon, onClick, label by action type
+   *
+   * @param {UploaderActionTypes} actionType action type
+   * @returns {Nullable<ActionButtonOptions>} the options result
+   */
+  getButtonOptions(actionType) {
+    let options;
+    switch (actionType) {
+      case 'Preview':
+        options = {
+          icon: 'zoom-in',
+          label: actionType,
+        };
+        break;
+      case 'Delete':
+        options = {
+          icon: 'delete-bin',
+          label: actionType,
+        };
+        break;
+      case 'Replace':
+        options = {
+          icon: 'photo',
+          label: actionType,
+        };
+        break;
+    }
+    return options;
+  }
+}
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderActionsRenderer.prototype, "inputController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderActionsRenderer.prototype, "valueController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewController' })
+], VegaImageUploaderActionsRenderer.prototype, "previewController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderRemoveController' })
+], VegaImageUploaderActionsRenderer.prototype, "removeController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "disabled", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showPreviewButton", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showRemoveButton", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showReplaceButton", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "removeEventEmitter", void 0);
+
+var __decorate$7 = (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;
+};
+/** The VegaImageUploaderValueController class is responsible for handling the value and change events of a VegaImageUploader component. */
+class VegaImageUploaderValueController extends globalSlimmerRegistry.VegaSlimmer {
+  /** trigger a vegaChange event when component value change */
+  handleValueChange() {
+    if (!this.value) {
+      this.inputController.resetInput();
+    }
+    this.changeEventEmitter.emit(this.value);
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  /**
+   * The function sets the value of a variable to either a VegaFile object or null.
+   *
+   * @param {VegaFile | null} value - The value parameter is of type VegaFile or null.
+   */
+  setValue(value) {
+    this.value = value;
+  }
+}
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaImageUploaderValueController.prototype, "value", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderValueController.prototype, "host", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderValueController.prototype, "inputController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('watchValue')
+], VegaImageUploaderValueController.prototype, "handleValueChange", null);
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaImageUploaderPreviewController` class is responsible for showing a preview of an uploaded image in a modal. */
+class VegaImageUploaderPreviewController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The `getImagePreviewURL` method is responsible for generating the URL of the image preview. It
+     * checks if `this.value` exists, and if so, it returns the URL of the uploaded file (`(this.value as
+     * VegaUploadedFile).url`). If the URL is not available, it falls back to creating a temporary URL
+     * using `URL.createObjectURL(this.value as File)`. This temporary URL is used for previewing the
+     * image until it is uploaded or saved permanently.
+     *
+     * @param {VegaFile} [file] the file object which needs to convert to a URL
+     * @returns {Nullable<string>} the url of image
+     */
+    this.getImagePreviewURL = (file) => {
+      file = file ? file : this.value;
+      if (file) {
+        return (file.url ||
+          /*
+           * The below method is e2e-test covered in
+           *
+           * @see{module:should-show-preview-image-when-click-the-preview-button-after-selected-image}
+           */
+          /* istanbul ignore next */
+          URL.createObjectURL(file));
+      }
+    };
+    /**
+     * The `generatePreviewModal` method is a private method of the `VegaImageUploaderPreviewController`
+     * class. It is responsible for creating a modal element and appending it to the document body.
+     *
+     * @param {Nullable<string>} imagePreviewURL the image url
+     * @returns {HTMLElement} a preview vega modal
+     */
+    this.generatePreviewModal = (imagePreviewURL) => {
+      const previewModal = document.createElement('vega-modal');
+      if (this.value && this.value.name) {
+        previewModal.modalTitle = this.value.name;
+      }
+      previewModal.innerHTML = `
+            <div style='text-align: center'>
+                <img style='width: 100%' class="preview-image" src="${imagePreviewURL}" alt="" />
+            </div>
+        `;
+      this.previewModalRef = previewModal;
+      document.body.append(previewModal);
+      return previewModal;
+    };
+  }
+  /**
+   * remove preview modal when component destroy
+   */
+  disconnectedCallback() {
+    var _a;
+    (_a = this.previewModalRef) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  /**
+   * The `showPreview` function displays an image preview in a modal, either by generating a new modal or updating an existing one.
+   */
+  showPreview() {
+    const imagePreviewURL = this.getImagePreviewURL();
+    if (!this.previewModalRef) {
+      const previewModal = this.generatePreviewModal(imagePreviewURL);
+      void previewModal.modal('show');
+    }
+    else {
+      const previewImage = this.previewModalRef.querySelector('.preview-image');
+      if (previewImage && imagePreviewURL) {
+        previewImage.src = imagePreviewURL;
+      }
+      if (this.value && this.value.name) {
+        this.previewModalRef.modalTitle = this.value.name;
+      }
+      void this.previewModalRef.modal('show');
+    }
+  }
+}
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderPreviewController.prototype, "value", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaImageUploaderPreviewController.prototype, "disconnectedCallback", null);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('getContentURL')
+], VegaImageUploaderPreviewController.prototype, "getImagePreviewURL", void 0);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The VegaImageUploaderPreviewContentRenderer class is responsible for rendering an image preview container with an image and optional actions element. */
+class VegaImageUploaderPreviewContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * The function renders an image preview container with an image and optional actions element.
+   *
+   * @param {string} imagePreviewURL - A string representing the URL of the image to be previewed.
+   * @returns {HTMLDivElement} an HTMLDivElement includes an image and action buttons
+   */
+  render(imagePreviewURL) {
+    const actionsElement = this.actionsRenderer.render();
+    return (index.h("div", { class: {
+        'image-preview-container': true,
+        'actions-backdrop': actionsElement ? true : false,
+      }, tabIndex: 0, role: "menu" },
+      index.h("img", { src: imagePreviewURL, alt: "" }),
+      actionsElement));
+  }
+}
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderActionsRenderer' })
+], VegaImageUploaderPreviewContentRenderer.prototype, "actionsRenderer", void 0);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The VegaImageUploaderUploadingContentRenderer class is a TypeScript React component that renders a cancel action button for an image uploader. */
+class VegaImageUploaderUploadingContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleCancelUploading = (e) => {
+      e.stopPropagation();
+      this.status = undefined;
+      this.removeController.handleRemoveFile();
+      this.cancelEventEmitter.emit();
+    };
+  }
+  /**
+   * The above function renders a div element with a cancel action button that triggers a function when clicked or when the enter key is pressed.
+   *
+   * @returns {HTMLDivElement} The render() method is returning an HTMLDivElement.
+   */
+  render() {
+    return (index.h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleCancelUploading, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
+      index.h("span", { class: "action-loading" }),
+      index.h("div", { class: "vega-image-uploader-text cancel-action" }, "Cancel")));
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderRemoveController' })
+], VegaImageUploaderUploadingContentRenderer.prototype, "removeController", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaImageUploaderUploadingContentRenderer.prototype, "status", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderUploadingContentRenderer.prototype, "cancelEventEmitter", void 0);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/** The VegaImageUploaderDefaultContentRenderer class is a TypeScript React component that renders a button-like element for uploading images. */
+class VegaImageUploaderDefaultContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleUploaderClick = (e) => {
+      e.stopPropagation();
+      this.inputController.triggerInputClick();
+    };
+  }
+  /**
+   * The render function returns a div element with a button-like appearance that triggers a click event when clicked or when the enter key is pressed.
+   *
+   * @returns {HTMLDivElement} The render() method is returning an HTMLDivElement.
+   */
+  render() {
+    return (index.h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleUploaderClick, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
+      index.h("vega-icon", { icon: "plus-sign", size: "size-24" }),
+      index.h("div", { class: "vega-image-uploader-text" }, this.translationSlimmer.t(this.actionTitle)),
+      this.renderSubtitle()));
+  }
+  renderSubtitle() {
+    return this.actionSubTitle && index.h("div", { class: "sub-title" }, this.actionSubTitle);
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderDefaultContentRenderer.prototype, "inputController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "actionTitle", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "actionSubTitle", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaImageUploaderRemoveController` class is responsible for handling the removal of images from the `VegaImageUploader` component. */
+class VegaImageUploaderRemoveController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:image-file-should-be-removed-when-click-the-remove-button}
+     */
+    /* istanbul ignore next */
+    /**
+     * open a vega dialog confirm remove the file
+     */
+    this.showRemoveDialog = () => {
+      this.removeDialogRef = vegaDialogController.VegaDialog.open({
+        type: 'danger',
+        title: 'Delete Image',
+        content: 'Are you sure you want to delete this image?',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        handleOk: () => {
+          this.handleRemoveFile();
+          return true;
+        },
+        okButton: {
+          label: 'Delete',
+        },
+      });
+    };
+    /** The `handleRemoveFile` method is responsible for removing the image from the `VegaImageUploader` component. */
+    this.handleRemoveFile = () => {
+      this.valueController.setValue(null);
+      this.removeEventEmitter.emit();
+    };
+  }
+  /**
+   * remove the dialog when element destroy
+   */
+  disconnectedCallback() {
+    var _a;
+    /* istanbul ignore next */
+    (_a = this.removeDialogRef) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderRemoveController.prototype, "valueController", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderRemoveController.prototype, "removeEventEmitter", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaImageUploaderRemoveController.prototype, "disconnectedCallback", null);
+
+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;
+};
+/** The `VegaImageUploaderActionsVisibilityController` class is responsible for handling the focus and hiding of backdrop and tooltip elements in a Vega Image Uploader component. */
+class VegaImageUploaderActionsVisibilityController extends globalSlimmerRegistry.VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:should-hide-backdrop-and-tooltip-when-change-value}
+   */
+  /* istanbul ignore next */
+  /** trigger a vegaChange event when component value change */
+  handleValueChange() {
+    if (this.value) {
+      this.hideBackDropAndActions();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:should-hide-backdrop-and-tooltip-when-change-value}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function hides the backdrop and actions of a vega-image-uploader component by blurring the active element.
+   * The activeElement should be div.image-preview-container and replace button
+   */
+  hideBackDropAndActions() {
+    const activeElement = ui.getDeepActiveElementInShadow();
+    if (activeElement && ui.findParent(activeElement, 'vega-image-uploader') === this.host) {
+      activeElement.blur();
+    }
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsVisibilityController.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaImageUploaderActionsVisibilityController.prototype, "value", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchValue')
+], VegaImageUploaderActionsVisibilityController.prototype, "handleValueChange", null);
+
+const VegaImageUploaderRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for image uploads',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for image uploads',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+];
+
+const vegaImageUploaderCss = ":host{display:inline-block;vertical-align:middle}:host .vega-image-uploader-select{box-sizing:border-box;background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1));border-radius:8px;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));display:flex;flex-direction:row;align-items:center;border-width:1px;border-style:dashed;min-width:120px;min-height:120px}:host .vega-image-uploader-select .action-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;width:100%;height:100%;padding:12px;box-sizing:border-box;cursor:pointer;flex-grow:1;outline:none}:host(.disabled) .vega-image-uploader-select.disabled-border{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))}:host(:not(.disabled)) .vega-image-uploader-select: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));background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(:not(.disabled)) .vega-image-uploader-select:hover .vega-image-uploader-text{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(:not(.disabled)) .vega-image-uploader-select .action-wrapper:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host(:not(.disabled)) .vega-image-uploader-select .actions-backdrop:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host(:not(.disabled)) .vega-image-uploader-select .error .action-wrapper:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host(.disabled) .vega-image-uploader-select .action-wrapper{cursor:not-allowed}:host(.disabled) .vega-image-uploader-select .action-wrapper vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.disabled) .vega-image-uploader-select .action-wrapper .vega-image-uploader-text{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host .vega-image-uploader-select .vega-image-uploader-text{padding-top:20px;color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-image-uploader-select .vega-image-uploader-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-image-uploader-select .vega-image-uploader-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-image-uploader-select .vega-image-uploader-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}:host .vega-image-uploader-select .action-wrapper vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(:not(.disabled)) .vega-image-uploader-select:not(.error):focus-within{border-color:rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .image-preview-container{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:100%;border-radius:8px;outline:none}:host .image-preview-container img{width:100%;height:100%;border-radius:8px;object-fit:contain}:host .image-preview-container.actions-backdrop::before{width:100%;height:100%;border-radius:8px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background-color:rgba(0, 0, 0, 0.6);content:\" \"}:host .vega-image-uploader-select .actions{position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none}:host .image-preview-container.actions-backdrop:hover::before{opacity:1;pointer-events:auto}:host .image-preview-container:hover .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-visible::before{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-visible .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-within::before{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-within .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .action-loading{position:relative;display:inline-block;width:24px;height:24px}:host .vega-image-uploader-select .action-loading::before{content:\" \";display:block;border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;border:4px solid rgb(229, 239, 255)}:host .vega-image-uploader-select .action-loading::after{display:block;border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";border-style:solid;border-width:4px;border-color:rgb(153, 192, 255) transparent transparent transparent;animation:loading 1.2s linear infinite}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host .vega-image-uploader-select .action-wrapper .cancel-action{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host vega-input{display:none}:host input[type=file]{display:none}:host .vega-error{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));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@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-image-uploader-select.error{border-color:rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))}:host .vega-image-uploader-select.error:hover{border-color:rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-image-uploader-select.error .action-wrapper:focus-within{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host .vega-image-uploader-select.error .actions-backdrop:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host .vega-hidden{display:none}:host vega-field-label{margin-bottom:8px}:host .sub-title{padding-top:4px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host .sub-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .sub-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .sub-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host .vega-hint{padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-hint{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-hint{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-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const IMAGE_FILE_TYPES = ['jpg', 'png', 'jpeg'];
+const VegaImageUploader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaRemove = index.createEvent(this, "vegaRemove", 7);
+    this.remove = index.createEvent(this, "remove", 7);
+    this.vegaCancel = index.createEvent(this, "vegaCancel", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaImageUploaderRenderer = new VegaImageUploaderRenderer();
+    this.vegaImageUploaderUploadingContentRenderer = new VegaImageUploaderUploadingContentRenderer();
+    this.vegaImageUploaderPreviewContentRenderer = new VegaImageUploaderPreviewContentRenderer();
+    this.vegaImageUploaderDefaultContentRenderer = new VegaImageUploaderDefaultContentRenderer();
+    this.vegaImageUploaderInputRenderer = new VegaImageUploaderInputRenderer();
+    this.vegaImageUploaderActionsRenderer = new VegaImageUploaderActionsRenderer();
+    this.vegaImageUploaderInputController = new VegaImageUploaderInputController();
+    this.vegaImageUploaderValueController = new VegaImageUploaderValueController();
+    this.vegaImageUploaderPreviewController = new VegaImageUploaderPreviewController();
+    this.vegaImageUploaderRemoveController = new VegaImageUploaderRemoveController();
+    this.actionsVisibilityController = new VegaImageUploaderActionsVisibilityController();
+    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new requiredFieldRule.RequiredFieldRule() : null),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: null,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaImageUploaderRenderer.getImageUploaderContainer(),
+      touchableAreaGetter: () => [this.vegaImageUploaderInputRenderer.getFileInputRef()],
+    });
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, vegaEventId.VegaChange);
+    this.removeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, vegaEventId.VegaRemove);
+    this.cancelEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, vegaEventId.VegaCancel);
+    this.buttonCircleEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.vegaImageUploaderRenderer.getImageUploaderContainer());
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaImageUploaderRuntimeMetricsPayloadDefinition);
+    /**
+     * Determines the visual content that is initially displayed in
+     *    the image uploader component, thereby providing a preview of
+     *    the uploaded image or a default placeholder.
+     *
+     * @vegaVersion 1.14.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = null;
+    /**
+     * Specifies the allowed file types for upload.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.accept = IMAGE_FILE_TYPES.map((type) => `.${type}`).join(',');
+    /**
+     * Determines whether to show the preview button.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.showPreviewButton = true;
+    /**
+     * Determines whether to show the remove button.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.showRemoveButton = true;
+    /**
+     * Determines whether to show the replace button.
+     *
+     * @vegaVersion 1.39.2
+     */
+    this.showReplaceButton = true;
+    /**
+     * Specifies whether the Image Uploader field is disabled.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether uploading an image is mandatory.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.required = false;
+    /**
+     * Specifies the validation status.
+     *
+     * @vegaVersion 1.14.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be
+     *    implemented for image uploads.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies custom validation rules for image uploads.
+     *
+     * @vegaVersion 1.14.0
+     */
+    this.validationRules = [];
+    /**
+     * Specifies the label or title for the image uploader.
+     *    It provides descriptive text that helps identify
+     *    the purpose of the image uploader.
+     *
+     * @vegaVersion 2.5.0
+     */
+    this.label = '';
+    /**
+     * Specifies the action title for the image uploader.
+     *    This property provides descriptive text that identifies
+     *    the intended action or function of the image uploader.
+     *
+     * @vegaVersion 2.9.0
+     */
+    this.actionTitle = 'Upload';
+    /**
+     * Defines the width of the image uploader field.
+     *
+     * @vegaVersion 2.9.0
+     */
+    this.width = 120;
+    /**
+     * Defines the height of the image uploader field.
+     *
+     * @vegaVersion 2.9.0
+     */
+    this.height = 120;
+  }
+  watchValue() {
+  }
+  watchValidationRules() {
+  }
+  disconnectedCallback() {
+  }
+  /**
+   * Invoke this method to retrieve the image preview URL for
+   *    the current selection in the `vega-image-uploader` component.
+   *
+   * @vegaVersion 1.45.0
+   */
+  async getContentURL(file) {
+    return placeholder.methodPlaceholder(file);
+  }
+  render() {
+    return component.sanitizeVegaComponent(this.vegaImageUploaderRenderer.render(), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaImageUploader.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "translationSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderUploadingContentRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderPreviewContentRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderDefaultContentRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderInputRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderActionsRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderInputController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderValueController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderPreviewController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderRemoveController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "actionsVisibilityController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "removeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "cancelEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "buttonCircleEventPrevent", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaImageUploader.style = vegaImageUploaderCss;
+
+exports.vega_image_uploader = VegaImageUploader;