@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

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

@@ -0,0 +1,977 @@
+import { h, g as Host, r as registerInstance, e as createEvent, i as getElement } from './index-01a2f9c9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { r as responsiveFormatFacade } from './responsive-format-facade-d4abfdb9.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { a as VegaClick, h as VegaChange, n as VegaRemove, E as VegaCancel } from './vega-event-id-61c8bd9f.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { c as VegaDialog } from './public-api-a77a0b33.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
+import { d as getDeepActiveElementInShadow, f as findParent } from './ui-5f775fd9.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-32138407.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e2a2f76c.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './type-guard-09acedc9.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './try-get-document-bef0f526.js';
+import './number-4398f2e1.js';
+import './pixel-f32c07ce.js';
+import './array-a1d98264.js';
+import './feature-flag-controller-24b9f956.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+import './observer-3959f9dd.js';
+import './dom-node-subject-factory-5798693b.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-event-manager-826279b7.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './internal-icon-manager-9279071a.js';
+import './valid-credit-card-number-rule-04b032a6.js';
+import './index-b04c1ee0.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './content-state-fc9d98e0.js';
+import './code-block-b5f8fc8a.js';
+import './string-a953eafc.js';
+import './object-66c37948.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './dto-renderer-manager-12bc9121.js';
+import './base-renderer-101f6d04.js';
+import './column-operation-a1620c67.js';
+import './remote-invocation-registry-4219120b.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './sub-state-observer-slimmer-4fc8b3da.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 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 (h(Host, { class: { disabled: this.disabled } },
+      this.renderLabelDom(),
+      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 (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 && (h("div", { class: "vega-hint" },
+      h("label", null, this.hint))));
+  }
+  getSize(size) {
+    if (size) {
+      const result = responsiveFormatFacade.format(size, 'size');
+      return typeof result === 'number' ? `${result}px` : `${result}`;
+    }
+  }
+}
+__decorate$b([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderInputRenderer' })
+], VegaImageUploaderRenderer.prototype, "inputRenderer", void 0);
+__decorate$b([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderDefaultContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "defaultContentRenderer", void 0);
+__decorate$b([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "previewContentRenderer", void 0);
+__decorate$b([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderUploadingContentRenderer' })
+], VegaImageUploaderRenderer.prototype, "uploadingContentRenderer", void 0);
+__decorate$b([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewController' })
+], VegaImageUploaderRenderer.prototype, "previewController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "value", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "disabled", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "status", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "label", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "required", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "width", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "height", void 0);
+__decorate$b([
+  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 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 (h("input", { type: "file", accept: this.accept, class: "v-hidden", ref: (ref) => (this.fileInputRef = ref), onChange: this.handleFileInputChange }));
+  }
+}
+__decorate$a([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderInputRenderer.prototype, "valueController", void 0);
+__decorate$a([
+  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 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([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderInputRenderer' })
+], VegaImageUploaderInputController.prototype, "inputRenderer", void 0);
+__decorate$9([
+  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 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 (h("vega-button-circle", Object.assign({ size: "small", variant: "icon-only", iconColor: this.isInDarkMode ? 'text-primary' : 'text-inverted-primary', role: "menuitem", ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, 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 ? (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;
+      /* istanbul ignore next */
+      default:
+        break;
+    }
+    return options;
+  }
+}
+__decorate$8([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderActionsRenderer.prototype, "inputController", void 0);
+__decorate$8([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderActionsRenderer.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderPreviewController' })
+], VegaImageUploaderActionsRenderer.prototype, "previewController", void 0);
+__decorate$8([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderRemoveController' })
+], VegaImageUploaderActionsRenderer.prototype, "removeController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "disabled", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showPreviewButton", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showRemoveButton", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "showReplaceButton", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "removeEventEmitter", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaImageUploaderActionsRenderer.prototype, "isInDarkMode", 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 VegaSlimmer {
+  /** trigger a vegaChange event when component value change */
+  handleValueChange() {
+    if (!this.value) {
+      this.inputController.resetInput();
+    }
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(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([
+  MapToComponentField({ writable: true })
+], VegaImageUploaderValueController.prototype, "value", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaImageUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaImageUploaderValueController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderValueController.prototype, "inputController", void 0);
+__decorate$7([
+  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 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) => {
+      // eslint-disable-next-line no-restricted-globals
+      const previewModal = document.createElement('vega-modal');
+      if (this.value && this.value.name) {
+        previewModal.modalTitle = this.value.name;
+      }
+      // eslint-disable-next-line no-restricted-globals
+      const container = document.createElement('div');
+      container.style.textAlign = 'center';
+      // eslint-disable-next-line no-restricted-globals
+      const img = document.createElement('img');
+      img.width = 0;
+      img.className = 'preview-image';
+      if (imagePreviewURL) {
+        img.src = imagePreviewURL;
+      }
+      img.alt = '';
+      img.style.width = '100%';
+      container.appendChild(img);
+      previewModal.appendChild(container);
+      this.previewModalRef = previewModal;
+      // eslint-disable-next-line no-restricted-globals
+      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([
+  MapToComponentField()
+], VegaImageUploaderPreviewController.prototype, "value", void 0);
+__decorate$6([
+  MapToComponentMethod('disconnectedCallback')
+], VegaImageUploaderPreviewController.prototype, "disconnectedCallback", null);
+__decorate$6([
+  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 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 (h("div", { class: {
+        'image-preview-container': true,
+        'actions-backdrop': actionsElement ? true : false,
+      }, tabIndex: 0, role: "menu" },
+      h("img", { src: imagePreviewURL, alt: "" }),
+      actionsElement));
+  }
+}
+__decorate$5([
+  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 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 (h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleCancelUploading, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("span", { class: "action-loading" }),
+      h("div", { class: "vega-image-uploader-text cancel-action" }, "Cancel")));
+  }
+}
+__decorate$4([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderRemoveController' })
+], VegaImageUploaderUploadingContentRenderer.prototype, "removeController", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaImageUploaderUploadingContentRenderer.prototype, "status", void 0);
+__decorate$4([
+  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 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 (h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleUploaderClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "plus-sign", size: "size-24" }),
+      h("div", { class: "vega-image-uploader-text" }, this.translationSlimmer.t(this.actionTitle)),
+      this.renderSubtitle()));
+  }
+  renderSubtitle() {
+    return this.actionSubTitle && h("div", { class: "sub-title" }, this.actionSubTitle);
+  }
+}
+__decorate$3([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
+], VegaImageUploaderDefaultContentRenderer.prototype, "inputController", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "actionTitle", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "actionSubTitle", void 0);
+__decorate$3([
+  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 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 = 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([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderRemoveController.prototype, "valueController", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaImageUploaderRemoveController.prototype, "removeEventEmitter", void 0);
+__decorate$2([
+  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 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 = getDeepActiveElementInShadow();
+    if (activeElement && findParent(activeElement, 'vega-image-uploader') === this.host) {
+      activeElement.blur();
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaImageUploaderActionsVisibilityController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaImageUploaderActionsVisibilityController.prototype, "value", void 0);
+__decorate$1([
+  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{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-style:none}:host(:not(.disabled)) .vega-image-uploader-select .actions-backdrop:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-style:none}:host(:not(.disabled)) .vega-image-uploader-select .error .action-wrapper:focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}: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 .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{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));border-style:none}:host .vega-image-uploader-select.error .actions-backdrop:focus-visible{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));border-style:none}: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) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaRemove = createEvent(this, "vegaRemove", 7);
+    this.remove = createEvent(this, "remove", 7);
+    this.vegaCancel = createEvent(this, "vegaCancel", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new 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.darkModeStateControllerSlimmer = new DarkModeStateControllerSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: null,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaImageUploaderRenderer.getImageUploaderContainer(),
+      touchableAreaGetter: () => [this.vegaImageUploaderInputRenderer.getFileInputRef()],
+    });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaImageUploader, VegaChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaImageUploader, VegaRemove);
+    this.cancelEventEmitter = createEventEmitSlimmer(VegaImageUploader, VegaCancel);
+    this.buttonCircleEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.vegaImageUploaderRenderer.getImageUploaderContainer());
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaImageUploaderRuntimeMetricsPayloadDefinition);
+    this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
+    /**
+     * 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
+     * @defaultValue .jpg,.png,.jpeg
+     */
+    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() {
+    methodPlaceholder();
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * 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 methodPlaceholder(file);
+  }
+  render() {
+    return sanitizeVegaComponent(this.vegaImageUploaderRenderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaImageUploader.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderUploadingContentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderPreviewContentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderDefaultContentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderActionsRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderInputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderValueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderPreviewController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaImageUploaderRemoveController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "actionsVisibilityController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "darkModeStateControllerSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "removeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "cancelEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "buttonCircleEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaImageUploader.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaImageUploader.style = vegaImageUploaderCss;
+
+export { VegaImageUploader as vega_image_uploader };