@heartlandone/vega 1.51.0 → 2.0.0-preview-2

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

@@ -8,15 +8,19 @@ import { Component, Host, h, Element, Prop, Event, Watch, Method, State } from '
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { CheckBoxRequiredRule } from '../../helpers/validator/rules/checkBoxRequiredRule';
-import ChangeManager from '../../helpers/observer/changeManager';
-import { CHECKBOX_GROUP_DISABLED_CHANGE } from '../../helpers/observer/subject';
-import { Observer } from '../../helpers/observer/observer';
+import ChangeManager from '../../helpers/change-manager/changeManager';
+import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { Observer } from '../../helpers/change-manager/observer/observer';
 import { findParent } from '../../utils/ui';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller';
 export class VegaCheckbox {
   constructor() {
     this.globalSlimmers = {};
+    this.vegaCheckboxShowErrorController = new VegaCheckboxShowErrorController();
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -24,15 +28,20 @@ export class VegaCheckbox {
           ruleFactory: (isRequired) => (isRequired ? new CheckBoxRequiredRule() : null),
         },
       ],
-      inputContainerSelector: '.vega-checkbox-container',
-      touchableAreaSelector: 'input',
       defaultValue: (target) => (target.identifier === '' ? false : ''),
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => [this.inputRef],
     });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaChange);
     /**
      * Indicates whether the parent checkbox group is disabled.
      */
     this.groupDisabled = false;
+    /**
+     * Indicates whether the parent checkbox group show error message.
+     */
+    this.showError = false;
     /**
      * Sets a unique identifier for the checkbox.
      *
@@ -85,6 +94,7 @@ export class VegaCheckbox {
     /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
       this.checked = e.currentTarget.checked;
+      e.stopPropagation();
     };
     this.onSelectedIconClick = (e) => {
       e.stopPropagation();
@@ -92,7 +102,12 @@ export class VegaCheckbox {
   }
   watchCheckedChange() {
     this.initValue();
-    this.vegaChange.emit(this.value);
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(CHECKBOX_VALUE_CHANGE, { host: this.host, detail: this.value });
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   disconnectedCallback() {
     this.unRegisterGroupDisabledObserver();
@@ -102,23 +117,10 @@ export class VegaCheckbox {
     this.initAndRegisterGroupDisabledObserver();
   }
   componentDidRender() {
-    if (this.labelElement.querySelector('.vega-checkbox-label').innerHTML.trim() === '') {
-      this.labelElement.classList.add('v-hidden');
+    if (this.host.innerHTML.trim() === '') {
+      this.labelElement.classList.add('vega-hidden');
     }
   }
-  /**
-   * Invoke this method to validate the current selected value.
-   *
-   * @deprecated This property will be removed soon
-   */
-  /* The below method is e2e-test covered in
-   * @see{module:vega-checkbox-group-with-form-validation-e2e}
-   * Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582
-   */
-  /* istanbul ignore next */
-  async valid(showErrorText = true) {
-    return methodPlaceholder(showErrorText);
-  }
   /**
    * Invoke this method to set the value of the checkbox.
    *
@@ -128,17 +130,26 @@ export class VegaCheckbox {
     this.checked = this.identifier ? value === this.identifier : value === true;
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: this.host.parentElement.nodeName == 'VEGA-FLEX' ? 'vega-flex-shrink-0 v-min-w-min' : '' },
-      h("label", { class: "vega-checkbox-container" },
-        h("input", { type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+    return sanitizeVegaComponent(h(Host, { class: {
+        'vega-flex-shrink-0 v-min-w-min': this.host.parentElement.nodeName == 'VEGA-CHECKBOX-GROUP',
+        'checked': this.checked,
+        'disabled': this.isDisabled(),
+      } },
+      h("label", { class: {
+          'vega-checkbox-container': true,
+          'error': this.showError,
+        }, ref: (e) => (this.inputContainerRef = e) },
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
         h("span", { class: {
             'vega-checkbox-icon': true,
             'vega-checkbox-small': this.size === 'small',
           }, onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()),
-        h("div", { class: { 'vega-checkbox-label-small': this.size === 'small' }, ref: (el) => (this.labelElement = el) },
+        h("div", { class: {
+            'vega-checkbox-label-container': true,
+            'vega-checkbox-label-small': this.size === 'small',
+          }, ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
-          this.renderRequireDom())),
-      h("div", { class: "vega-error vega-hidden" })), this.host);
+          this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
     return this.checked ? (h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
@@ -198,6 +209,13 @@ export class VegaCheckbox {
     }
   }
   static get is() { return "vega-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-checkbox.css"]
+  }; }
   static get properties() { return {
     "identifier": {
       "type": "string",
@@ -327,34 +345,35 @@ export class VegaCheckbox {
     }
   }; }
   static get states() { return {
-    "groupDisabled": {}
+    "groupDisabled": {},
+    "showError": {}
   }; }
   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 changes in the validation result of the checkbox."
+        "tags": [],
+        "text": "An event emitter notifying changes in the value of the checkbox,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string | boolean",
+        "resolved": "boolean | string",
         "references": {}
       }
     }, {
-      "method": "vegaChange",
-      "name": "vegaChange",
+      "method": "change",
+      "name": "change",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
         "text": "An event emitter notifying changes in the value of the checkbox,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
@@ -364,28 +383,6 @@ export class VegaCheckbox {
       }
     }]; }
   static get methods() { return {
-    "valid": {
-      "complexType": {
-        "signature": "(showErrorText?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Invoke this method to validate the current selected value.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
-    },
     "setValue": {
       "complexType": {
         "signature": "(value: string | boolean) => Promise<void>",
@@ -415,6 +412,12 @@ export class VegaCheckbox {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaCheckbox.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "vegaCheckboxShowErrorController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "changeEventEmitter", void 0);