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

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

@@ -6,16 +6,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Prop, Element, Method, Watch, Event, Fragment, } from '@stencil/core';
 import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
-import { sanitizeVegaComponent } from '../../utils/component';
+import { getActiveElement, sanitizeVegaComponent } from '../../utils/component';
 import { isArrayOfType, isDropdownSourceItemType } from '../../types/typeGuard';
 import { deleteItemsFromArray } from '../../utils/array';
 import { findParent } from '../../utils/ui';
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { InjectKeyboardManager } from '../../decorators/property-decorators/injectKeyboardManager';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange, VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaSearch, } from '../../helpers/event-manager/eventID/vegaEventId';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../helpers/change-manager/changeManager';
 export class VegaComboBox {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -24,9 +31,18 @@ export class VegaComboBox {
         },
       ],
       validationRulesName: 'validationRules',
-      inputContainerSelector: 'vega-dropdown',
       defaultValue: [],
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.dropdownRef,
+      touchableAreaGetter: () => [this.searchInputRef],
+    });
+    this.changeEventEmit = createEventEmitSlimmer(VegaComboBox, VegaChange);
+    this.createEventEmit = createEventEmitSlimmer(VegaComboBox, VegaCreate);
+    this.searchEventEmit = createEventEmitSlimmer(VegaComboBox, VegaSearch);
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaCreate, VegaSearch], () => this.dropdownRef, {
+      customPreventHandle: (e) => {
+        e.stopImmediatePropagation();
+      },
     });
     /**
      * Specifies the label or title for the combo box.
@@ -99,16 +115,15 @@ export class VegaComboBox {
      *    by listening for the `vegaSearch` event.
      */
     this.useDefaultFilter = true;
