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

package/dist/collection/components/vega-checkbox/slimmers/controllers/vega-checkbox-show-error-controller.js

@@ -6,40 +6,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
 import ChangeManager from '../../../../helpers/change-manager/changeManager';
-import { Observer } from '../../../../helpers/change-manager/observer/observer';
-import { FIELD_ERROR_STATE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { VegaInternalFieldErrorStateChange } from '../../../../helpers/event-manager/eventID/vegaInternalEventId';
 import { findParent } from '../../../../utils/ui';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory';
 /** The checkbox show error controller slimmer */
 export class VegaCheckboxShowErrorController extends VegaSlimmer {
   /**
    * Component lifecycle - [connectedCallback]{@link VegaCheckbox.connectedCallback}
    */
   connectedCallback() {
-    this.initFieldErrorObserver();
+    this.checkboxGroup = findParent(this.host, 'vega-checkbox-group');
+    this.fieldErrorObserver = new Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.checkboxGroup || this.host, VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
   }
   /**
    * Component lifecycle - [disconnectedCallback]{@link VegaCheckbox.disconnectedCallback}
    */
   disconnectedCallback() {
-    ChangeManager.unregister(FIELD_ERROR_STATE_CHANGE, this.fieldErrorObserver);
-  }
-  /**
-   * The function initializes an field error observer for a checkbox or checkbox group component.
-   */
-  initFieldErrorObserver() {
-    this.fieldErrorObserver = new Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
-    ChangeManager.register(FIELD_ERROR_STATE_CHANGE, this.fieldErrorObserver);
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.checkboxGroup || this.host, VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
   }
   /**
-   * The function checks whether the current host is a checkbox or checkbox group.
+   * The function `canAcceptFieldErrorObserver` always returns `true`.
    *
-   * @param {FieldErrorPayload} payload - The payload parameter is of type FieldErrorPayload, which is an object containing information about field.
    * @returns {boolean} a boolean value, which indicates the current host is a checkbox or checkbox group.
    */
-  canAcceptFieldErrorObserver(payload) {
-    return ((payload.host.tagName === 'VEGA-CHECKBOX-GROUP' &&
-      findParent(this.host, 'vega-checkbox-group') === payload.host) ||
-      payload.host === this.host);
+  canAcceptFieldErrorObserver() {
+    return true;
   }
   /**
    * The function listens to the showError property of the returned object.

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

@@ -1,4 +1,4 @@
-/* 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 */ /* 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: block;
   text-align: left;

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

@@ -4,14 +4,14 @@ 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 { 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 { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+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';
@@ -19,6 +19,7 @@ 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: [
         {
@@ -66,14 +67,6 @@ 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.
      */
@@ -110,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 }
@@ -321,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,
@@ -394,49 +345,7 @@ export class VegaCheckboxGroup {
         "resolved": "string[]",
         "references": {}
       }
-    }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
-      "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\n   validation result of the checkbox group."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "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",
@@ -447,11 +356,11 @@ 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);

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

