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

package/dist/collection/components/vega-checkbox/{vega-checkbox-group.js → vega-checkbox-group/vega-checkbox-group.js}

@@ -4,18 +4,22 @@ 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, h, Element, Prop, Event, Method, Watch, Host } from '@stencil/core';
-import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
-import { sanitizeVegaComponent } from '../../utils/component';
-import { deleteItemsFromArray } from '../../utils/array';
-import { ComponentLoadRequired } from '../../decorators/method-decorators/componentLoadRequired';
-import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
-import { CHECKBOX_GROUP_DISABLED_CHANGE } from '../../helpers/observer/subject';
-import ChangeManager from '../../helpers/observer/changeManager';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { Component, h, Element, Prop, Event, Watch, Host } from '@stencil/core';
+import { RequiredFieldRule } from '../../../helpers/validator/rules/requiredFieldRule';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { deleteItemsFromArray } from '../../../utils/array';
+import { ComponentLoadRequired } from '../../../decorators/method-decorators/componentLoadRequired';
+import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../helpers/change-manager/changeManager';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/formFieldControllerSlimmer';
+import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager/slimmers/childNodesNotifyObserverSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaChange } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/eventEmitSlimmer';
 export class VegaCheckboxGroup {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -23,11 +27,14 @@ export class VegaCheckboxGroup {
           ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
         },
       ],
-      inputContainerSelector: '.vega-checkbox-group-container',
-      touchableAreaSelector: 'input',
       defaultValue: [],
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => this.touchableAreaGetter(),
     });
+    this.checkboxValueChangeObserver = new ChildNodesNotifyObserverSlimmer(CHECKBOX_VALUE_CHANGE, (input) => this.childCheckboxValueChange(input));
+    this.checkboxEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaFlexElement);
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCheckboxGroup, VegaChange);
     /**
      * Specifies the label or title for the checkbox group.
      *    It provides descriptive text that helps identify
@@ -60,23 +67,35 @@ export class VegaCheckboxGroup {
      *    value for the checkbox group.
      */
     this.hint = '';
-    /* 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;
     /** Specifies the validation status of the
      *    checkbox group component.
      */
     /* eslint-disable @stencil/strict-mutable */
     this.isValid = null;
+    /**
+     * Update checkbox group value when child checkbox is changed.
+     *
+     * @param {NotifyObserverPayload<boolean>} input change payload from child checkbox
+     */
+    this.childCheckboxValueChange = (input) => {
+      this.syncCheckboxItemsValue(input.detail, input.host.identifier);
+    };
+    this.touchableAreaGetter = () => {
+      const inputArray = [];
+      this.vegaCheckboxArray &&
+        this.vegaCheckboxArray.forEach(async (vegaCheckbox) => {
+          inputArray.push(vegaCheckbox.shadowRoot.querySelector('input'));
+        });
+      return inputArray;
+    };
   }
   async watchValue() {
     this.initCheckboxArray();
-    this.vegaChange.emit(this.value);
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   watchVegaFlexProp() {
     this.setVegaFlexProperty();
@@ -84,32 +103,11 @@ export class VegaCheckboxGroup {
   async watchDisabled() {
     this.notifyGroupDisabledChange();
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-checkbox-group-with-form-validation-e2e}
-   */
-  /* istanbul ignore next */
-  watchFormValidation() {
-    void this.valid();
-  }
   componentDidLoad() {
     this.setVegaFlexProperty();
     this.initCheckboxArray();
     this.notifyGroupDisabledChange();
   }
-  /**
-   * Invoke this method to validate the current selected values.
-   *
-   * @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);
-  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-checkbox-group-dark-change-background-color }
@@ -118,13 +116,11 @@ export class VegaCheckboxGroup {
   render() {
     return sanitizeVegaComponent(h(Host, null,
       this.renderLabelDom(),
-      h("div", { class: "vega-checkbox-group-container" },
+      h("div", { class: "vega-checkbox-group-container", ref: (e) => (this.inputContainerRef = e) },
         h("vega-flex", { ref: (el) => {
             this.vegaFlexElement = el;
-            this.vegaFlexElement.addEventListener('vegaChange', this.onChildVegaCheckboxChange.bind(this));
           } },
           h("slot", null))),
-      h("div", { class: "vega-error vega-hidden" }),
       this.renderHintDom()), this.host);
   }
   renderLabelDom() {
@@ -143,34 +139,17 @@ export class VegaCheckboxGroup {
   setVegaFlexProperty() {
     if (this.vegaFlexProp) {
       Object.assign(this.vegaFlexElement, {
-        gap: FeatureFlag.isEnabled('VEGA_CHECKBOX_RADIO_GROUP.FLEX_DIRECTION_COL_DEFAULT')
-          ? 'size-16'
-          : 'size-24',
-        direction: FeatureFlag.isEnabled('VEGA_CHECKBOX_RADIO_GROUP.FLEX_DIRECTION_COL_DEFAULT')
-          ? 'col'
-          : 'row',
-        breakpoint: 'None',
-        useNativeFlex: true,
+        gap: 'size-16',
+        direction: 'col',
       }, this.vegaFlexProp);
     }
   }
   /**
-   * Update checkbox group value when child checkbox is changed.
-   * Note: we will stop the child checkbox event propagation
-   *       to avoid the event listener attached to the checkbox group to be triggered twice.
-   * @param event change event object emitted from child checkbox
-   * @private
-   */
-  onChildVegaCheckboxChange(event) {
-    if (event.target !== this.host) {
-      this.syncCheckboxItemsValue(event.detail, event.target.identifier);
-      event.stopPropagation();
-    }
-  }
-  /*
    * 1. If the checkbox is checked, the value of checkbox group doesn't contain the value of the selected checkbox and needs to be added
    * 2. If the checkbox isn't checked, the value of checkbox group contains the value of the selected checkbox and needs to be deleted
+   * @see{module:vega-checkbox-group-with-listen-vega-change-event-e2e}
    */
+  /* istanbul ignore next */
   syncCheckboxItemsValue(checked, checkboxValue) {
     if (checked && !this.value.includes(checkboxValue)) {
       this.value = [...this.value, checkboxValue];
@@ -197,6 +176,13 @@ export class VegaCheckboxGroup {
     ChangeManager.notify(CHECKBOX_GROUP_DISABLED_CHANGE, { host: this.host });
   }
   static get is() { return "vega-checkbox-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-checkbox-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-checkbox-group.css"]
+  }; }
   static get properties() { return {
     "label": {
       "type": "string",
@@ -237,11 +223,11 @@ export class VegaCheckboxGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItem?: ResponsiveType<FlexAlignItemType>; breakpoint?: BreakpointsTokenType | \"None\"; gap?: ResponsiveType<\"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\">; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; useNativeFlex?: boolean; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<\"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\">; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",
-            "path": "./types"
+            "path": "../types"
           }
         }
       },
@@ -307,27 +293,6 @@ export class VegaCheckboxGroup {
       "reflect": false,
       "defaultValue": "''"
     },
-    "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\n   its value is updated."
-      },
-      "attribute": "form-validation",
-      "reflect": false,
-      "defaultValue": "0"
-    },
     "isValid": {
       "type": "boolean",
       "mutable": true,
@@ -363,48 +328,24 @@ export class VegaCheckboxGroup {
         "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 changes in the\n   validation result of the checkbox group."
+        "text": "An event emitter notifying changes in the value\n  of any nested checkbox within the checkbox group,\n  whether triggered programmatically or through\n  user interaction."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       }
     }]; }
