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

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

@@ -4,17 +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, Host, h, Element, Prop, Event, Method, Watch } from '@stencil/core';
-import { sanitizeVegaComponent } from '../../utils/component';
-import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
-import { ComponentLoadRequired } from '../../decorators/method-decorators/componentLoadRequired';
-import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
-import ChangeManager from '../../helpers/observer/changeManager';
-import { RADIO_GROUP_DISABLED_CHANGE } from '../../helpers/observer/subject';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { RequiredFieldRule } from '../../../helpers/validator/rules/requiredFieldRule';
+import { ComponentLoadRequired } from '../../../decorators/method-decorators/componentLoadRequired';
+import ChangeManager from '../../../helpers/change-manager/changeManager';
+import { FORM_ELEMENT_VALUE_CHANGE, RADIO_GROUP_DISABLED_CHANGE, RADIO_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/formFieldControllerSlimmer';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+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';
+import { VegaRadioGroupKeyboardController } from './slimmers/controllers/vega-radio-group-keyboard-controller';
 export class VegaRadioGroup {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -22,10 +27,15 @@ export class VegaRadioGroup {
           ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
         },
       ],
-      inputContainerSelector: '.vega-radio-container',
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => this.vegaRadioArray.map((vegaRadio) => vegaRadio.shadowRoot.querySelector('input')),
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
     });
+    this.radioValueChangeObserver = new ChildNodesNotifyObserverSlimmer(RADIO_VALUE_CHANGE, () => this.childRadioValueChange());
+    this.radioEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaFlexElement);
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRadioGroup, VegaChange);
+    this.keyboardController = new VegaRadioGroupKeyboardController();
     /**
      * Specifies the label or title of the radio group.
      */