@@ -1,4 +1,4 @@
-/* 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 */ /* 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;

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

@@ -12,7 +12,7 @@ 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';
@@ -121,19 +121,6 @@ export class VegaCheckbox {
       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-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.
    *
@@ -362,24 +349,6 @@ export class VegaCheckbox {
     "showError": {}
   }; }
   static get events() { return [{
-      "method": "vegaValidate",
-      "name": "vegaValidate",
-      "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."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
       "method": "vegaChange",
       "name": "vegaChange",
       "bubbles": true,
@@ -414,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>",

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

@@ -2002,7 +2002,7 @@
   height: 2px;
 }
 
-/* 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 */ /* 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;
   max-width: 100%;

package/dist/collection/components/vega-color-picker/vega-color-picker.css

@@ -1,4 +1,4 @@
-/* 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 */ /* 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;
   text-align: left;

package/dist/collection/components/vega-color-picker/vega-color-picker.js

@@ -4,7 +4,7 @@ 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, Watch, Method, Event } from '@stencil/core';
+import { Component, Host, h, Element, Prop, Watch, Event } from '@stencil/core';
 import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
@@ -25,12 +25,11 @@ export class VegaColorPicker {
           ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
         },
       ],
-      inputContainerSelector: '.color-picker-container',
-      touchableAreaSelector: '.color-picker-container-item',
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
       inputContainerGetter: () => this.colorPickerContainerRef,
+      touchableAreaGetter: () => [this.colorPickerTouchableAreaRef],
     });
     this.changeEventEmitter = createEventEmitSlimmer(VegaColorPicker, VegaChange);
     /**
@@ -90,7 +89,7 @@ export class VegaColorPicker {
     ];
     this.renderColorPickerContainer = () => {
       return (h("div", { class: "color-picker-container", ref: (e) => (this.colorPickerContainerRef = e) },
-        h("vega-flex", { direction: "row", gap: "size-8" }, this.colors.map((color) => (h("div", { id: color, class: "color-picker-container-items", style: {
+        h("vega-flex", { direction: "row", gap: "size-8" }, this.colors.map((color) => (h("div", { id: color, class: "color-picker-container-items", ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
             backgroundColor: color,
           }, onClick: this.updateValueProp, role: 'button', tabIndex: 0, "aria-label": "color", onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.value === color ? (h("vega-icon", { icon: "checkmark", size: "size-16", class: {
             'v-text-black': this.isDarkColorCheckmark(this.value),
@@ -120,14 +119,6 @@ export class VegaColorPicker {
   connectedCallback() {
     this.resetValueIfInvalid();
   }
-  /**
-   * Invoke this method to validate the current value of the color picker.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showErrorText = true) {
-    return methodPlaceholder(showErrorText);
-  }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
         disabled: this.disabled,
@@ -369,49 +360,7 @@ export class VegaColorPicker {
         "resolved": "string",
         "references": {}
       }
-    }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
-      "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 color picker."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "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 value of the color picker.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "value",

package/dist/collection/components/vega-combo-box/vega-combo-box.css

@@ -1,4 +1,4 @@
-/* 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 */ /* 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%;

package/dist/collection/components/vega-combo-box/vega-combo-box.js

@@ -194,15 +194,6 @@ export class VegaComboBox {
       await this.dropdownRef.show();
     }
   }
-  /* Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582 */
-  /**
-   * Invoke this method to validate the current value of the combo box.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showError = true) {
-    return methodPlaceholder(showError);
-  }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-combo-box-disabled': this.disabled,
@@ -220,13 +211,13 @@ export class VegaComboBox {
   renderDropdown() {
     return (h("vega-dropdown", Object.assign({ trigger: this.disabled ? 'none' : 'click', source: this.source, selectType: "multiple", selectedSourceKey: this.value, matchTargetWidth: true }, this.vegaDropdownProps, { ref: (ref) => {
         this.dropdownRef = ref;
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaCreate, async (payload) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaCreate, async (payload) => {
           await this.onDropdownCreate(payload.detail);
         });
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaDropdownHide, async () => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, async () => {
           await this.onDropdownHide();
         });
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaDropdownClick, async () => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, async () => {
           await this.onItemClick();
         });
       } }), this.renderContainer()));
@@ -251,7 +242,7 @@ export class VegaComboBox {
     return (h("vega-chip", { 
       //TODO: the key property test will add in https://gethired.atlassian.net/browse/VD-883
       key: item.key, text: item.label, variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
-        DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClose, async () => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, async () => {
           await this.onChipClose(item.key);
         });
       } }));
@@ -585,31 +576,13 @@ export class VegaComboBox {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying changes in the items of the combo box value,\n   whether triggered programmatically or through user interaction."
+        "text": "An event emitter notifying changes in the items of the combo box value,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
         "original": "string[]",
         "resolved": "string[]",
         "references": {}
       }
-    }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
-      "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 combo box."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
     }, {
       "method": "vegaCreate",
       "name": "vegaCreate",
@@ -636,7 +609,7 @@ export class VegaComboBox {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying when the user has chosen to add a new value\n   to the source and value of the combo box.\n\nThe event's `detail` property contains the new value.\n\nThe combo box _does not_ automatically add the new value to its `source` and `value`."
+        "text": "An event emitter notifying when the user has chosen to add a new value\n   to the source and value of the combo box.\n\nThe event's `detail` property contains the new value.\n\nThe combo box _does not_ automatically add the new value to its `source` and `value`."
       },
       "complexType": {
         "original": "string",
@@ -669,7 +642,7 @@ export class VegaComboBox {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying the user's search action in the combo box,\n   but only if the `useDefaultFilter` property is set to `false`."
+        "text": "An event emitter notifying the user's search action in the combo box,\n   but only if the `useDefaultFilter` property is set to `false`."
       },
       "complexType": {
         "original": "string",
@@ -709,28 +682,6 @@ export class VegaComboBox {
         "text": "Invoke this method to open the dropdown menu associated with the combo box.",
         "tags": []
       }
-    },
-    "valid": {
-      "complexType": {
-        "signature": "(showError?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Invoke this method to validate the current value of the combo box.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/vega-counter-badge/vega-counter-badge.css

@@ -1,4 +1,4 @@
-/* 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 */ /* 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: block;
   position: relative;

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -240,10 +240,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     })
       .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
       .on('show', () => {
-      if (!this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.getCalendarContainerRef().classList.add('vega-force-hidden');
-        this.vegaDatePickerElementAppenderController.show();
-      }
+      this.vegaDatePickerElementAppenderController.show();
     })
       .on('mobilefriendly.show', 
     /* istanbul ignore next */ () => {
@@ -256,12 +253,14 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     })
       .on('hide', () => {
       this.vegaDatePickerValueController.syncUpValueWithCalendar();
+      /* istanbul ignore else */
       if (!this.vegaDatePickerMobileController.getIsMobileDevice()) {
         this.vegaDatePickerElementAppenderController.hide();
       }
-      /* istanbul ignore next */
-      this.vegaDatePickerMobileController.getIsMobileDevice() &&
+      else {
+        this.getCalendarContainerRef().classList.add('vega-force-hidden');
         this.vegaDatePickerZIndexController.removeZIndex();
+      }
     });
   }
 }

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-range-input-renderer.js

