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

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

@@ -4,15 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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;
 };
-import { Component, Host, h, Element, Prop, Method, Event, Watch } from '@stencil/core';
+import { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
 import { CARDS_INFO } from '../../constants/cardConfig';
 import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
 import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/validCreditCardNumberRule';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../helpers/change-manager/changeManager';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange, VegaFocus, VegaBlur } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaIconManager } from '../../helpers/icon/iconManager';
+import { Icons } from './assets/icons';
 export class VegaInputCreditCard {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -27,7 +36,13 @@ export class VegaInputCreditCard {
       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.
@@ -93,36 +108,44 @@ export class VegaInputCreditCard {
     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() {
     methodPlaceholder();
   }
   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);
@@ -145,6 +168,13 @@ export class VegaInputCreditCard {
     }
   }
   static get is() { return "vega-input-credit-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input-credit-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input-credit-card.css"]
+  }; }
   static get properties() { return {
     "required": {
       "type": "boolean",
@@ -349,32 +379,32 @@ export class VegaInputCreditCard {
     }
   }; }
   static get events() { return [{
-      "method": "vegaValidate",
-      "name": "vegaValidate",
+      "method": "vegaChange",
+      "name": "vegaChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "vegaValidate is only used to listen on the vega-form component."
-          }],
-        "text": "An event emitter notifying the change in the validation result."
+        "tags": [],
+        "text": "An event emitter notifying a value change."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       }
     }, {
-      "method": "vegaChange",
-      "name": "vegaChange",
+      "method": "change",
+      "name": "change",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "An event emitter notifying a value change."
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "A native change event emitter notifying a value change."
       },
       "complexType": {
         "original": "string",
@@ -396,6 +426,24 @@ export class VegaInputCreditCard {
         "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 event of the credit card element."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
+      }
     }, {
       "method": "vegaFocus",
       "name": "vegaFocus",
@@ -411,28 +459,25 @@ export class VegaInputCreditCard {
         "resolved": "undefined",
         "references": {}
       }
-    }]; }
-  static get methods() { return {
-    "valid": {
-      "complexType": {
-        "signature": "(showError?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
+    }, {
+      "method": "focus",
+      "name": "focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
           }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
+        "text": "An event emitter notifying the focus of the credit card element."
       },
-      "docs": {
-        "text": "Invoke this method to validate the input credit card with the current value.",
-        "tags": []
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
       }
-    }
-  }; }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "validationRules",
@@ -442,6 +487,30 @@ export class VegaInputCreditCard {
       "methodName": "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);

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

@@ -0,0 +1,8 @@
+export const Icons = {
+  'chevron-up': {
+    icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9327 5.10408L23.6136 15.785C24.1288 16.3002 24.1288 17.1353 23.6136 17.6504L22.3679 18.8962C21.8536 19.4104 21.0202 19.4114 20.5047 18.8984L12 10.4335L3.49529 18.8984C2.97983 19.4115 2.14637 19.4105 1.63211 18.8962L0.38635 17.6505C-0.128783 17.1353 -0.128783 16.3002 0.38635 15.7851L11.0673 5.10413C11.5824 4.589 12.4176 4.589 12.9327 5.10408Z" fill="currentColor"></path></svg>`,
+  },
+  'chevron-down': {
+    icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0673 18.8963L0.38635 8.21525C-0.128783 7.70012 -0.128783 6.86495 0.38635 6.34987L1.63211 5.10411C2.14637 4.58986 2.97983 4.58887 3.49529 5.10191L12 13.5668L20.5047 5.10191C21.0202 4.58887 21.8536 4.58986 22.3679 5.10411L23.6136 6.34987C24.1288 6.86501 24.1288 7.70017 23.6136 8.21525L12.9327 18.8963C12.4176 19.4113 11.5824 19.4113 11.0673 18.8963Z" fill="currentColor"></path></svg>`,
+  },
+};

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-dropdown-controller.js

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isArrayOfType, isSelectSourceItemType } from '../../../../types/typeGuard';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, } from '../../../../helpers/event-manager/eventID/vegaEventId';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
   constructor() {
@@ -25,16 +27,6 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
     this.onDropdownHide = () => {
       this.isDropdownShow = false;
     };
-    /**
-     * The `onDropdownSearch` function is a method of the `VegaInputSelectDropdownController` class.
-     * It is called when a search event is triggered in the dropdown select input.
-     *
-     * @param {CustomEvent} e - The vegaSearch event from vega-dropdown.
-     */
-    this.onDropdownSearch = (e) => {
-      e.stopImmediatePropagation();
-      this.vegaSearch.emit(e.detail);
-    };
   }
   /**
    * call the method when component componentWillLoad call
@@ -42,6 +34,25 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
   handleWillLoad() {
     this.convertToDropdownSource();
   }
+  /**
+   * The function `addDropdownObserver` adds event observers to a dropdown element.
+   *
+   * @param {HTMLElement} dropdownRef - The `dropdownRef` parameter is a reference to the HTML element representing the dropdown component.
+   */
+  addDropdownObserver(dropdownRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownShow, () => {
+      this.onDropdownShow();
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownHide, () => {
+      this.onDropdownHide();
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, async (payload) => {
+      this.vegaInputSelectValueController.setValue(await payload.host.getSelection());
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownSearch, (payload) => {
+      this.searchEventEmitter.emit(payload.detail);
+    });
+  }
   /** update the dropdown list by source value */
   convertToDropdownSource() {
     this.dropdownSource = this.source.map((item) => ({
@@ -62,6 +73,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaSearch", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "searchEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "vegaInputSelectValueController", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaInputSelectDropdownController.prototype, "handleWillLoad", null);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-value-controller.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
 import { LogUtility } from '../../../../utils/log';
+import ChangeManager from '../../../../helpers/change-manager/changeManager';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
 /** The `VegaInputSelectValueController` class is a TypeScript React component that handles the value and change events for an input select component. */
 export class VegaInputSelectValueController extends VegaSlimmer {
   constructor() {
@@ -29,7 +31,11 @@ export class VegaInputSelectValueController extends VegaSlimmer {
         });
         if (!isArrayEqual(validValue, oldValue, true)) {
           this.setValue(validValue);
-          this.vegaChange.emit(validValue);
+          this.changeEventEmitter.emit(validValue);
+          ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+            host: this.host,
+            detail: validValue,
+          });
         }
         else if (!isArrayEqual(validValue, newValue, true)) {
           this.setValue(validValue);
@@ -39,7 +45,11 @@ export class VegaInputSelectValueController extends VegaSlimmer {
         if (newValue !== oldValue) {
           const sourceItem = this.source.find((sourceItem) => sourceItem.id === newValue);
           this.setValue(sourceItem ? sourceItem.id : '');
-          this.vegaChange.emit(this.value);
+          this.changeEventEmitter.emit(this.value);
+          ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+            host: this.host,
+            detail: this.value,
+          });
         }
       }
     };
@@ -84,7 +94,10 @@ __decorate([
 ], VegaInputSelectValueController.prototype, "source", void 0);
 __decorate([
   MapToComponentField()
-], VegaInputSelectValueController.prototype, "vegaChange", void 0);
+], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputSelectValueController.prototype, "handleValueChange", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -7,12 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import { VegaIconManager } from '../../../../helpers/icon/iconManager';
+import { Icons } from '../../assets/icons';
 /** The `VegaInputSelectDropdownRenderer` class is a TypeScript React component that renders a dropdown select input with various customization options. */
 export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
@@ -51,9 +53,6 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     this.getVegaDropdownProperties = () => {
       return Object.assign({ searchable: true, caseSensitive: false }, this.vegaDropdownProps);
     };
-    this.dropdownClick = (e) => {
-      this.valueController.setValue(e.detail);
-    };
   }
   show() {
     return this.dropdown.show();
@@ -61,8 +60,17 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   hide() {
     return this.dropdown.hide();
   }
+  getDropdownRef() {
+    return this.dropdown;
+  }
+  getInputSelectContainerRef() {
+    return this.inputSelectContainer;
+  }
   render() {
-    return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.dropdownSource, selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { onVegaClick: this.dropdownClick, onVegaShow: this.dropdownController.onDropdownShow, onVegaHide: this.dropdownController.onDropdownHide, onVegaSearch: this.dropdownController.onDropdownSearch, ref: (e) => (this.dropdown = e) }), this.renderContainer()));
+    return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.dropdownSource, selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { ref: (ref) => {
+        this.dropdown = ref;
+        this.vegaInputSelectDropdownController.addDropdownObserver(ref);
+      } }), this.renderContainer()));
   }
   /*
    * The below method is e2e-test covered in
@@ -73,6 +81,12 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     e.stopImmediatePropagation();
   }
 }
+(() => {
+  VegaIconManager.register({
+    'chevron-up': Icons['chevron-up'],
+    'chevron-down': Icons['chevron-down'],
+  });
+})();
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "value", void 0);
@@ -101,8 +115,5 @@ __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "selectedLabel", void 0);
 __decorate([
-  MapToComponentField({ componentFieldName: 'vegaInputSelectDropdownController' })
-], VegaInputSelectDropdownRenderer.prototype, "dropdownController", void 0);
-__decorate([
-  MapToComponentField({ componentFieldName: 'vegaInputSelectValueController' })
-], VegaInputSelectDropdownRenderer.prototype, "valueController", void 0);
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);