-  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 values.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "value",
@@ -415,14 +356,23 @@ export class VegaCheckboxGroup {
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
-    }, {
-      "propName": "formValidation",
-      "methodName": "watchFormValidation"
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCheckboxGroup.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "checkboxValueChangeObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "checkboxEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "changeEventEmitter", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaCheckboxGroup.prototype, "watchVegaFlexProp", null);

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

@@ -0,0 +1,257 @@
+/* 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;
+  vertical-align: middle;
+}
+
+.vega-checkbox-container {
+  position: relative;
+  display: flex;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.vega-checkbox-container > input[type=checkbox] {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  opacity: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.vega-checkbox-container > .vega-checkbox-icon {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(var(--v-border-color-action-active, 29, 65, 195, 1));
+  position: relative;
+  left: 0px;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+  border-radius: 4px;
+  min-width: 24px;
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
+
+.vega-checkbox-container > .vega-checkbox-icon.vega-checkbox-small {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  border-radius: 2px;
+}
+
+.vega-checkbox-container > .vega-checkbox-icon:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
+
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:hover {
+  background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
+}
+
+.vega-checkbox-container > input[type=checkbox]:focus-visible + .vega-checkbox-icon {
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  outline: none;
+}
+
+.vega-checkbox-container > .vega-checkbox-icon:active {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-action-active, 29, 65, 195, 1));
+}
+
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:active {
+  background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
+}
+
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vega-checkbox-container:hover {
+  cursor: pointer;
+}
+
+.vega-checkbox-container .vega-require {
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.vega-checkbox-container.error > .vega-checkbox-icon {
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon {
+  background-color: rgba(var(--v-bg-danger, 230, 50, 87, 1));
+}
+
+.vega-checkbox-container.error > .vega-checkbox-icon:hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:hover {
+  background-color: rgba(var(--v-bg-danger-hover, 255, 87, 114, 1));
+}
+
+.vega-checkbox-container.error > input[type=checkbox]:focus-visible + .vega-checkbox-icon {
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
+  outline: none;
+}
+
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:active {
+  background-color: rgba(var(--v-bg-danger-active, 189, 41, 71, 1));
+}
+
+.vega-checkbox-container.error > .vega-checkbox-icon:active {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));
+}
+
+:host(.disabled) .vega-checkbox-container > .vega-checkbox-icon {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+
+:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+
+:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon > vega-icon {
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
+
+.vega-checkbox-container > .vega-checkbox-label-container {
+  display: inline-block;
+  margin-left: 12px;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-checkbox-container > .vega-checkbox-label-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .vega-checkbox-container > .vega-checkbox-label-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .vega-checkbox-container > .vega-checkbox-label-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-checkbox-container > .vega-checkbox-label-container.vega-checkbox-label-small {
+  margin-left: 8px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-checkbox-container > .vega-checkbox-label-container.vega-checkbox-label-small {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .vega-checkbox-container > .vega-checkbox-label-container.vega-checkbox-label-small {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .vega-checkbox-container > .vega-checkbox-label-container.vega-checkbox-label-small {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+
+:host(.disabled) .vega-checkbox-container > .vega-checkbox-label-container {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
+.vega-error {
+  display: block;
+  margin-top: 12px;
+  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));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .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) {
+  .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) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-checkbox-label-container.vega-hidden {
+  display: none;
+}
+
+.vega-hidden {
+  display: none;
+}