@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/cjs/vega-icon.cjs.entry.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const icons = require('./icons-44ed411d.js');
+const typeGuard = require('./typeGuard-70b919b6.js');
+const component = require('./component-b50f0483.js');
+const designToken = require('./designToken-a55d5476.js');
+const ui = require('./ui-23cd9abb.js');
+const iconManager = require('./iconManager-a9c2209d.js');
+require('./global-slimmer-registry-58eee093.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.js');
+require('./typography-3d2ba97d.js');
+require('./log-5d8066e0.js');
+require('./responsiveFormatFacade-8518443e.js');
+require('./number-7e7d9981.js');
+
+const vegaIconCss = ":host(.v-text-primary),.v-text-primary{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.v-text-secondary),.v-text-secondary{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.v-text-inverted-primary),.v-text-inverted-primary{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host(.v-text-inverted-secondary),.v-text-inverted-secondary{color:rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))}:host(.v-text-link),.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.v-text-link-hover),.v-text-link-hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.v-text-link-active),.v-text-link-active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.v-text-link-focus),.v-text-link-focus{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host(.v-text-link-visited),.v-text-link-visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host(.v-text-danger-link),.v-text-danger-link{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host(.v-text-danger-link-hover),.v-text-danger-link-hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host(.v-text-danger-link-active),.v-text-danger-link-active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}:host(.v-text-danger-link-focus),.v-text-danger-link-focus{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host(.v-text-danger-link-visited),.v-text-danger-link-visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}:host(.v-text-success),.v-text-success{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.v-text-error),.v-text-error{color:rgba(var(--v-text-error, 189, 41, 71, 1))}:host(.v-text-black),.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host(.v-text-white),.v-text-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host(.v-text-disabled),.v-text-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.v-text-input-disabled),.v-text-input-disabled{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.v-text-sidebar-link),.v-text-sidebar-link{color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}:host(.v-text-sidebar-link-hover),.v-text-sidebar-link-hover{color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.v-text-sidebar-link-selected),.v-text-sidebar-link-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host(.v-text-input-placeholder),.v-text-input-placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host(.v-text-accent1-primary),.v-text-accent1-primary{color:rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))}:host(.v-text-accent2-primary),.v-text-accent2-primary{color:rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))}:host(.v-text-accent3-primary),.v-text-accent3-primary{color:rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))}:host(.v-text-accent4-primary),.v-text-accent4-primary{color:rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))}:host(.v-text-accent5-primary),.v-text-accent5-primary{color:rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))}:host(.v-text-accent6-primary),.v-text-accent6-primary{color:rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))}:host(.v-text-accent7-primary),.v-text-accent7-primary{color:rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))}:host(.v-text-accent8-primary),.v-text-accent8-primary{color:rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))}:host(.v-text-accent9-primary),.v-text-accent9-primary{color:rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))}:host(.v-text-accent10-primary),.v-text-accent10-primary{color:rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))}:host(.v-text-site-footer-link),.v-text-site-footer-link{color:rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))}:host(.v-text-site-footer-link-hover),.v-text-site-footer-link-hover{color:rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))}:host(.v-text-site-footer-link-active),.v-text-site-footer-link-active{color:rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))}:host(.v-text-brand),.v-text-brand{color:rgba(var(--v-text-brand, 89, 96, 99, 1))}:host(.v-text-on-action),.v-text-on-action{color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}:host(.v-text-on-danger),.v-text-on-danger{color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}:host(.v-text-on-disabled),.v-text-on-disabled{color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1))}:host(.v-w-0),.v-w-0{width:0px}:host(.v-w-size-0),.v-w-size-0{width:0px}:host(.v-w-size-4),.v-w-size-4{width:4px}:host(.v-w-size-8),.v-w-size-8{width:8px}:host(.v-w-size-12),.v-w-size-12{width:12px}:host(.v-w-size-16),.v-w-size-16{width:16px}:host(.v-w-size-20),.v-w-size-20{width:20px}:host(.v-w-size-24),.v-w-size-24{width:24px}:host(.v-w-size-32),.v-w-size-32{width:32px}:host(.v-w-size-40),.v-w-size-40{width:40px}:host(.v-w-size-48),.v-w-size-48{width:48px}:host(.v-w-size-64),.v-w-size-64{width:64px}:host(.v-w-size-72),.v-w-size-72{width:72px}:host(.v-w-size-80),.v-w-size-80{width:80px}:host(.v-w-size-112),.v-w-size-112{width:112px}:host(.v-w-size-2),.v-w-size-2{width:2px}:host(.v-h-0),.v-h-0{height:0px}:host(.v-h-size-0),.v-h-size-0{height:0px}:host(.v-h-size-4),.v-h-size-4{height:4px}:host(.v-h-size-8),.v-h-size-8{height:8px}:host(.v-h-size-12),.v-h-size-12{height:12px}:host(.v-h-size-16),.v-h-size-16{height:16px}:host(.v-h-size-20),.v-h-size-20{height:20px}:host(.v-h-size-24),.v-h-size-24{height:24px}:host(.v-h-size-32),.v-h-size-32{height:32px}:host(.v-h-size-40),.v-h-size-40{height:40px}:host(.v-h-size-48),.v-h-size-48{height:48px}:host(.v-h-size-64),.v-h-size-64{height:64px}:host(.v-h-size-72),.v-h-size-72{height:72px}:host(.v-h-size-80),.v-h-size-80{height:80px}:host(.v-h-size-112),.v-h-size-112{height:112px}:host(.v-h-size-2),.v-h-size-2{height:2px}:host{display:inline-flex;user-select:none}i{line-height:1}:host(:not(.vega-auto-size)) ::slotted(svg){width:100%;height:100%}";
+
+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 VegaIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /**
+     * Specifies the width and height of the icon.
+     *    For Third Party Icons (e.g., Font Awesome),
+     *    it sets the icon's font-size.
+     */
+    this.size = 'size-16';
+    /**
+     * The below method is e2e-test covered in
+     * @see {module:console-warn-when-load-fa-lib-timeout}
+     */
+    /* istanbul ignore next */
+    this.cloneFAIconStyles = () => {
+      const isFAIcon = !icons.Icons.find((icon) => icon === this.icon);
+      if (isFAIcon) {
+        const iconStyleHTML = this.getIconStyleHTML();
+        if (iconStyleHTML) {
+          this.appendStyles(iconStyleHTML);
+        }
+        let count = 0;
+        const timerId = window.setInterval(() => {
+          if (count < 10) {
+            count++;
+            const iconStyleHTML = this.getIconStyleHTML();
+            if (iconStyleHTML) {
+              this.appendStyles(iconStyleHTML);
+              clearInterval(timerId);
+              return;
+            }
+          }
+          else {
+            console.warn('[Vega] Loading Font Awesome timeout.');
+            clearInterval(timerId);
+            return;
+          }
+        }, 300);
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:icon-changed-from-vega-icon-to-fa-icon-class}
+   */
+  /* istanbul ignore next */
+  watchIcon() {
+    this.cloneFAIconStyles();
+  }
+  componentWillLoad() {
+    this.cloneFAIconStyles();
+  }
+  render() {
+    const iconFromTokenIndex = icons.Icons.findIndex((icon) => {
+      return icon === this.icon;
+    });
+    if (iconManager.VegaIconManager.hasIcon(this.icon)) {
+      const { icon, autoSize } = iconManager.VegaIconManager.getIcon(this.icon);
+      const iconSize = autoSize ? null : this.size;
+      return this.renderForVegaIconToken(icon, iconSize, autoSize);
+    }
+    else if (iconFromTokenIndex > -1) {
+      return this.renderForVegaIconToken(icons.getIconFromToken(this.icon), this.size);
+    }
+    else {
+      /**
+       * The below method is e2e-test covered in
+       * @see {module:render-correct-size-with-fa-icon}
+       * @see {module:append-fa-icon-styles-to-shadow-dom}
+       */
+      /* istanbul ignore next */
+      return this.renderForThirdPartyIcon();
+    }
+  }
+  renderForVegaIconToken(icon, size, isAutoSize = false) {
+    const sizeClassName = size ? this.formatAndValidSize(this.size) : null;
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: ui.arrayToClassString([
+        sizeClassName,
+        this.color && designToken.formatAndValidTextColor(this.color),
+        isAutoSize && 'vega-auto-size',
+      ]), innerHTML: icon }, index.h("slot", null)), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:render-correct-size-with-fa-icon}
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
+  renderForThirdPartyIcon() {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: ui.arrayToClassString([this.color && designToken.formatAndValidTextColor(this.color)]), style: this.formatThirdPartyIconSize(this.size) }, index.h("i", { part: "icon", class: this.icon })), this.host);
+  }
+  formatAndValidSize(size) {
+    return `v-w-${size} v-h-${size}`;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:render-correct-size-with-fa-icon}
+   */
+  /* istanbul ignore next */
+  formatThirdPartyIconSize(size) {
+    return { 'font-size': `${typeGuard.Spacing[size]}px` };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
+  appendStyles(iconStyles) {
+    var _a;
+    if (iconStyles) {
+      const styleElement = (_a = this.host.shadowRoot.querySelector('#fa-icon-styles')) !== null && _a !== void 0 ? _a : document.createElement('style');
+      styleElement.id = 'fa-icon-styles';
+      styleElement.innerHTML = iconStyles;
+      this.host.shadowRoot.appendChild(styleElement);
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see {module:append-fa-icon-styles-to-shadow-dom}
+   */
+  /* istanbul ignore next */
+  getIconStyleHTML() {
+    var _a;
+    if (VegaIcon.iconStyleCache.has(this.icon)) {
+      return VegaIcon.iconStyleCache.get(this.icon);
+    }
+    else {
+      const iconElement = document.createElement('i');
+      iconElement.className = this.icon;
+      iconElement.style.display = 'none';
+      document.body.appendChild(iconElement);
+      const computedStyle = getComputedStyle(iconElement);
+      // `fontFamily` is null in spec test. Skip it by using '?'
+      if ((_a = computedStyle.fontFamily) === null || _a === void 0 ? void 0 : _a.includes('Font Awesome')) {
+        const pseudoBeforeElementStyle = getComputedStyle(iconElement, '::before');
+        const pseudoAfterElementStyle = getComputedStyle(iconElement, '::after');
+        const styleHTML = `
+				i {
+					font-weight: ${computedStyle.fontWeight};
+					font-family: ${computedStyle.fontFamily};
+					font-style: ${computedStyle.fontStyle};
+					position: ${computedStyle.position};
+					letter-spacing: ${computedStyle.letterSpacing};
+				}
+				i::before {
+					content: ${pseudoBeforeElementStyle.content};
+					position: ${pseudoBeforeElementStyle.position};
+					opacity: ${pseudoBeforeElementStyle.opacity};
+				}
+				i::after {
+					content: ${pseudoAfterElementStyle.content};
+					position: ${pseudoAfterElementStyle.position};
+					opacity: ${pseudoAfterElementStyle.opacity};
+				}
+			`.replace(/[\n\t]/gi, '');
+        VegaIcon.iconStyleCache.set(this.icon, styleHTML);
+        document.body.removeChild(iconElement);
+        return styleHTML;
+      }
+      else {
+        document.body.removeChild(iconElement);
+        return null;
+      }
+    }
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "icon": ["watchIcon"]
+  }; }
+};
+VegaIcon.iconStyleCache = new Map();
+__decorate([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaIcon.prototype, "globalSlimmers", void 0);
+VegaIcon.style = vegaIconCss;
+
+exports.vega_icon = VegaIcon;

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

@@ -2,26 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4c1d8251.js');
-const component = require('./component-a411c045.js');
+const index = require('./index-1299d729.js');
+const component = require('./component-b50f0483.js');
 const requiredFieldRule = require('./requiredFieldRule-56f10b25.js');
-const vegaSlimmer = require('./vega-slimmer-281f0079.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const mapToComponentMethod = require('./map-to-component-method-ec6546f1.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const internalVegaEventManager = require('./internalVegaEventManager-cfb1df83.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const vegaDialogController = require('./vegaDialogController-d2ae40fb.js');
-const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-57d1a405.js');
-const ui = require('./ui-97068bc7.js');
-require('./featureFlagController-3b23a9cb.js');
+const vegaDialogController = require('./vegaDialogController-01bddb6a.js');
+const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-69ea8396.js');
+const ui = require('./ui-23cd9abb.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-4b96b18b.js');
 require('./log-5d8066e0.js');
-require('./misc-3d30df91.js');
+require('./dynamic-slimmer-c718b7d9.js');
+require('./misc-0197689b.js');
 require('./string-21427167.js');
-require('./changeManager-91f1f24a.js');
-require('./observer-126f19d0.js');
-require('./dynamic-slimmer-e289eb0b.js');
-require('./pageResizeObserverSlimmer-a81a52b1.js');
-require('./breakpoints-89055ccc.js');
-require('./breakpoints-b5eab9c2.js');
+require('./pageResizeObserverSlimmer-9751395d.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.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;
@@ -31,6 +34,9 @@ var __decorate$b = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The VegaImageUploaderRenderer class is a TypeScript React component that renders a VegaImageUploader with different content based on its status. */
 class VegaImageUploaderRenderer extends vegaSlimmer.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.
    *
@@ -38,7 +44,7 @@ class VegaImageUploaderRenderer extends vegaSlimmer.VegaSlimmer {
    */
   render() {
     return (index.h(index.Host, { class: { disabled: this.disabled } },
-      index.h("div", { class: {
+      index.h("div", { ref: (e) => (this.imageUploaderContainerRef = e), class: {
           'vega-image-uploader-select': true,
           'disabled-border': this.disabled && !this.value,
         } }, this.renderContentByStatus()),
@@ -97,6 +103,7 @@ class VegaImageUploaderInputRenderer extends vegaSlimmer.VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleFileInputChange = (e) => {
+      e.stopPropagation();
       const input = e.target;
       if (!input.files.length) {
         return;
@@ -174,26 +181,31 @@ class VegaImageUploaderActionsRenderer extends vegaSlimmer.VegaSlimmer {
      */
     this.renderActionButton = (actionType) => {
       const options = this.getButtonOptions(actionType);
-      return (index.h("vega-button-circle", Object.assign({ size: "small", variant: "icon-only", iconColor: "text-inverted-primary", role: "menuitem" }, options)));
-    };
-    this.handleUploaderClick = (e) => {
-      e.stopPropagation();
-      this.inputController.triggerInputClick();
-    };
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:image-file-should-be-removed-when-click-the-remove-button}
-     */
-    /* istanbul ignore next */
-    this.handleRemoveBtnClick = (e) => {
-      e.stopPropagation();
-      this.removeController.showRemoveDialog();
-    };
-    this.handlePreviewBtnClick = (e) => {
-      e.stopPropagation();
-      this.previewController.showPreview();
+      return (index.h("vega-button-circle", Object.assign({ size: "small", variant: "icon-only", iconColor: "text-inverted-primary", role: "menuitem", ref: (ref) => {
+          eventEmitSlimmer.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, internalVegaEventManager.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.
    *
@@ -218,21 +230,18 @@ class VegaImageUploaderActionsRenderer extends vegaSlimmer.VegaSlimmer {
       case 'Preview':
         options = {
           icon: 'zoom-in',
-          onVegaClick: this.handlePreviewBtnClick,
           label: actionType,
         };
         break;
       case 'Delete':
         options = {
           icon: 'delete-bin',
-          onVegaClick: this.handleRemoveBtnClick,
           label: actionType,
         };
         break;
       case 'Replace':
         options = {
           icon: 'photo',
-          onVegaClick: this.handleUploaderClick,
           label: actionType,
         };
         break;
@@ -266,7 +275,7 @@ __decorate$8([
 ], VegaImageUploaderActionsRenderer.prototype, "showReplaceButton", void 0);
 __decorate$8([
   vegaSlimmer.MapToComponentField()
-], VegaImageUploaderActionsRenderer.prototype, "vegaRemove", void 0);
+], VegaImageUploaderActionsRenderer.prototype, "removeEventEmitter", void 0);
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -281,7 +290,11 @@ class VegaImageUploaderValueController extends vegaSlimmer.VegaSlimmer {
     if (!this.value) {
       this.inputController.resetInput();
     }
-    this.vegaChange.emit(this.value);
+    this.changeEventEmitter.emit(this.value);
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   /**
    * The function sets the value of a variable to either a VegaFile object or null.
@@ -297,12 +310,15 @@ __decorate$7([
 ], VegaImageUploaderValueController.prototype, "value", void 0);
 __decorate$7([
   vegaSlimmer.MapToComponentField()
-], VegaImageUploaderValueController.prototype, "vegaChange", void 0);
+], VegaImageUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  vegaSlimmer.MapToComponentField()
+], VegaImageUploaderValueController.prototype, "host", void 0);
 __decorate$7([
   vegaSlimmer.MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
 ], VegaImageUploaderValueController.prototype, "inputController", void 0);
 __decorate$7([
-  mapToComponentMethod.MapToComponentMethod('watchValue')
+  vegaSlimmer.MapToComponentMethod('watchValue')
 ], VegaImageUploaderValueController.prototype, "handleValueChange", null);
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -351,8 +367,8 @@ class VegaImageUploaderPreviewController extends vegaSlimmer.VegaSlimmer {
         previewModal.modalTitle = this.value.name;
       }
       previewModal.innerHTML = `
-            <div class="v-text-center">
-                <img class="v-w-full preview-image" src="${imagePreviewURL}" alt="" />
+            <div style='text-align: center'>
+                <img style='width: 100%' class="preview-image" src="${imagePreviewURL}" alt="" />
             </div>
         `;
       this.previewModalRef = previewModal;
@@ -392,10 +408,10 @@ __decorate$6([
   vegaSlimmer.MapToComponentField()
 ], VegaImageUploaderPreviewController.prototype, "value", void 0);
 __decorate$6([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+  vegaSlimmer.MapToComponentMethod('disconnectedCallback')
 ], VegaImageUploaderPreviewController.prototype, "disconnectedCallback", null);
 __decorate$6([
-  mapToComponentMethod.MapToComponentMethod('getContentURL')
+  vegaSlimmer.MapToComponentMethod('getContentURL')
 ], VegaImageUploaderPreviewController.prototype, "getImagePreviewURL", void 0);
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -440,7 +456,7 @@ class VegaImageUploaderUploadingContentRenderer extends vegaSlimmer.VegaSlimmer
       e.stopPropagation();
       this.status = undefined;
       this.removeController.handleRemoveFile();
-      this.vegaCancel.emit();
+      this.cancelEventEmitter.emit();
     };
   }
   /**
@@ -462,7 +478,7 @@ __decorate$4([
 ], VegaImageUploaderUploadingContentRenderer.prototype, "status", void 0);
 __decorate$4([
   vegaSlimmer.MapToComponentField()
-], VegaImageUploaderUploadingContentRenderer.prototype, "vegaCancel", void 0);
+], 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;
@@ -530,7 +546,7 @@ class VegaImageUploaderRemoveController extends vegaSlimmer.VegaSlimmer {
     /** The `handleRemoveFile` method is responsible for removing the image from the `VegaImageUploader` component. */
     this.handleRemoveFile = () => {
       this.valueController.setValue(null);
-      this.vegaRemove.emit();
+      this.removeEventEmitter.emit();
     };
   }
   /**
@@ -547,9 +563,9 @@ __decorate$2([
 ], VegaImageUploaderRemoveController.prototype, "valueController", void 0);
 __decorate$2([
   vegaSlimmer.MapToComponentField()
-], VegaImageUploaderRemoveController.prototype, "vegaRemove", void 0);
+], VegaImageUploaderRemoveController.prototype, "removeEventEmitter", void 0);
 __decorate$2([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+  vegaSlimmer.MapToComponentMethod('disconnectedCallback')
 ], VegaImageUploaderRemoveController.prototype, "disconnectedCallback", null);
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -581,7 +597,7 @@ class VegaImageUploaderActionsVisibilityController extends vegaSlimmer.VegaSlimm
    * The activeElement should be div.image-preview-container and replace button
    */
   hideBackDropAndActions() {
-    const activeElement = document.activeElement;
+    const activeElement = ui.getDeepActiveElementInShadow();
     if (activeElement && ui.findParent(activeElement, 'vega-image-uploader') === this.host) {
       activeElement.blur();
     }
@@ -594,9 +610,11 @@ __decorate$1([
   vegaSlimmer.MapToComponentField()
 ], VegaImageUploaderActionsVisibilityController.prototype, "value", void 0);
 __decorate$1([
-  mapToComponentMethod.MapToComponentMethod('watchValue')
+  vegaSlimmer.MapToComponentMethod('watchValue')
 ], VegaImageUploaderActionsVisibilityController.prototype, "handleValueChange", null);
 
+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));border-width:1px;border-style:dashed;width:120px;height:120px}:host .vega-image-uploader-select .action-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:8px;width:100%;height:100%;padding:12px;box-sizing:border-box;cursor:pointer;outline:none}:host(.disabled) .vega-image-uploader-select.disabled-border{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))}:host(:not(.disabled)) .vega-image-uploader-select:hover{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border-color:rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1));background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(:not(.disabled)) .vega-image-uploader-select:hover .vega-image-uploader-text{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(:not(.disabled)) .vega-image-uploader-select .action-wrapper:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host(:not(.disabled)) .vega-image-uploader-select .actions-backdrop:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host(:not(.disabled)) .vega-image-uploader-select .error .action-wrapper:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host(.disabled) .vega-image-uploader-select .action-wrapper{cursor:not-allowed}:host(.disabled) .vega-image-uploader-select .action-wrapper vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.disabled) .vega-image-uploader-select .action-wrapper .vega-image-uploader-text{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host .vega-image-uploader-select .vega-image-uploader-text{padding-top:8px;padding-bottom:8px;color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}@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:16px;font-weight:700;line-height:24px;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:16px;font-weight:700;line-height:24px;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:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host .vega-image-uploader-select .action-wrapper vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(:not(.disabled)) .vega-image-uploader-select:not(.error):focus-within{border-color:rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .image-preview-container{display:flex;align-items:center;justify-content:center;position:relative;height:100%;border-radius:8px;outline:none}:host .image-preview-container img{width:100%;height:100%;border-radius:8px;object-fit:contain}:host .image-preview-container.actions-backdrop::before{width:100%;height:100%;border-radius:8px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background-color:rgba(0, 0, 0, 0.6);content:\" \"}:host .vega-image-uploader-select .actions{position:absolute;top:0px;right:0px;bottom:0px;left:0px;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none}:host .image-preview-container.actions-backdrop:hover::before{opacity:1;pointer-events:auto}:host .image-preview-container:hover .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-visible::before{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-visible .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-within::before{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .actions-backdrop:focus-within .actions{opacity:1;pointer-events:auto}:host .vega-image-uploader-select .action-loading{position:relative;display:inline-block;width:24px;height:24px}:host .vega-image-uploader-select .action-loading::before{content:\" \";display:block;border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;border:4px solid rgb(229, 239, 255)}:host .vega-image-uploader-select .action-loading::after{display:block;border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";border-style:solid;border-width:4px;border-color:rgb(153, 192, 255) transparent transparent transparent;animation:loading 1.2s linear infinite}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host .vega-image-uploader-select .action-wrapper .cancel-action{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host vega-input{display:none}:host input[type=file]{display:none}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-image-uploader-select.error{border-color:rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))}:host .vega-image-uploader-select.error:hover{border-color:rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-image-uploader-select.error .action-wrapper:focus-within{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host .vega-image-uploader-select.error .actions-backdrop:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host .vega-hidden{display:none}";
+
 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")
@@ -612,9 +630,12 @@ const VegaImageUploader = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
     this.vegaRemove = index.createEvent(this, "vegaRemove", 7);
+    this.remove = index.createEvent(this, "remove", 7);
     this.vegaCancel = index.createEvent(this, "vegaCancel", 7);
-    this.vegaValidate = index.createEvent(this, "vegaValidate", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    this.globalSlimmers = {};
     this.vegaImageUploaderRenderer = new VegaImageUploaderRenderer();
     this.vegaImageUploaderUploadingContentRenderer = new VegaImageUploaderUploadingContentRenderer();
     this.vegaImageUploaderPreviewContentRenderer = new VegaImageUploaderPreviewContentRenderer();
@@ -634,10 +655,15 @@ const VegaImageUploader = class {
         },
       ],
       validationRulesName: 'validationRules',
-      inputContainerSelector: '.vega-image-uploader-select',
       defaultValue: null,
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaImageUploaderRenderer.getImageUploaderContainer(),
+      touchableAreaGetter: () => [this.vegaImageUploaderInputRenderer.getFileInputRef()],
     });
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, internalVegaEventManager.VegaChange);
+    this.removeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, internalVegaEventManager.VegaRemove);
+    this.cancelEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaImageUploader, internalVegaEventManager.VegaCancel);
+    this.buttonCircleEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([internalVegaEventManager.VegaClick], () => this.vegaImageUploaderRenderer.getImageUploaderContainer());
     /**
      * Determines the visual content that is initially displayed in
      *    the image uploader component, thereby providing a preview of
@@ -690,16 +716,6 @@ const VegaImageUploader = class {
   }
   disconnectedCallback() {
   }
-  /* Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582 */
-  /**
-   * Invoke this method to validate the image uploader component
-   *    with the current selected value.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showError = true) {
-    return placeholder.methodPlaceholder(showError);
-  }
   /**
    * Invoke this method to retrieve the image preview URL for
    *    the current selection in the `vega-image-uploader` component.
@@ -717,40 +733,56 @@ const VegaImageUploader = class {
   }; }
 };
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaImageUploader.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderUploadingContentRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderPreviewContentRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderDefaultContentRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderInputRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderActionsRenderer", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderInputController", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderValueController", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderPreviewController", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderRemoveController", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "actionsVisibilityController", void 0);
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "removeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "cancelEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaImageUploader.prototype, "buttonCircleEventPrevent", void 0);
+VegaImageUploader.style = vegaImageUploaderCss;
 
 exports.vega_image_uploader = VegaImageUploader;