-    this.onItemClick = async (e) => {
-      this.value = e.detail;
+    this.onItemClick = async () => {
+      this.value = (await this.dropdownRef.getSelection());
       await this.clearInput();
     };
     this.onDropdownHide = async () => {
       await this.clearInput();
     };
-    this.onDropdownCreate = async (e) => {
-      e.stopPropagation();
-      this.vegaCreate.emit(e.detail);
+    this.onDropdownCreate = async (searchString) => {
+      this.createEventEmit.emit(searchString);
       await this.clearInput();
     };
     /**
@@ -124,7 +139,7 @@ export class VegaComboBox {
         await this.dropdownRef.search(value);
       }
       else {
-        this.vegaSearch.emit(value);
+        this.searchEventEmit.emit(value);
       }
     };
     /**
@@ -154,7 +169,11 @@ export class VegaComboBox {
       : [];
   }
   watchValue() {
-    this.vegaChange.emit(this.value);
+    this.changeEventEmit.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -175,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,
@@ -199,7 +209,18 @@ export class VegaComboBox {
     return h("div", { class: "vega-combo-box-hint" }, this.hint);
   }
   renderDropdown() {
-    return (h("vega-dropdown", Object.assign({ trigger: this.disabled ? 'none' : 'click', source: this.source, selectType: "multiple", selectedSourceKey: this.value, matchTargetWidth: true }, this.vegaDropdownProps, { onVegaClick: this.onItemClick, onVegaHide: this.onDropdownHide, onVegaCreate: this.onDropdownCreate, ref: (e) => (this.dropdownRef = e) }), this.renderContainer()));
+    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.addUniqueObserverToNode(ref, VegaCreate, async (payload) => {
+          await this.onDropdownCreate(payload.detail);
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownHide, async () => {
+          await this.onDropdownHide();
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, async () => {
+          await this.onItemClick();
+        });
+      } }), this.renderContainer()));
   }
   renderContainer() {
     return (h("div", { class: {
@@ -220,9 +241,11 @@ export class VegaComboBox {
   renderSelectedChip(item) {
     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", 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onVegaClose: async () => await this.onChipClose(item.key) }));
+      key: item.key, text: item.label, variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, async () => {
+          await this.onChipClose(item.key);
+        });
+      } }));
   }
   renderInputContainer() {
     return (h("div", { class: "vega-combo-box-input-container" },
@@ -243,15 +266,16 @@ export class VegaComboBox {
    */
   /* istanbul ignore next */
   controlDirectionByKeyboard(code) {
-    if (document.activeElement.classList.contains('vega-chip-close-icon')) {
-      const currentChip = findParent(document.activeElement, 'vega-chip');
+    const activeElement = getActiveElement();
+    if (activeElement && activeElement.classList.contains('vega-chip-close-icon')) {
+      const currentChip = findParent(activeElement, 'vega-chip');
       if (code === 'ArrowLeft')
         this.focusItemByKeyboard(currentChip.previousSibling);
       if (code === 'ArrowRight')
         this.focusItemByKeyboard(currentChip.nextSibling);
     }
     else if (code === 'ArrowLeft' && this.searchInputRef.selectionStart === 0) {
-      this.focusItemByKeyboard(this.host.querySelector('vega-chip:last-of-type'));
+      this.focusItemByKeyboard(this.host.shadowRoot.querySelector('vega-chip:last-of-type'));
     }
   }
   /**
@@ -266,11 +290,18 @@ export class VegaComboBox {
         item.querySelector('input').focus();
       }
       else {
-        item.querySelector('.vega-chip-close-icon').focus();
+        item.shadowRoot.querySelector('.vega-chip-close-icon').focus();
       }
     }
   }
   static get is() { return "vega-combo-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-combo-box.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-combo-box.css"]
+  }; }
   static get properties() { return {
     "label": {
       "type": "string",
@@ -535,21 +566,21 @@ export class VegaComboBox {
         "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 validation result of the combo box."
+        "text": "An event emitter notifying changes in the items of the combo box value,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string[]",
+        "resolved": "string[]",
         "references": {}
       }
     }, {
@@ -567,6 +598,24 @@ export class VegaComboBox {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "create",
+      "name": "create",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "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",
+        "resolved": "string",
+        "references": {}
+      }
     }, {
       "method": "vegaSearch",
       "name": "vegaSearch",
@@ -582,6 +631,24 @@ export class VegaComboBox {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "search",
+      "name": "search",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "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",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "close": {
@@ -615,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"; }
@@ -651,9 +696,24 @@ export class VegaComboBox {
       "methodName": "watchValidationRules"
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaComboBox.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaComboBox.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "changeEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "createEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "searchEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "dropdownEventPrevent", void 0);
 __decorate([
   InjectKeyboardManager((target) => [
     {

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

@@ -0,0 +1,50 @@
+/* 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;
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
+:host .dot {
+  display: inline-block;
+  position: absolute;
+  border-radius: 9999px;
+  width: 9px;
+  height: 9px;
+}
+
+:host .counter {
+  display: flex;
+  position: absolute;
+  height: 20px;
+  min-width: 20px;
+  border-radius: 9999px;
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+  justify-content: center;
+  align-items: center;
+  font-family: "Inter", sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 15px;
+}
+
+:host .default-position {
+  top: 0px;
+  right: 0px;
+  transform: scale(1) translate(50%, -50%);
+}
+
+:host .multi-digit {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+:host .v-bg-danger {
+  background-color: rgba(var(--v-bg-danger, 230, 50, 87, 1));
+}
+
+:host .v-bg-action {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}

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

@@ -1,7 +1,15 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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 } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 export class VegaCounterBadge {
   constructor() {
+    this.globalSlimmers = {};
     /**
      * Determines whether the badge is displayed without a specific count.
      *
@@ -50,6 +58,13 @@ export class VegaCounterBadge {
     }
   }
   static get is() { return "vega-counter-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-counter-badge.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-counter-badge.css"]
+  }; }
   static get properties() { return {
     "dot": {
       "type": "boolean",
@@ -124,3 +139,6 @@ export class VegaCounterBadge {
   }; }
   static get elementRef() { return "host"; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCounterBadge.prototype, "globalSlimmers", void 0);

package/dist/collection/components/vega-date-picker/assets/icons.js

@@ -0,0 +1,11 @@
+export const Icons = {
+  'chevron-left': {
+    icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1.2937 7.29414C0.903076 7.68477 0.903076 8.31914 1.2937 8.70977L7.2937 14.7098C7.68433 15.1004 8.3187 15.1004 8.70933 14.7098C9.09995 14.3191 9.09995 13.6848 8.70933 13.2941L3.41558 8.00039L8.7062 2.70664C9.09683 2.31602 9.09683 1.68164 8.7062 1.29102C8.31558 0.900391 7.6812 0.900391 7.29058 1.29102L1.29058 7.29102L1.2937 7.29414Z" fill="currentColor"/></svg>`,
+  },
+  'chevron-right': {
+    icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10.7063 7.29414C11.0969 7.68477 11.0969 8.31914 10.7063 8.70977L4.70627 14.7098C4.31565 15.1004 3.68127 15.1004 3.29065 14.7098C2.90002 14.3191 2.90002 13.6848 3.29065 13.2941L8.5844 8.00039L3.29377 2.70664C2.90315 2.31602 2.90315 1.68164 3.29377 1.29102C3.6844 0.900391 4.31877 0.900391 4.7094 1.29102L10.7094 7.29102L10.7063 7.29414Z" fill="currentColor"/></svg>`,
+  },
+  'calendar': {
+    icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
+  },
+};

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-controller.js

@@ -75,11 +75,13 @@ export class VegaDatePickerCalendarController extends VegaSlimmer {
      * @returns {object} - The default lite picker config is being returned.
      */
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    this.getDefaultLitePickerConfig = () => (Object.assign(Object.assign({}, this.getModeConfig()), { splitView: false, showTooltip: false, firstDay: 0, minDate: this.minDate, maxDate: this.maxDate, allowRepick: this.allowRepick, format: this.format, plugins: [
-        this.vegaDatePickerMobileController.getIsMobileDevice()
-          ? /* istanbul ignore next */ 'mobilefriendly'
-          : null,
-      ].filter(Boolean) }));
+    this.getDefaultLitePickerConfig = () => {
+      return Object.assign(Object.assign({}, this.getModeConfig()), { splitView: false, showTooltip: false, firstDay: 0, minDate: this.minDate, maxDate: this.maxDate, allowRepick: this.allowRepick, format: this.format, plugins: [
+          this.vegaDatePickerMobileController.getIsMobileDevice()
+            ? /* istanbul ignore next */ 'mobilefriendly'
+            : null,
+        ].filter(Boolean), parentEl: this.vegaDatePickerCalendarRenderer.getCalendarContainerRef() });
+    };
     /**
      *  The code below is defining a method called `getModeConfig` which returns an object with various
      * properties based on the value of the `mode` property.

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-element-appender-controller.js

@@ -14,7 +14,7 @@ export class VegaDatePickerElementAppenderController extends ElementAppenderSlim
   constructor() {
     super(() => ({
       target: this.vegaDatePickerRenderer.getDatePickerContainer(),
-      appendableElement: this.vegaDatePickerCalendarRenderer.getLitepickerRef(),
+      appendableElement: this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
       positionRelativeTo: this.dropdownConfig.positionRelativeTo,
       translocation: { X: 0, Y: 8 },
       placement: ['bottom', 'top'],

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-keyboard-controller.js

@@ -23,11 +23,16 @@ export class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
           target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
-          target.vegaDatePickerCalendarRenderer.getLitepickerRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
         ],
         eventName: 'keydown',
         // eslint-disable-next-line jsdoc/require-jsdoc
-        callback: /* istanbul ignore next */ (e) => { var _a; return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click')); },
+        callback: /* istanbul ignore next */ (e) => {
+          var _a;
+          const activeElement = (((_a = e.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) ||
+            e.target);
+          return activeElement === null || activeElement === void 0 ? void 0 : activeElement.click();
+        },
       },
     ]);
   }

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-mobile-controller.js

@@ -30,16 +30,18 @@ export class VegaDatePickerMobileController extends VegaSlimmer {
    * The function prevents touchmove events from scrolling the element on mobile devices.
    */
   preventElementTouchMoveInMobile() {
-    const backdrop = this.host.querySelector('.litepicker-backdrop');
+    const backdrop = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.host.shadowRoot.querySelector('.litepicker-backdrop');
     if (backdrop) {
       backdrop.removeEventListener('touchmove', (e) => e.preventDefault());
       backdrop.addEventListener('touchmove', (e) => e.preventDefault());
     }
     this.vegaDatePickerCalendarRenderer
-      .getLitepickerRef()
+      .getCalendarContainerRef()
       .removeEventListener('touchmove', (e) => e.preventDefault());
     this.vegaDatePickerCalendarRenderer
-      .getLitepickerRef()
+      .getCalendarContainerRef()
       .addEventListener('touchmove', (e) => e.preventDefault());
   }
 }

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-value-controller.js

@@ -8,6 +8,8 @@ import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-sli
 import { isArrayEqual } from '../../../../utils/array';
 import { isDateStr } from '../../../../utils/date';
 import { LogUtility } from '../../../../utils/log';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../../helpers/change-manager/changeManager';
 /** The date picker value controller slimmer */
 export class VegaDatePickerValueController extends VegaSlimmer {
   constructor() {
@@ -69,7 +71,11 @@ export class VegaDatePickerValueController extends VegaSlimmer {
     else {
       this.setDefaultValueByMode();
     }
-    this.vegaChange.emit(this.value);
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
   }
   /*
    * The below method is e2e-test covered in
@@ -149,7 +155,10 @@ __decorate([
 ], VegaDatePickerValueController.prototype, "format", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerValueController.prototype, "vegaChange", void 0);
+], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarController", void 0);

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-zindex-controller.js

@@ -18,9 +18,11 @@ export class VegaDatePickerZIndexController extends VegaSlimmer {
    * The function sets the z-index of the backdrop and the litepicker element.
    */
   setZIndex() {
-    const backdrop = this.host.querySelector('.litepicker-backdrop');
+    const backdrop = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.host.shadowRoot.querySelector('.litepicker-backdrop');
     ZIndexManager.setZIndex(backdrop, 'base');
-    ZIndexManager.setZIndex(this.vegaDatePickerCalendarRenderer.getLitepickerRef(), 'base');
+    ZIndexManager.setZIndex(this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(), 'base');
   }
   /*
    * The below method is e2e-test covered in
@@ -32,9 +34,11 @@ export class VegaDatePickerZIndexController extends VegaSlimmer {
    * The function removes the 'base' z-index from the backdrop and the litepickerRef elements.
    */
   removeZIndex() {
-    const backdrop = this.host.querySelector('.litepicker-backdrop');
+    const backdrop = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.host.shadowRoot.querySelector('.litepicker-backdrop');
     ZIndexManager.removeZIndex(backdrop, 'base');
-    ZIndexManager.removeZIndex(this.vegaDatePickerCalendarRenderer.getLitepickerRef(), 'base');
+    ZIndexManager.removeZIndex(this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(), 'base');
   }
 }
 __decorate([

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
 import { Litepicker } from 'litepicker/dist/nocss/litepicker.umd.js';
+import { Icons } from '../../assets/icons';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -45,16 +46,14 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     /* istanbul ignore next */
     this.renderPrevAndNextMonthButtons = (ui) => {
       ui.querySelectorAll('.button-previous-month').forEach((item) => {
-        item.innerHTML = '';
-        const chevronLeft = document.createElement('i');
-        chevronLeft.classList.add('vega-previous-month-icon');
-        item.append(chevronLeft);
+        /**
+         * Calendar will flash when using vega-icon here. Hence use svg here for now
+         * TODO: Use vega-icon instead when deprecated litepicker in https://gethired.atlassian.net/browse/VD-2534
+         */
+        item.innerHTML = Icons['chevron-left'].icon;
       });
       ui.querySelectorAll('.button-next-month').forEach((item) => {
-        item.innerHTML = '';
-        const chevronRight = document.createElement('i');
-        chevronRight.classList.add('vega-next-month-icon');
-        item.append(chevronRight);
+        item.innerHTML = Icons['chevron-right'].icon;
       });
     };
     this.renderClearButton = (ui) => {
@@ -82,6 +81,8 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     if (this.datePicker === null) {
       this.initDatePicker();
     }
+    this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
+    document.body.append(this.calendarContainerRef);
   }
   /*
    * The below method is e2e-test covered in
@@ -95,6 +96,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     var _a;
     (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.destroy();
     this.datePicker = null;
+    this.calendarContainerRef.remove();
   }
   /*
    * call this method to open the date picker dropdown
@@ -195,13 +197,8 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   getDatePicker() {
     return this.datePicker;
   }
-  /**
-   * This method returns the `litepickerRef` property, which is expected to be an HTMLElement.
-   *
-   * @returns {HTMLElement} The litepickerRef is being returned.
-   */
-  getLitepickerRef() {
-    return this.litepickerRef;
+  getCalendarContainerRef() {
+    return this.calendarContainerRef;
   }
   /*
    * The below method is e2e-test covered in
@@ -234,6 +231,8 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       this.alterLitePickerFooter(ui);
       this.alterLitePickerHeight(ui);
       this.litepickerRef = ui;
+      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+      this.getCalendarContainerRef().shadowRoot.append(this.litepickerRef);
       /* istanbul ignore next */
       if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
         this.vegaDatePickerMobileController.preventElementTouchMoveInMobile();
@@ -241,23 +240,27 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     })
       .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
       .on('show', () => {
-      if (!this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.litepickerRef.classList.add('vega-force-hidden');
-        this.vegaDatePickerElementAppenderController.show();
-      }
+      this.vegaDatePickerElementAppenderController.show();
     })
       .on('mobilefriendly.show', 
     /* istanbul ignore next */ () => {
       this.vegaDatePickerZIndexController.setZIndex();
+      this.getCalendarContainerRef().style.position = 'fixed';
+      this.getCalendarContainerRef().style.top = '50%';
+      this.getCalendarContainerRef().style.left = '50%';
+      this.getCalendarContainerRef().style.transform = 'translate(-50%, -50%)';
+      this.getCalendarContainerRef().classList.remove('vega-force-hidden');
     })
       .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();
+      }
     });
   }
 }