@@ -15,7 +15,7 @@ export class VegaDatePickerRangeInputRenderer extends VegaSlimmer {
       return (h(Fragment, null,
         h("div", { class: "date-picker-input" },
           this.vegaDatePickerRenderer.renderInputPrefix(),
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, onBlur: this.vegaDatePickerRenderer.handleInputBlur, disabled: this.disabled })),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled })),
         h("span", { class: {
             'range-input-divider': true,
           } }),

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-renderer.js

@@ -25,15 +25,10 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
     this.isInputEnabled = () => {
       return !this.readOnly && !this.vegaDatePickerMobileController.getIsMobileDevice();
     };
-    this.handleInputBlur = () => {
-      if (this.autoValidation && this.host.getAttribute('data-vega-form')) {
-        void this.valid(false);
-      }
-    };
     this.renderLabel = () => {
       return (this.label && (h("vega-field-label", { ref: (e) => {
           /* istanbul ignore next */
-          DomNodeSubjectObserverFactory.addObserverToNode(e, VegaClick, () => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, () => {
             this.focusInput();
           });
         }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
@@ -98,9 +93,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerRenderer.prototype, "valid", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-single-input-renderer.js

@@ -14,7 +14,7 @@ export class VegaDatePickerSingleInputRenderer extends VegaSlimmer {
     this.render = () => {
       return (h("div", { class: "date-picker-input" },
         this.vegaDatePickerRenderer.renderInputPrefix(),
-        h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, onBlur: this.vegaDatePickerRenderer.handleInputBlur, disabled: this.disabled, 
+        h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, 
           // eslint-disable-next-line react/jsx-no-bind
           onClick: () => {
             this.vegaDatePickerCalendarRenderer.getDatePicker().show();