import { h, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
import { R as ResponsiveFormatFacade } from './responsive-format-facade-3ec5c161.js';
import { m as methodPlaceholder } from './placeholder-bf562081.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3897e95b.js';
import { a as VegaClick, i as VegaChange, p as VegaRemove, F as VegaCancel } from './vega-event-id-578c6c6d.js';
import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
import { C as ChangeManager } from './change-manager-6a7eb88c.js';
import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-524cabd2.js';
import { V as VegaDialog } from './vega-dialog-controller-bbb2fc52.js';
import { D as DropFileAcceptFilterSlimmer } from './drop-file-accept-filter-slimmer-ad759e4a.js';
import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9e70a18d.js';
import { f as findParent, e as getDeepActiveElementInShadow } from './ui-64815a12.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2fcba81b.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-697ad0b7.js';
import { T as TranslationSlimmer } from './translation-slimmer-32353a1c.js';
import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-f2b4f8ed.js';
import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e9a6b097.js';
import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
import './type-guard-ed1004cc.js';
import './breakpoints-d9faf11c.js';
import './ui-93922c59.js';
import './typography-396de03f.js';
import './internal-translation-controller-d8217d93.js';
import './breakpoints-332702ed.js';
import './number-4398f2e1.js';
import './pixel-f32c07ce.js';
import './array-7888f339.js';
import './feature-flag-controller-30f7b625.js';
import './index-bfc6dfa2.js';
import './observer-3959f9dd.js';
import './misc-9fdbcfbb.js';
import './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
import './dynamic-slimmer-90b8af32.js';
import './string-a953eafc.js';
import './vega-internal-event-id-913e8be6.js';
import './index-3b327f29.js';
import './try-get-document-bef0f526.js';
import './page-resize-observer-slimmer-e24d36c5.js';
import './mutation-observer-slimmer-58ebc13c.js';
import './mutation-observer-filters-1a054fb0.js';
import './sub-state-observer-slimmer-81538a8c.js';
import './internal-vega-event-manager-1ac5ee9a.js';
import './vega-env-manager-8f8dc473.js';
import './tinycolor-polyfill-7be0eb93.js';
import './vega-nonce-manager-497e5eb5.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;
    }
    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 {
  constructor() {
    super(...arguments);
    /**
     * Prevents the browser's default behavior on drag/drop events over the image preview.
     * Without this, dropping a file onto the already-populated preview would cause the browser
     * to navigate to (and open) the dropped file. The component does not support replacing the
     * image via drag-and-drop while a preview is shown, so we simply no-op here, matching the
     * disabled-state behavior.
     *
     * @param {DragEvent} e drag event object
     */
    this.preventDefaultDragEvent = (e) => {
      e.preventDefault();
    };
  }
  /**
   * 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", onDrop: this.preventDefaultDragEvent, onDragEnter: this.preventDefaultDragEvent, onDragOver: this.preventDefaultDragEvent },
      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();
    };
    /**
     * An event handler that is triggered when files are dropped onto the image uploader drop area.
     *
     * preventDefault() is always called (even when `disabled`) to stop the browser's default
     * behavior of navigating to the dropped file URL — some browsers (e.g., Firefox) will navigate
     * away from the page if a file drop is not preventDefault'd by some handler in the propagation
     * path. stopPropagation() is called because the drop has been consumed by this component and
     * parent containers should not re-process the same files (e.g., a page-level drop handler
     * shouldn't also try to upload them). Parent containers can still observe dragenter/dragover
     * to manage drag overlays and dismiss them via the dragleave/dragend events.
     *
     * @param {DragEvent} e drag event object
     */
    this.dropHandler = (e) => {
      var _a;
      e.preventDefault();
      e.stopPropagation();
      if (this.disabled) {
        return;
      }
      const files = this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
      if (files.length) {
        this.valueController.setValue(files[0]);
      }
    };
    /**
     * Used to prevent the default browser behavior on dragenter/dragover so the element is registered
     * as a valid drop target. stopPropagation() is intentionally omitted here so parent containers
     * can still react to drag events (e.g., page-level drag overlays).
     *
     * @param {DragEvent} e drag event object
     */
    this.handleDragEvent = (e) => {
      e.preventDefault();
    };
  }
  /**
   * 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(), onDrop: this.dropHandler, onDragEnter: this.handleDragEvent, onDragOver: this.handleDragEvent },
      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({ componentFieldName: 'vegaImageUploaderValueController' })
], VegaImageUploaderDefaultContentRenderer.prototype, "valueController", void 0);
__decorate$3([
  MapToComponentField()
], VegaImageUploaderDefaultContentRenderer.prototype, "disabled", void 0);
__decorate$3([
  MapToComponentField()
], VegaImageUploaderDefaultContentRenderer.prototype, "dropFileFilterController", 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.dropFileFilterController = new DropFileAcceptFilterSlimmer();
    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() {
  }
  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 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, "dropFileFilterController", 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 };
