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

package/dist/collection/components/vega-input/vega-input.js

@@ -17,12 +17,16 @@ import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRu
 import { sanitizeVegaComponent } from '../../utils/component';
 import { NumberMaskStrategy, } from '../../helpers/formatter/string-formatter/numberMaskStrategy';
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
-import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/componentLoadRequired';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/eventID/vegaEventId';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../helpers/change-manager/changeManager';
 export class VegaInput {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -57,7 +61,12 @@ export class VegaInput {
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => [this.inputRef],
     });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
+    this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
     /**
      * Specifies the label or title for the input field.
      *
@@ -134,13 +143,6 @@ export class VegaInput {
      *    during the user's input.
      */
     this.autoValidation = true;
-    /* Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582 */
-    /**
-     * Controls the behavior of field validation when its value is updated.
-     *
-     * @deprecated This property will be removed soon
-     */
-    this.formValidation = 0;
     /**
      * Defines custom validation rules for the input field.
      */
@@ -168,11 +170,11 @@ export class VegaInput {
         this.setupStringFormatter();
       }
     };
-    this.handleInputFocus = () => {
-      this.vegaFocus.emit();
+    this.handleInputFocus = (e) => {
+      this.focusEventEmitter.emit(undefined, e);
     };
-    this.handleInputBlur = () => {
-      this.vegaBlur.emit();
+    this.handleInputBlur = (e) => {
+      this.blurEventEmitter.emit(undefined, e);
     };
     this.onClickClearIcon = () => {
       this.value = '';
@@ -193,19 +195,14 @@ export class VegaInput {
    *    when the value changes, which needs to be updated manually.
    */
   watchValue(value) {
-    this.vegaChange.emit(value);
+    this.changeEventEmitter.emit(value);
     if (this.inputRef.value !== this.value) {
       this.inputRef.value = this.value;
     }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-valid-with-form-validation-e2e}
-   * @see{module:vega-input-form-validation-change-isValid-prop}
-   */
-  /* istanbul ignore next */
-  watchFormValidation() {
-    void this.valid(true);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -235,15 +232,6 @@ export class VegaInput {
   handleValueInput() {
     this.value = this.inputRef.value;
   }
-  /* Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582 */
-  /**
-   * Invoke this method to validate the current input value.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showErrorText = true) {
-    return methodPlaceholder(showErrorText);
-  }
   /**
    * Invoke this method to focus the current input.
    */
@@ -257,9 +245,7 @@ export class VegaInput {
     this.inputRef.blur();
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: {
-        'v-inline-block v-w-full': FeatureFlag.isEnabled('VEGA_FORM_FIELD.CHANGE_BLOCK_TO_INLINE_BLOCK'),
-      } }, this.groupDom()), this.host);
+    return sanitizeVegaComponent(h(Host, { class: "vega-input-inline-block" }, this.groupDom()), this.host);
   }
   /**
    * The below method is e2e-test covered in
@@ -303,13 +289,17 @@ export class VegaInput {
   }
   prefixDom() {
     if (this.prefixIcon) {
-      return (h("div", { class: "vega-input-prefix" },
+      return (h("div", { class: "vega-input-prefix", part: "prefix-icon-container" },
         h("vega-icon", { icon: this.prefixIcon, size: "size-16" })));
     }
   }
   containerDom() {
     return (h("div", { class: "vega-input-input" },
-      h("input", { name: this.name, type: this.type === 'number' ? 'text' : this.type, autoComplete: this.autocomplete, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, onBlur: this.handleInputBlur, onFocus: this.handleInputFocus })));
+      h("input", { part: "input", name: this.name, type: this.type === 'number' ? 'text' : this.type, autoComplete: this.autocomplete, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onBlur: (e) => this.handleInputBlur(e), 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onFocus: (e) => this.handleInputFocus(e) })));
   }
   groupDom() {
     let containerClass = 'vega-input-container';
@@ -318,41 +308,36 @@ export class VegaInput {
     }
     containerClass += this.size === 'small' ? ' vega-input-size-small' : ' vega-input-size-default';
     containerClass += this.disabled ? ' vega-input-disabled' : '';
-    return (h("div", { class: "vega-input" },
+    return (h("div", { class: "vega-input", part: "container-wrapper" },
       this.renderLabelDom(),
-      h("div", { class: containerClass, onClick: this.focusInput, "aria-label": "input container", role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: containerClass, onClick: this.focusInput, "aria-label": "input container", role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
         this.prefixDom(),
         this.containerDom(),
         this.showClearIcon && this.renderClearIcon()),
       this.renderHintDom()));
   }
   renderLabelDom() {
-    if (FeatureFlag.isEnabled('VEGA_FIELD_LABEL.SHOW_LABEL')) {
-      return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
-    }
-    else {
-      const labelClass = this.disabled ? 'vega-label-disabled' : null;
-      return this.label ? (h("div", { class: "vega-label" },
-        h("label", { class: labelClass },
-          this.label,
-          this.renderRequireDom()))) : null;
-    }
-  }
-  renderRequireDom() {
-    return this.required ? h("span", { class: "vega-require" }, "*") : null;
+    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
   }
   renderClearIcon() {
     return (h("div", { class: {
         'vega-input-clear-icon': true,
-        'v-invisible': !this.isClearIconVisible(),
+        'invisible': !this.isClearIconVisible(),
       }, tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-icon", { icon: "close", class: "v-min-w-min vega-flex-shrink-0" })));
+      h("vega-icon", { icon: "close" })));
   }
   renderHintDom() {
     return this.hint !== '' ? (h("div", { class: "vega-hint" },
       h("label", null, this.hint))) : null;
   }
   static get is() { return "vega-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input.css"]
+  }; }
   static get properties() { return {
     "label": {
       "type": "string",
@@ -441,7 +426,7 @@ export class VegaInput {
         "text": "Specifies an icon or symbol that appears before the input field,\n   providing visual context or enhancing the aesthetic appearance\n   of the input."
       },
       "attribute": "prefix-icon",
-      "reflect": false
+      "reflect": true
     },
     "email": {
       "type": "boolean",
@@ -608,27 +593,6 @@ export class VegaInput {
       "reflect": true,
       "defaultValue": "true"
     },
-    "formValidation": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }],
-        "text": "Controls the behavior of field validation when its value is updated."
-      },
-      "attribute": "form-validation",
-      "reflect": false,
-      "defaultValue": "0"
-    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,
@@ -758,21 +722,21 @@ export class VegaInput {
         "references": {}
       }
     }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
+      "method": "change",
+      "name": "change",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "deprecated",
-            "text": "vegaValidate is only used to listen on the vega-form component."
+            "name": "eventSemantics",
+            "text": "namespace:native"
           }],
-        "text": "An event emitter notifying the change in the validation result."
+        "text": "An event emitter notifying a value change."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       }
     }, {
@@ -790,6 +754,24 @@ export class VegaInput {
         "resolved": "undefined",
         "references": {}
       }
+    }, {
+      "method": "blur",
+      "name": "blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the blur of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
     }, {
       "method": "vegaFocus",
       "name": "vegaFocus",
@@ -805,30 +787,26 @@ export class VegaInput {
         "resolved": "undefined",
         "references": {}
       }
-    }]; }
-  static get methods() { return {
-    "valid": {
-      "complexType": {
-        "signature": "(showErrorText?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
+    }, {
+      "method": "focus",
+      "name": "focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
-        "text": "Invoke this method to validate the current input value.",
         "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the focus of the inner input element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
       }
-    },
+    }]; }
+  static get methods() { return {
     "doFocus": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -866,9 +844,6 @@ export class VegaInput {
   static get watchers() { return [{
       "propName": "value",
       "methodName": "watchValue"
-    }, {
-      "propName": "formValidation",
-      "methodName": "watchFormValidation"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"
@@ -884,9 +859,21 @@ export class VegaInput {
       "passive": false
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInput.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "focusEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "blurEventEmitter", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaInput.prototype, "watchMaskChange", null);

package/dist/collection/components/vega-input-credit-card/assets/icons.js

@@ -0,0 +1,22 @@
+export 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,
+  },
+};

package/dist/collection/components/vega-input-credit-card/test/share.js

@@ -0,0 +1,21 @@
+/**
+ * The function `typeInputCreditCard` is used to enter a credit card number into an input field on a
+ * web page.
+ *
+ * @param {E2EPage} page - The `page` parameter is an instance of the E2EPage class. It represents a
+ * browser page and provides methods to interact with the page's DOM and perform actions like clicking,
+ * typing, etc.
+ * @param {string} value - The value parameter is the credit card number that you want to input into
+ * the input field.
+ */
+export const typeInputCreditCard = async (page, value) => {
+  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value);
+};
+/**
+ * The function `clickCreditCardInput` clicks on the credit card input field on a web page.
+ *
+ * @param {E2EPage} page - The parameter "page" is of type E2EPage. It is likely an object representing a web page in an end-to-end testing framework such as Puppeteer or Playwright.
+ */
+export const clickCreditCardInput = async (page) => {
+  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['click']();
+};

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.css

@@ -0,0 +1,7 @@
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host {
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+  line-height: normal;
+}