@@ -49,13 +59,6 @@ export class VegaRadioGroup {
      *    in selecting the appropriate value for the radio 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;
     /**
      * Sets the validation status for the radio group.
      */
@@ -65,10 +68,20 @@ export class VegaRadioGroup {
      * Determines whether the radio group is disabled.
      */
     this.disabled = false;
+    /**
+     * Update radio group value when child radio is changed.
+     */
+    this.childRadioValueChange = () => {
+      this.syncRadioItemsValue();
+    };
   }
   async watchValue() {
     this.initVegaRadioArray();
-    this.vegaChange.emit(this.value);
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   watchName() {
     this.initVegaRadioArray();
@@ -76,14 +89,6 @@ export class VegaRadioGroup {
   watchVegaFlexProp() {
     this.setVegaFlexProperty();
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-radio-group-with-form-validation-e2e}
-   */
-  /* istanbul ignore next */
-  watchFormValidation() {
-    void this.valid(true);
-  }
   async watchDisabled() {
     this.notifyGroupDisabledChange();
   }
@@ -98,29 +103,14 @@ export class VegaRadioGroup {
       this.notifyGroupDisabledChange();
     }
   }
-  /**
-   * Invoke this method to validate the current input value.
-   *
-   * @deprecated This property will be removed soon
-   */
-  /* The below method is e2e-test covered in
-   * @see{module:vega-radio-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);
-  }
   render() {
-    return sanitizeVegaComponent(h(Host, null,
+    return sanitizeVegaComponent(h(Host, { role: "radiogroup" },
       this.renderLabelDom(),
-      h("div", { class: "vega-radio-container" },
+      h("div", { class: "vega-radio-container", ref: (e) => (this.inputContainerRef = e) },
         h("vega-flex", { ref: (el) => {
             this.vegaFlexElement = el;
-            this.vegaFlexElement.addEventListener('vegaChange', this.onChildVegaRadioChange.bind(this));
           } },
           h("slot", null))),
-      h("div", { class: "vega-error vega-hidden" }),
       this.renderHintDom()), this.host);
   }
   renderLabelDom() {
@@ -139,31 +129,11 @@ export class VegaRadioGroup {
   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 radio group value when child radio is changed.
-   *
-   * Note: we will stop the child radio event propagation
-   *       to avoid the event listener attached to the radio group to be triggered twice.
-   * @param event change event object emitted from child radio
-   * @private
-   */
-  onChildVegaRadioChange(event) {
-    if (event.target !== this.host) {
-      this.syncRadioItemsValue();
-      event.stopPropagation();
-    }
-  }
   initVegaRadioArray() {
     this.vegaRadioArray.forEach((vegaRadio) => {
       vegaRadio.checked = vegaRadio.value === this.value;
@@ -189,6 +159,13 @@ export class VegaRadioGroup {
     ChangeManager.notify(RADIO_GROUP_DISABLED_CHANGE, { host: this.host });
   }
   static get is() { return "vega-radio-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-radio-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-radio-group.css"]
+  }; }
   static get properties() { return {
     "label": {
       "type": "string",
@@ -248,11 +225,11 @@ export class VegaRadioGroup {
       "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"
           }
         }
       },
@@ -300,27 +277,6 @@ export class VegaRadioGroup {
       "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 its value is updated."
-      },
-      "attribute": "form-validation",
-      "reflect": false,
-      "defaultValue": "0"
-    },
     "isValid": {
       "type": "boolean",
       "mutable": true,
@@ -374,48 +330,24 @@ export class VegaRadioGroup {
         "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\n   validation result."
+        "text": "An event emitter notifying the change of the\n   checked radio button in the radio group."
       },
       "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 input value.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "value",
@@ -426,17 +358,29 @@ export class VegaRadioGroup {
     }, {
       "propName": "vegaFlexProp",
       "methodName": "watchVegaFlexProp"
-    }, {
-      "propName": "formValidation",
-      "methodName": "watchFormValidation"
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRadioGroup.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRadioGroup.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRadioGroup.prototype, "radioValueChangeObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRadioGroup.prototype, "radioEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRadioGroup.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRadioGroup.prototype, "keyboardController", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaRadioGroup.prototype, "watchVegaFlexProp", null);

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

@@ -0,0 +1,199 @@
+/* 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;
+  box-sizing: border-box;
+  height: 24px;
+}
+
+.vega-radio-container {
+  position: relative;
+  display: inline-flex;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.vega-radio-container input {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  opacity: 0;
+}
+
+.vega-radio-icon {
+  display: inline-block;
+  box-sizing: border-box;
+  border-style: solid;
+  border-radius: 9999px;
+  position: relative;
+  left: 0px;
+  flex-shrink: 0;
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+}
+.vega-radio-icon:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+
+.vega-radio-container.default .vega-radio-icon {
+  width: 24px;
+  height: 24px;
+  padding: 5px;
+}
+
+.vega-radio-container.small .vega-radio-icon {
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+}
+
+.vega-radio-checked:hover .vega-radio-circle {
+  background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
+}
+
+.vega-radio-container input[type=radio]:focus-visible + .vega-radio-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));
+}
+
+.vega-radio-container:not(.vega-radio-disabled):active .vega-radio-icon {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-action-active, 29, 65, 195, 1));
+}
+
+.vega-radio-checked:active .vega-radio-circle {
+  background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
+}
+
+.vega-radio-checked .vega-radio-circle {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
+
+.vega-radio-disabled .vega-radio-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));
+}
+
+.vega-radio-disabled .vega-radio-circle {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+}
+
+.vega-radio-disabled:hover .vega-radio-circle {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+}
+
+.vega-radio-container .vega-radio-label {
+  display: inline-block;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+}
+
+.vega-radio-container .vega-radio-label.vega-hidden {
+  display: none;
+}
+
+.vega-radio-container.default .vega-radio-label {
+  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-radio-container.default .vega-radio-label {
+    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-radio-container.default .vega-radio-label {
+    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-radio-container.default .vega-radio-label {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-radio-container.small .vega-radio-label {
+  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-radio-container.small .vega-radio-label {
+    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-radio-container.small .vega-radio-label {
+    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-radio-container.small .vega-radio-label {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+
+.vega-radio-disabled .vega-radio-label {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
+label {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.vega-radio-container.error .vega-radio-icon {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+
+.vega-radio-container.error:hover .vega-radio-icon {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+
+.vega-radio-container.error input[type=radio]:focus-visible + .vega-radio-icon {
+  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+}
+
+.vega-radio-container.error:active .vega-radio-icon {
+  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
+}
+
+.vega-radio-checked.error .vega-radio-circle {
+  background-color: rgba(var(--v-bg-danger, 230, 50, 87, 1));
+}
+
+.vega-radio-checked.error:hover .vega-radio-circle {
+  background-color: rgba(var(--v-bg-danger-hover, 255, 87, 114, 1));
+}
+
+.vega-radio-checked.error:active .vega-radio-circle {
+  background-color: rgba(var(--v-bg-danger-active, 189, 41, 71, 1));
+}