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

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

@@ -1,23 +1,26 @@
-import { h, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-fe904372.js';
-import { s as sanitizeVegaComponent } from './component-f8ef7dc9.js';
+import { h, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
 import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
-import { M as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './vega-slimmer-c8580d54.js';
+import { a as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod } from './vega-slimmer-ce2e45d1.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
 import { m as methodPlaceholder } from './placeholder-bf562081.js';
-import { M as MapToComponentMethod } from './map-to-component-method-56335038.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { V as VegaClick, g as VegaChange, n as VegaRemove, o as VegaCancel } from './internalVegaEventManager-efa77ebb.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { V as VegaDialog } from './vegaDialogController-a23aae0f.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-271ec868.js';
-import { f as findParent } from './ui-8bf12791.js';
-import './featureFlagController-1a4a4ffc.js';
+import { V as VegaDialog } from './vegaDialogController-69cc3f35.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-862c5c79.js';
+import { f as findParent, d as getDeepActiveElementInShadow } from './ui-6e5294cb.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
 import './log-a824be80.js';
-import './misc-9fdbcfbb.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './misc-c21a85c9.js';
 import './string-be824360.js';
-import './changeManager-db36e47a.js';
-import './observer-8ff2bb65.js';
-import './dynamic-slimmer-4388f10d.js';
-import './pageResizeObserverSlimmer-99474370.js';
-import './breakpoints-3911666a.js';
-import './breakpoints-0aae54ba.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.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;
@@ -27,6 +30,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 {
+  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.
    *
@@ -34,7 +40,7 @@ class VegaImageUploaderRenderer extends VegaSlimmer {
    */
   render() {
     return (h(Host, { class: { disabled: this.disabled } },
-      h("div", { class: {
+      h("div", { ref: (e) => (this.imageUploaderContainerRef = e), class: {
           'vega-image-uploader-select': true,
           'disabled-border': this.disabled && !this.value,
         } }, this.renderContentByStatus()),
@@ -93,6 +99,7 @@ class VegaImageUploaderInputRenderer extends VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleFileInputChange = (e) => {
+      e.stopPropagation();
       const input = e.target;
       if (!input.files.length) {
         return;
@@ -170,26 +177,31 @@ class VegaImageUploaderActionsRenderer extends VegaSlimmer {
      */
     this.renderActionButton = (actionType) => {
       const options = this.getButtonOptions(actionType);
-      return (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 (h("vega-button-circle", Object.assign({ size: "small", variant: "icon-only", iconColor: "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.
    *
@@ -214,21 +226,18 @@ class VegaImageUploaderActionsRenderer extends 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;
@@ -262,7 +271,7 @@ __decorate$8([
 ], VegaImageUploaderActionsRenderer.prototype, "showReplaceButton", void 0);
 __decorate$8([
   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;
@@ -277,7 +286,11 @@ class VegaImageUploaderValueController extends VegaSlimmer {
     if (!this.value) {
       this.inputController.resetInput();
     }
-    this.vegaChange.emit(this.value);
+    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.
@@ -293,7 +306,10 @@ __decorate$7([
 ], VegaImageUploaderValueController.prototype, "value", void 0);
 __decorate$7([
   MapToComponentField()
-], VegaImageUploaderValueController.prototype, "vegaChange", void 0);
+], VegaImageUploaderValueController.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaImageUploaderValueController.prototype, "host", void 0);
 __decorate$7([
   MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
 ], VegaImageUploaderValueController.prototype, "inputController", void 0);
@@ -347,8 +363,8 @@ class VegaImageUploaderPreviewController extends 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;
@@ -436,7 +452,7 @@ class VegaImageUploaderUploadingContentRenderer extends VegaSlimmer {
       e.stopPropagation();
       this.status = undefined;
       this.removeController.handleRemoveFile();
-      this.vegaCancel.emit();
+      this.cancelEventEmitter.emit();
     };
   }
   /**
@@ -458,7 +474,7 @@ __decorate$4([
 ], VegaImageUploaderUploadingContentRenderer.prototype, "status", void 0);
 __decorate$4([
   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;
@@ -526,7 +542,7 @@ class VegaImageUploaderRemoveController extends 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();
     };
   }
   /**
@@ -543,7 +559,7 @@ __decorate$2([
 ], VegaImageUploaderRemoveController.prototype, "valueController", void 0);
 __decorate$2([
   MapToComponentField()
-], VegaImageUploaderRemoveController.prototype, "vegaRemove", void 0);
+], VegaImageUploaderRemoveController.prototype, "removeEventEmitter", void 0);
 __decorate$2([
   MapToComponentMethod('disconnectedCallback')
 ], VegaImageUploaderRemoveController.prototype, "disconnectedCallback", null);
@@ -577,7 +593,7 @@ class VegaImageUploaderActionsVisibilityController extends VegaSlimmer {
    * The activeElement should be div.image-preview-container and replace button
    */
   hideBackDropAndActions() {
-    const activeElement = document.activeElement;
+    const activeElement = getDeepActiveElementInShadow();
     if (activeElement && findParent(activeElement, 'vega-image-uploader') === this.host) {
       activeElement.blur();
     }
@@ -593,6 +609,8 @@ __decorate$1([
   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")
@@ -608,9 +626,12 @@ 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.vegaValidate = createEvent(this, "vegaValidate", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    this.globalSlimmers = {};
     this.vegaImageUploaderRenderer = new VegaImageUploaderRenderer();
     this.vegaImageUploaderUploadingContentRenderer = new VegaImageUploaderUploadingContentRenderer();
     this.vegaImageUploaderPreviewContentRenderer = new VegaImageUploaderPreviewContentRenderer();
@@ -630,10 +651,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 = createEventEmitSlimmer(VegaImageUploader, VegaChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaImageUploader, VegaRemove);
+    this.cancelEventEmitter = createEventEmitSlimmer(VegaImageUploader, VegaCancel);
+    this.buttonCircleEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.vegaImageUploaderRenderer.getImageUploaderContainer());
     /**
      * Determines the visual content that is initially displayed in
      *    the image uploader component, thereby providing a preview of
@@ -686,16 +712,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 methodPlaceholder(showError);
-  }
   /**
    * Invoke this method to retrieve the image preview URL for
    *    the current selection in the `vega-image-uploader` component.
@@ -712,6 +728,9 @@ const VegaImageUploader = class {
     "validationRules": ["watchValidationRules"]
   }; }
 };
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaImageUploader.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaImageUploader.prototype, "vegaImageUploaderRenderer", void 0);
@@ -748,5 +767,18 @@ __decorate([
 __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);
+VegaImageUploader.style = vegaImageUploaderCss;
 
 export { VegaImageUploader as vega_image_uploader };

package/dist/esm/vega-input-credit-card.entry.js

@@ -1,22 +1,25 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fe904372.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
 import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
 import { a as isCardNumberValid } from './number-400b3bf2.js';
-import { s as sanitizeVegaComponent } from './component-f8ef7dc9.js';
-import { I as InjectVegaSlimmer } from './vega-slimmer-c8580d54.js';
-import { m as methodPlaceholder } from './placeholder-bf562081.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-271ec868.js';
-import './featureFlagController-1a4a4ffc.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-862c5c79.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
+import { c as createEventEmitSlimmer, D as DomNodeSubjectObserverFactory } from './eventEmitSlimmer-d605ac81.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import { g as VegaChange, p as VegaFocus, q as VegaBlur } from './internalVegaEventManager-efa77ebb.js';
+import { V as VegaIconManager } from './iconManager-48bebc43.js';
 import './log-a824be80.js';
-import './map-to-component-method-56335038.js';
+import './vega-slimmer-ce2e45d1.js';
 import './string-be824360.js';
-import './changeManager-db36e47a.js';
-import './observer-8ff2bb65.js';
-import './ui-8bf12791.js';
-import './misc-9fdbcfbb.js';
-import './dynamic-slimmer-4388f10d.js';
-import './pageResizeObserverSlimmer-99474370.js';
-import './breakpoints-3911666a.js';
-import './breakpoints-0aae54ba.js';
+import './ui-6e5294cb.js';
+import './misc-c21a85c9.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
 
 const CARDS_INFO = [
   {
@@ -144,6 +147,31 @@ class ValidCreditCardNumberRule {
   }
 }
 
+const Icons = {
+  'visa': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#00579F" rx="2"/><path fill="#fff" d="M15.474 15.792h-1.979l1.238-7.653h1.979l-1.238 7.653ZM22.647 8.326A4.877 4.877 0 0 0 20.872 8c-1.954 0-3.33 1.042-3.339 2.532-.016 1.1.986 1.71 1.735 2.076.765.375 1.026.62 1.026.953-.008.513-.619.75-1.189.75-.79 0-1.213-.123-1.857-.408l-.26-.122-.277 1.718c.464.211 1.32.4 2.207.407 2.076 0 3.428-1.026 3.444-2.613.008-.872-.52-1.54-1.66-2.085-.693-.35-1.117-.586-1.117-.944.008-.326.359-.66 1.14-.66a3.362 3.362 0 0 1 1.474.293l.18.082.268-1.653ZM25.279 13.08l.79-2.14c-.008.016.162-.448.26-.733l.138.66s.375 1.831.457 2.214h-1.645ZM27.72 8.14h-1.53c-.472 0-.831.138-1.035.635l-2.94 7.018h2.077l.416-1.148h2.54c.057.269.237 1.148.237 1.148h1.832L27.72 8.14ZM11.842 8.139l-1.938 5.219-.212-1.059c-.358-1.221-1.482-2.548-2.736-3.208l1.775 6.693h2.093l3.11-7.645h-2.092Z"/><path fill="#FAA61A" d="M8.104 8.139H4.92l-.032.154c2.483.635 4.128 2.166 4.804 4.007L9 8.782c-.114-.489-.464-.627-.896-.643Z"/></svg>`,
+    autoSize: true,
+  },
+  'mastercard': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#000" rx="2"/><path fill="#ED0006" fill-rule="evenodd" d="M18.25 17.157a6.75 6.75 0 0 1-4.426 1.649c-3.769 0-6.824-3.09-6.824-6.903C7 8.091 10.055 5 13.824 5a6.75 6.75 0 0 1 4.426 1.649A6.75 6.75 0 0 1 22.676 5c3.769 0 6.824 3.09 6.824 6.903 0 3.812-3.055 6.903-6.824 6.903a6.75 6.75 0 0 1-4.426-1.65Z" clip-rule="evenodd"/><path fill="#F9A000" fill-rule="evenodd" d="M18.25 17.157a6.92 6.92 0 0 0 2.398-5.254 6.92 6.92 0 0 0-2.398-5.254A6.75 6.75 0 0 1 22.676 5c3.769 0 6.824 3.09 6.824 6.903 0 3.812-3.055 6.903-6.824 6.903a6.75 6.75 0 0 1-4.426-1.65Z" clip-rule="evenodd"/><path fill="#FF5E00" fill-rule="evenodd" d="M18.25 6.65a6.92 6.92 0 0 1 2.398 5.253 6.92 6.92 0 0 1-2.398 5.254 6.92 6.92 0 0 1-2.398-5.254A6.92 6.92 0 0 1 18.25 6.65Z" clip-rule="evenodd"/></svg>`,
+    autoSize: true,
+  },
+  'amex': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><g clip-path="url(#a)"><rect width="36" height="24" fill="#016FD0" rx="2"/><path fill="#fff" d="M6.99 18.549v-5.654h5.986l.643.838.663-.838h21.729v5.264s-.569.384-1.226.39H22.754l-.724-.891v.891h-2.373v-1.521s-.325.212-1.025.212h-.808v1.309h-3.593l-.641-.855-.651.855H6.99ZM0 8.634l1.35-3.147h2.334l.767 1.763V5.487h2.902l.456 1.274.442-1.274h13.027v.64s.685-.64 1.81-.64l4.227.015.753 1.74V5.487h2.428l.669 1v-1h2.45v5.654h-2.45l-.64-1.003v1.003h-3.569l-.359-.892h-.959l-.353.892h-2.42c-.968 0-1.587-.628-1.587-.628v.628H17.63l-.725-.892v.892H3.34l-.359-.892h-.956l-.356.892H0V8.634Z"/><path fill="#016FD0" d="M1.827 6.184.006 10.417h1.185l.336-.847H3.48l.335.847h1.211L3.207 6.184h-1.38Zm.673.985.596 1.482H1.903L2.5 7.169ZM5.151 10.416V6.183l1.685.006.98 2.73.956-2.736h1.671v4.233H9.385v-3.12l-1.122 3.12h-.928L6.21 7.296v3.12H5.15ZM11.168 10.416V6.183h3.454v.947h-2.384v.724h2.328v.891h-2.328v.752h2.384v.92h-3.454ZM15.233 6.184v4.233h1.059V8.913h.445l1.27 1.504H19.3l-1.393-1.56a1.29 1.29 0 0 0 1.161-1.3c0-.89-.7-1.373-1.48-1.373h-2.355Zm1.059.947h1.21c.29 0 .5.227.5.446 0 .28-.273.445-.485.445h-1.225v-.891ZM20.582 10.416h-1.08V6.183h1.08v4.233ZM23.144 10.416h-.233c-1.129 0-1.814-.889-1.814-2.1 0-1.24.678-2.133 2.103-2.133h1.17v1.003h-1.213c-.578 0-.988.451-.988 1.141 0 .82.468 1.165 1.142 1.165h.279l-.446.924ZM25.448 6.184l-1.82 4.233h1.185l.336-.847h1.953l.334.847h1.211l-1.819-4.233h-1.38Zm.674.985.595 1.482h-1.192l.597-1.482ZM28.77 10.416V6.183h1.345l1.718 2.66v-2.66h1.059v4.233H31.59l-1.762-2.73v2.73H28.77ZM7.715 17.825v-4.233h3.453v.947H8.784v.724h2.329v.89H8.784v.753h2.384v.919H7.715ZM24.636 17.825v-4.233h3.454v.947h-2.384v.724h2.317v.89h-2.317v.753h2.384v.919h-3.454ZM11.303 17.825l1.681-2.09-1.721-2.143h1.333l1.025 1.324 1.029-1.324h1.281l-1.699 2.116 1.685 2.117h-1.333l-.996-1.304-.971 1.304h-1.314ZM16.041 13.592v4.233h1.086v-1.337h1.114c.943 0 1.658-.5 1.658-1.472 0-.806-.56-1.424-1.52-1.424H16.04Zm1.086.957h1.174c.304 0 .522.187.522.488 0 .282-.217.487-.526.487h-1.17v-.975ZM20.359 13.592v4.233h1.058V16.32h.446l1.269 1.504h1.293l-1.393-1.56a1.29 1.29 0 0 0 1.162-1.3c0-.89-.7-1.373-1.48-1.373h-2.355Zm1.058.947h1.21c.29 0 .501.226.501.445 0 .281-.273.446-.486.446h-1.225v-.891ZM28.58 17.825v-.92H30.7c.313 0 .449-.169.449-.354 0-.178-.136-.358-.45-.358h-.957c-.831 0-1.295-.507-1.295-1.268 0-.679.424-1.333 1.66-1.333h2.062l-.446.952H29.94c-.341 0-.446.179-.446.35 0 .175.13.369.39.369h1.003c.927 0 1.33.526 1.33 1.215 0 .74-.449 1.347-1.38 1.347H28.58ZM32.464 17.825v-.92h2.118c.313 0 .45-.169.45-.354 0-.178-.136-.358-.45-.358h-.957c-.832 0-1.295-.507-1.295-1.268 0-.679.424-1.333 1.66-1.333h2.02l-.404.952h-1.783c-.34 0-.446.179-.446.35 0 .175.13.369.39.369h1.003c.927 0 1.33.526 1.33 1.215 0 .74-.449 1.347-1.38 1.347h-2.256Z"/></g><defs><clipPath id="a"><rect width="36" height="24" fill="#fff" rx="2"/></clipPath></defs></svg>`,
+    autoSize: true,
+  },
+  'discover': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#232342" rx="2"/><path fill="#fff" fill-rule="evenodd" d="M30.686 9.61c1.086 0 1.684.484 1.684 1.398a1.307 1.307 0 0 1-1.087 1.397l1.467 1.988h-1.14l-1.25-1.935h-.109v1.935h-.924V9.61h1.359Zm-.435 2.204h.272c.597 0 .869-.269.869-.752 0-.43-.272-.699-.87-.699h-.27v1.45Zm-4.129 2.579h2.608v-.806h-1.684v-1.29h1.63v-.806h-1.63v-1.074h1.684V9.61h-2.608v4.781Zm-2.716-1.559-1.25-3.223h-.978l2.01 4.889h.49l2.01-4.89h-.978l-1.304 3.225Zm-11.029-.805c0 1.343 1.087 2.471 2.445 2.471.435 0 .815-.107 1.195-.269v-1.074c-.271.322-.652.537-1.086.537-.87 0-1.576-.645-1.576-1.504v-.108c-.054-.86.652-1.612 1.521-1.665.435 0 .87.215 1.141.537V9.879c-.326-.214-.76-.268-1.14-.268-1.413-.108-2.5 1.02-2.5 2.418Zm-1.684-.591c-.543-.215-.706-.323-.706-.591.054-.323.326-.591.652-.538.271 0 .543.162.76.376l.49-.644c-.381-.323-.87-.538-1.359-.538-.76-.053-1.412.538-1.467 1.29v.054c0 .644.272 1.02 1.141 1.289.217.054.435.161.652.269a.563.563 0 0 1 .272.483c0 .376-.326.699-.652.699h-.055c-.434 0-.814-.269-.977-.645l-.598.59c.326.592.978.914 1.63.914.869.054 1.575-.59 1.63-1.45v-.162c-.055-.644-.326-.967-1.413-1.396Zm-3.15 2.954h.923V9.611h-.924v4.781ZM3.25 9.611H4.88c1.304.054 2.336 1.128 2.282 2.418 0 .698-.326 1.343-.87 1.826-.488.376-1.086.591-1.684.538H3.25V9.61Zm1.195 3.976c.435.053.924-.108 1.25-.376.326-.323.489-.753.489-1.236 0-.43-.163-.86-.49-1.182-.325-.269-.814-.43-1.249-.376h-.271v3.17h.271Z" clip-rule="evenodd"/><path fill="#FD6020" fill-rule="evenodd" d="M18.788 9.5c-1.358 0-2.499 1.075-2.499 2.471 0 1.344 1.087 2.472 2.5 2.526 1.412.053 2.498-1.075 2.553-2.472C21.287 10.628 20.2 9.5 18.788 9.5Z" clip-rule="evenodd"/></svg>`,
+    autoSize: true,
+  },
+  'regular-credit-card': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" rx="2" style='fill: rgba(var(--v-regular-credit-card-bg, 205, 209, 211, 1))'/><g clip-path="url(#a)"><path style="fill: rgba(var(--v-regular-credit-card-top, 252, 252, 252, 1))" d="M11 5c-1.103 0-2 .897-2 2v1h18V7c0-1.103-.897-2-2-2H11Zm16 6H9v6c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-6Zm-14.5 4h2c.275 0 .5.225.5.5s-.225.5-.5.5h-2a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5Zm3.5.5c0-.275.225-.5.5-.5h4c.275 0 .5.225.5.5s-.225.5-.5.5h-4a.501.501 0 0 1-.5-.5Z"/></g><defs><clipPath id="a"><path d="M9 4h18v16H9z" style='fill: rgba(var(--v-regular-credit-card-bottom, 255, 255, 255, 1))'/></clipPath></defs></svg>`,
+    autoSize: true,
+  },
+};
+
+const vegaInputCreditCardCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}";
+
 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")
@@ -157,10 +185,13 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const VegaInputCreditCard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.vegaValidate = createEvent(this, "vegaValidate", 7);
     this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
     this.vegaBlur = createEvent(this, "vegaBlur", 7);
+    this.blur = createEvent(this, "blur", 7);
     this.vegaFocus = createEvent(this, "vegaFocus", 7);
+    this.focus = createEvent(this, "focus", 7);
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -175,7 +206,13 @@ const VegaInputCreditCard = class {
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerGetter(),
+      touchableAreaGetter: () => this.touchableAreaGetter(),
     });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaChange);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaBlur);
+    this.focusEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaFocus);
+    this.inputCreditCardEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaFocus, VegaBlur], () => this.host, true);
     /**
      * Specifies whether a card number must be entered for
      *    this component to pass form validation.
@@ -241,35 +278,43 @@ const VegaInputCreditCard = class {
     this.renderInputContainer = () => {
       return (h("vega-input", { label: this.label, type: "number", prefixIcon: this.getCreditCardType(this.value)
           ? this.getCreditCardType(this.value).iconName
-          : 'regular-credit-card', maskConfig: this.getCreditCardType(this.value) ? this.getCreditCardType(this.value).maskConfig : null, placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, onVegaChange: this.handleVegaChange, onVegaBlur: this.handleVegaBlur, onVegaFocus: this.handleVegaFocus, ref: (e) => (this.inputRef = e) }));
+          : 'regular-credit-card', maskConfig: this.getCreditCardType(this.value) ? this.getCreditCardType(this.value).maskConfig : null, placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (e) => {
+          this.inputRef = e;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaChange, (input) => {
+            this.handleVegaChange(input);
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaBlur, () => {
+            this.handleVegaBlur();
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaFocus, () => {
+            this.handleVegaFocus();
+          });
+        } }));
     };
     this.handleVegaChange = (e) => {
-      e.stopPropagation();
       if ((e.detail && !e.detail.includes('X')) || !e.detail) {
         this.value = e.detail;
       }
     };
-    this.handleVegaBlur = (e) => {
-      e.stopPropagation();
+    this.handleVegaBlur = () => {
       this.hideCardNumberOnBlur && this.hideCardNumbers(this.value);
-      this.vegaBlur.emit();
+      this.blurEventEmitter.emit();
     };
-    this.handleVegaFocus = (e) => {
-      e.stopPropagation();
+    this.handleVegaFocus = () => {
       this.inputRef.value = this.value;
-      this.vegaFocus.emit();
+      this.focusEventEmitter.emit();
     };
+    this.inputContainerGetter = () => this.inputRef.shadowRoot.querySelector('.vega-input-container');
+    this.touchableAreaGetter = () => Array.from(this.inputRef.shadowRoot.querySelectorAll('input'));
   }
   watchValidationRules() {
   }
   watchValue(value) {
-    this.vegaChange.emit(value);
-  }
-  /**
-   * Invoke this method to validate the input credit card with the current value.
-   */
-  async valid(showError = true) {
-    return methodPlaceholder(showError);
+    this.changeEventEmitter.emit(value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: value,
+    });
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderInputContainer()), this.host);
@@ -297,8 +342,33 @@ const VegaInputCreditCard = class {
     "value": ["watchValue"]
   }; }
 };
+(() => {
+  VegaIconManager.register({
+    'visa': Icons.visa,
+    'mastercard': Icons.mastercard,
+    'amex': Icons.amex,
+    'discover': Icons.discover,
+    'regular-credit-card': Icons['regular-credit-card'],
+  });
+})();
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputCreditCard.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputCreditCard.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "focusEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "inputCreditCardEventPrevent", void 0);
+VegaInputCreditCard.style = vegaInputCreditCardCss;
 
 export { VegaInputCreditCard as vega_input_credit_card };