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

package/dist/collection/constants/tokens/shadows.js

@@ -3,3 +3,15 @@
 /* tslint:disable */
 // prettier-ignore
 export const Shadows = ["shadow-card", "shadow-modal", "shadow-popover", "shadow-form-field", "shadow-dropdown-menu", "shadow-app-header", "shadow-modal-header", "shadow-modal-footer", "shadow-modal-footer-no-scroll"];
+// prettier-ignore
+export const ShadowMap = {
+  'shadow-card': 'var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02))',
+  'shadow-modal': 'var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16))',
+  'shadow-popover': 'var(--v-shadow-popover, 0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06))',
+  'shadow-form-field': 'var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1))',
+  'shadow-dropdown-menu': 'var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1))',
+  'shadow-app-header': 'var(--v-shadow-app-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-header': 'var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer': 'var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer-no-scroll': 'var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))'
+};

package/dist/collection/constants/tokens/themes/darkModeBorderTokens.js

@@ -0,0 +1,26 @@
+/* This file is generated by vega-design 2.0.71 */
+export const DarkModeBorderTokens = {
+  'border-secondary-btn': '0, 187, 255, 1',
+  'border-secondary-btn-hover': '0, 204, 255, 1',
+  'border-secondary-danger-btn': '255, 56, 97, 1',
+  'border-secondary-btn-active': '4, 165, 245, 1',
+  'border-secondary-danger-btn-hover': '255, 71, 123, 1',
+  'border-secondary-danger-btn-active': '230, 50, 87, 1',
+  'border-input-field': '32, 54, 69, 1',
+  'border-input-field-hover': '58, 98, 125, 1',
+  'border-input-field-focus': '0, 187, 255, 1',
+  'border-input-field-danger': '255, 56, 97, 1',
+  'border-input-field-danger-hover': '255, 71, 123, 1',
+  'border-input-field-danger-focus': '255, 56, 97, 1',
+  'border-sidebar-item-focus': '0, 187, 255, 1',
+  'border-input-field-disabled': '4, 4, 28, 1',
+  'border-success': '89, 217, 119, 1',
+  'border-secondary-btn-disabled': '70, 71, 101, 1',
+  'border-chip': '107, 116, 125, 1',
+  'border-divider': '32, 54, 69, 1',
+  'border-divider-secondary': '51, 57, 61, 1',
+  'border-selection-tile-selected': '153, 192, 255, 1',
+  'border-selection-tile-selected-hover': '178, 208, 255, 1',
+  'border-table-divider': '32, 54, 69, 1',
+  'border-slider-handle': '107, 116, 125, 1',
+};

package/dist/collection/constants/tokens/themes/darkModeColorTokens.js

@@ -0,0 +1,176 @@
+/* This file is generated by vega-design 2.0.71 */
+export const DarkModeColorTokens = {
+  'bg-brand': '210, 208, 223, 1',
+  'bg-page': '24, 24, 48, 1',
+  'bg-transparent': '0, 0, 0, 0',
+  'bg-primary': '4, 4, 28, 1',
+  'bg-secondary': '18, 18, 39, 1',
+  'bg-tertiary': '24, 24, 48, 1',
+  'bg-quaternary': '70, 71, 101, 1',
+  'bg-inverted-primary': '252, 252, 252, 1',
+  'bg-inverted-secondary': '247, 247, 247, 1',
+  'bg-inverted-tertiary': '240, 243, 247, 1',
+  'bg-inverted-quaternary': '241, 248, 251, 1',
+  'bg-selected': '85, 218, 255, 0.3',
+  'bg-action': '0, 187, 255, 1',
+  'bg-action-hover': '0, 204, 255, 1',
+  'bg-action-focus': '85, 218, 255, 1',
+  'bg-action-active': '4, 165, 245, 1',
+  'bg-action-secondary': '0, 0, 0, 0',
+  'bg-action-tertiary': '0, 0, 0, 0',
+  'bg-action-tertiary-hover': '252, 252, 252, 0.2',
+  'bg-action-tertiary-active': '252, 252, 252, 0.1',
+  'bg-action-quaternary': '51, 57, 61, 1',
+  'bg-action-quaternary-hover': '89, 96, 99, 1',
+  'bg-action-quaternary-active': '24, 24, 48, 1',
+  'bg-danger': '255, 56, 97, 1',
+  'bg-danger-hover': '255, 71, 123, 1',
+  'bg-danger-focus': '255, 82, 136, 1',
+  'bg-danger-active': '230, 50, 87, 1',
+  'bg-danger-tertiary': '0, 0, 0, 0',
+  'bg-danger-tertiary-hover': '255, 71, 123, 0.2',
+  'bg-danger-tertiary-active': '230, 50, 87, 0.2',
+  'bg-status-success': '123, 242, 151, 1',
+  'bg-status-warning': '255, 212, 105, 1',
+  'bg-status-info': '252, 252, 252, 1',
+  'bg-status-error': '189, 41, 71, 1',
+  'bg-sidebar': '18, 18, 39, 1',
+  'bg-sidebar-item-hover': '252, 252, 252, 1',
+  'bg-sidebar-item-selected': '0, 187, 255, 0.4',
+  'bg-sidebar-icon': '188, 186, 213, 1',
+  'bg-sidebar-icon-hover': '18, 18, 39, 1',
+  'bg-sidebar-icon-selected': '252, 252, 252, 1',
+  'bg-backdrop-popover': '70, 71, 101, 0.56',
+  'bg-backdrop-modal': '70, 71, 101, 0.8',
+  'bg-backdrop-sidebar': '70, 71, 101, 0.8',
+  'bg-accent1-primary': '109, 217, 202, 1',
+  'bg-accent1-secondary': '174, 234, 226, 1',
+  'bg-accent1-tertiary': '223, 247, 243, 1',
+  'bg-accent2-primary': '95, 56, 206, 1',
+  'bg-accent2-secondary': '184, 167, 233, 1',
+  'bg-accent2-tertiary': '219, 211, 244, 1',
+  'bg-accent3-primary': '255, 203, 105, 1',
+  'bg-accent3-secondary': '251, 226, 185, 1',
+  'bg-accent3-tertiary': '255, 243, 222, 1',
+  'bg-accent4-primary': '255, 129, 87, 1',
+  'bg-accent4-secondary': '255, 185, 162, 1',
+  'bg-accent4-tertiary': '255, 227, 218, 1',
+  'bg-accent5-primary': '4, 165, 245, 1',
+  'bg-accent5-secondary': '85, 218, 255, 1',
+  'bg-accent5-tertiary': '227, 247, 253, 1',
+  'bg-accent6-primary': '255, 84, 165, 1',
+  'bg-accent6-secondary': '255, 179, 215, 1',
+  'bg-accent6-tertiary': '255, 217, 235, 1',
+  'bg-accent7-primary': '37, 159, 159, 1',
+  'bg-accent7-secondary': '155, 212, 214, 1',
+  'bg-accent7-tertiary': '208, 239, 239, 1',
+  'bg-accent8-primary': '86, 61, 130, 1',
+  'bg-accent8-secondary': '199, 162, 204, 1',
+  'bg-accent8-tertiary': '230, 214, 234, 1',
+  'bg-accent9-primary': '255, 191, 63, 1',
+  'bg-accent9-secondary': '254, 215, 142, 1',
+  'bg-accent9-tertiary': '251, 226, 185, 1',
+  'bg-accent10-primary': '237, 122, 35, 1',
+  'bg-accent10-secondary': '241, 146, 85, 1',
+  'bg-accent10-tertiary': '245, 187, 148, 1',
+  'bg-divider': '32, 54, 69, 1',
+  'bg-divider-secondary': '51, 57, 61, 1',
+  'bg-disabled': '70, 71, 101, 1',
+  'bg-tab': '51, 57, 61, 1',
+  'bg-tab-hover': '89, 96, 99, 1',
+  'bg-tab-selected': '240, 243, 247, 1',
+  'bg-table-header': '24, 24, 48, 1',
+  'bg-table-alt-row': '18, 18, 39, 1',
+  'bg-table-selected-row': '45, 76, 97, 1',
+  'bg-site-footer': '51, 57, 61, 1',
+  'bg-site-footer-action': '171, 198, 216, 1',
+  'bg-site-footer-action-hover': '199, 217, 229, 1',
+  'bg-site-footer-action-active': '143, 179, 203, 1',
+  'bg-site-footer-field': '89, 96, 99, 1',
+  'bg-textarea-count': '252, 252, 252, 0.5',
+  'bg-table-row-hover': '70, 71, 101, 1',
+  'bg-table-row-selected-expanded': '32, 54, 69, 1',
+  'bg-app-header': '24, 24, 48, 0.92',
+  'bg-selection-tile': '32, 54, 69, 1',
+  'bg-selection-tile-hover': '24, 24, 48, 1',
+  'bg-selection-tile-selected': '32, 54, 69, 1',
+  'bg-selection-tile-selected-hover': '45, 76, 97, 1',
+  'bg-loading-track': '142, 223, 249, 1',
+  'bg-loading-progress': '4, 165, 245, 1',
+  'bg-toggle-switch': '210, 208, 223, 1',
+  'bg-toggle-switch-hover': '188, 186, 213, 1',
+  'bg-toggle-switch-selected-disabled': '0, 75, 128, 1',
+  'bg-segment-control': '210, 208, 223, 0.1',
+  'bg-segment-hover': '70, 71, 101, 1',
+  'text-primary': '252, 252, 252, 1',
+  'text-secondary': '188, 186, 213, 1',
+  'text-inverted-primary': '4, 4, 28, 1',
+  'text-inverted-secondary': '107, 116, 125, 1',
+  'text-link': '0, 187, 255, 1',
+  'text-link-hover': '0, 204, 255, 1',
+  'text-link-active': '4, 165, 245, 1',
+  'text-link-focus': '0, 204, 255, 1',
+  'text-link-visited': '128, 107, 255, 1',
+  'text-danger-link': '255, 56, 97, 1',
+  'text-danger-link-hover': '255, 71, 123, 1',
+  'text-danger-link-active': '230, 50, 87, 1',
+  'text-danger-link-focus': '255, 82, 136, 1',
+  'text-danger-link-visited': '255, 56, 97, 1',
+  'text-success': '89, 217, 119, 1',
+  'text-error': '255, 56, 97, 1',
+  'text-black': '32, 54, 69, 1',
+  'text-white': '252, 252, 252, 1',
+  'text-disabled': '70, 71, 101, 1',
+  'text-input-disabled': '176, 180, 181, 1',
+  'text-sidebar-link': '188, 186, 213, 1',
+  'text-sidebar-link-hover': '18, 18, 39, 1',
+  'text-sidebar-link-selected': '252, 252, 252, 1',
+  'text-input-placeholder': '89, 96, 99, 1',
+  'text-accent1-primary': '109, 217, 202, 1',
+  'text-accent2-primary': '95, 56, 206, 1',
+  'text-accent3-primary': '255, 203, 105, 1',
+  'text-accent4-primary': '255, 129, 87, 1',
+  'text-accent5-primary': '4, 165, 245, 1',
+  'text-accent6-primary': '255, 71, 123, 1',
+  'text-accent7-primary': '37, 159, 159, 1',
+  'text-accent8-primary': '86, 61, 130, 1',
+  'text-accent9-primary': '255, 191, 63, 1',
+  'text-accent10-primary': '237, 122, 35, 1',
+  'text-site-footer-link': '171, 198, 216, 1',
+  'text-site-footer-link-hover': '199, 217, 229, 1',
+  'text-site-footer-link-active': '143, 179, 203, 1',
+  'text-brand': '210, 208, 223, 1',
+  'text-on-action': '4, 4, 28, 1',
+  'text-on-danger': '4, 4, 28, 1',
+  'text-on-disabled': '4, 4, 28, 1',
+  'border-color-action': '0, 187, 255, 1',
+  'border-color-action-hover': '0, 204, 255, 1',
+  'border-color-action-active': '4, 165, 245, 1',
+  'border-color-danger': '255, 56, 97, 1',
+  'border-color-danger-hover': '255, 71, 123, 1',
+  'border-color-danger-active': '230, 50, 87, 1',
+  'border-color-input-field': '32, 54, 69, 1',
+  'border-color-input-field-hover': '58, 98, 125, 1',
+  'border-color-input-field-focus': '0, 187, 255, 1',
+  'border-color-input-field-danger': '255, 56, 97, 1',
+  'border-color-input-field-danger-hover': '255, 71, 123, 1',
+  'border-color-input-field-danger-focus': '255, 56, 97, 1',
+  'border-color-input-field-disabled': '4, 4, 28, 1',
+  'border-color-sidebar-item-focus': '0, 187, 255, 1',
+  'border-color-success': '89, 217, 119, 1',
+  'border-color-secondary-btn-disabled': '70, 71, 101, 1',
+  'border-color-chip': '107, 116, 125, 1',
+  'border-color-divider': '32, 54, 69, 1',
+  'border-color-divider-secondary': '51, 57, 61, 1',
+  'border-color-tile-selected': '153, 192, 255, 1',
+  'border-color-tile-selected-hover': '178, 208, 255, 1',
+  'border-color-table-divider': '32, 54, 69, 1',
+  'bg-slider-handle': '252, 252, 252, 1',
+  'border-color-slider-handle': '107, 116, 125, 1',
+  'bg-chip': '252, 252, 252, 0.1',
+  'bg-chip-hover': '252, 252, 252, 0.2',
+  'bg-chip-active': '252, 252, 252, 0.06',
+  'bg-keypad-btn-active': '45, 76, 97, 1',
+  'bg-action-secondary-hover': '0, 204, 255, 0.2',
+  'bg-action-secondary-active': '4, 165, 245, 0.2',
+};

package/dist/collection/constants/tokens/themes/darkModeRingTokens.js

@@ -0,0 +1,7 @@
+/* This file is generated by vega-design 2.0.71 */
+export const DarkModeRingTokens = {
+  'ring-input-focus': '0, 187, 255, 0.25',
+  'ring-input-danger-focus': '255, 56, 97, 0.25',
+  'ring-action-focus': '0, 187, 255, 0.25',
+  'ring-action-danger-focus': '255, 56, 97, 0.25',
+};

package/dist/collection/constants/tokens/themes/darkModeShadowTokens.js

@@ -0,0 +1,12 @@
+/* This file is generated by vega-design 2.0.71 */
+export const DarkModeShadowTokens = {
+  'shadow-card': '0px 2px 10px 0px rgba(0, 0, 0, 0.18), 0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
+  'shadow-modal': '0px 6px 40px 0px rgba(2, 2, 15, 0.14), 0px 4px 24px 0px rgba(2, 2, 15, 0.28), 0px 8px 80px 0px rgba(2, 2, 15, 0.26)',
+  'shadow-popover': '0px 0px 88px 0px rgba(2, 2, 15, 0.08), 0px 0px 32px 0px rgba(2, 2, 15, 0.1), 0px 4px 72px 0px rgba(2, 2, 15, 0.16)',
+  'shadow-form-field': '0px 1px 2px 0px rgba(170, 170, 170, 0.06), 0px 1px 3px 0px rgba(170, 170, 170, 0.1)',
+  'shadow-dropdown-menu': '0px 2px 4px -2px rgba(0, 0, 0, 0.14), 0px 4px 6px -1px rgba(0, 0, 0, 0.16)',
+  'shadow-app-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
+  'shadow-modal-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
+  'shadow-modal-footer': '0px -2px 8px 0px rgba(188, 186, 213, 0.4), 0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
+  'shadow-modal-footer-no-scroll': '0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
+};

package/dist/collection/constants/tokens/typography.js

@@ -1010,3 +1010,13 @@ export const Typography = {
 };
 // prettier-ignore
 export const TypographyKeys = ["font-h1", "font-h2", "font-h3", "font-h4", "font-h5", "font-h6", "font-p1-short", "font-p1-long", "font-p2-short", "font-p2-long", "font-btn-label", "font-btn-label-lg", "font-btn-label-sm", "font-btn-link-label", "font-btn-link-label-lg", "font-btn-link-label-sm", "font-field-label", "font-field-label-sm", "font-field-label-xs", "font-field-label-lg", "font-field-label-em", "font-field-label-sm-em", "font-field-label-xs-em", "font-field-label-lg-em", "font-field-value", "font-field-value-sm", "font-field-value-em", "font-field-value-disabled", "font-sidebar-link", "font-sidebar-link-em", "font-footnote1-short", "font-footnote1-long", "font-footnote2-short", "font-footnote2-long", "font-h-modal", "font-keypad-label", "font-keypad-label-large"];
+export const TypographyUrls = {
+  'inter': {
+    name: 'Inter',
+    url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap',
+  },
+  'roboto-mono': {
+    name: 'Roboto Mono',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap',
+  },
+};

package/dist/collection/constants/ui.js

@@ -26,3 +26,40 @@ export const FlexJustifyContent = [
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const BoxDisplay = ['block', 'none'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const VegaNativeEventName = [
+  'change',
+  'click',
+  'focus',
+  'blur',
+  'close',
+  'modalOpen',
+  'validate',
+  'formSubmit',
+  'formReset',
+  'rowClick',
+  'selectChange',
+  'selectAllChange',
+  'pageSizeChange',
+  'dropdownClick',
+  'create',
+  'search',
+  'hide',
+  'show',
+  'popoverShow',
+  'popoverHide',
+  'cancel',
+  'remove',
+  'pageUpdate',
+  'currentStepUpdate',
+  'toggleStatus',
+  'stateUpdate',
+  'groupClick',
+  'menuClick',
+  'accordionExpand',
+  'dropdownShow',
+  'dropdownHide',
+  'dropdownSearch',
+];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/decorators/property-decorators/injectElementAppender.js

@@ -131,11 +131,12 @@ class ElementAppenderListener {
     and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
     hides the dropdown. */
     this.globalMouseDownHandler = (e) => {
+      const currentTarget = e.composedPath()[0];
       if (this.shouldListenerWork('custom') &&
         this.component[this.isDropdownShowName] &&
-        !isParent(e.target, this.appendableElement) &&
-        !isParent(e.target, this.target) &&
-        findParent(e.target, 'vega-modal') === findParent(this.target, 'vega-modal')) {
+        !isParent(currentTarget, this.appendableElement) &&
+        !isParent(currentTarget, this.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.target, 'vega-modal')) {
         this.component[this.elementAppenderName].hide();
       }
     };

package/dist/collection/decorators/property-decorators/injectKeyboardManager.js

@@ -14,7 +14,8 @@ export function InjectKeyboardManager(listenersRetriever) {
     const { connectedCallback, componentDidLoad, disconnectedCallback } = componentClass;
     /* eslint-disable jsdoc/require-jsdoc */
     componentClass.connectedCallback = function () {
-      this.keyboardEventListeners && KeyboardManager.register(this.keyboardEventListeners);
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.register(keyboardEventListeners);
       return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
     };
     componentClass.componentDidLoad = function () {
@@ -23,7 +24,8 @@ export function InjectKeyboardManager(listenersRetriever) {
       return componentDidLoad === null || componentDidLoad === void 0 ? void 0 : componentDidLoad.call(this);
     };
     componentClass.disconnectedCallback = function () {
-      KeyboardManager.deregister(this.keyboardEventListeners);
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.deregister(keyboardEventListeners);
       return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
     };
   };

package/dist/collection/decorators/property-decorators/tests/injectElementAppenderProxy.test.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
 import { triggerMouseEvent } from '../../../utils/testUtils';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectElementAppender } from '../injectElementAppender';
 describe('@InjectElementAppender() decorator test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();
@@ -87,7 +87,7 @@ describe('@InjectElementAppender() decorator test suite', () => {
       expect(mockedComponent.appendableElement).toHaveClass('vega-force-hidden');
       target.click();
       expect(mockedComponent.appendableElement).not.toHaveClass('vega-force-hidden');
-      window.dispatchEvent(new MouseEvent('mousedown', { view: window }));
+      triggerMouseEvent(document.documentElement, 'mousedown');
       expect(mockedComponent.appendableElement).toHaveClass('vega-force-hidden');
     });
     test('should listen event proper while trigger is hover', () => {
@@ -176,7 +176,7 @@ describe('@InjectElementAppender() decorator test suite', () => {
       mockedComponent.componentDidLoad();
       mockedComponent.elementAppender.show();
       expect(mockedComponent.appendableElement).not.toHaveClass('vega-force-hidden');
-      window.dispatchEvent(new MouseEvent('mousedown', { view: window }));
+      triggerMouseEvent(document.documentElement, 'mousedown');
       expect(mockedComponent.appendableElement).toHaveClass('vega-force-hidden');
       mockedComponent.disconnectedCallback();
     });
@@ -191,7 +191,7 @@ describe('@InjectElementAppender() decorator test suite', () => {
       mockedComponent.componentDidLoad();
       mockedComponent.elementAppender.show();
       expect(mockedComponent.appendableElement).not.toHaveClass('vega-force-hidden');
-      window.dispatchEvent(new MouseEvent('mousedown', { view: window }));
+      triggerMouseEvent(document.documentElement, 'mousedown');
       expect(mockedComponent.appendableElement).not.toHaveClass('vega-force-hidden');
       mockedComponent.disconnectedCallback();
     });

package/dist/collection/decorators/property-decorators/tests/injectKeyboardManager.test.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import KeyboardManager from '../../../helpers/keyboard/keyboardManager';
 import { InjectKeyboardManager } from '../injectKeyboardManager';
 describe('@InjectKeyboardManager() decorator test suite', () => {
@@ -79,5 +79,13 @@ describe('@InjectKeyboardManager() decorator test suite', () => {
       mockedComponent.disconnectedCallback();
       expect(mockedComponentDisconnectedCallbackMethod).toBeCalledTimes(0);
     });
+    test('should not throw error when disconnectedCallback before component loaded', () => {
+      const mockedComponent1 = new MockedComponent();
+      mockedComponent1.host = new MockHTMLElement('body', 'div');
+      mockedComponent1.componentDidLoad();
+      const mockedComponent2 = new MockedComponent();
+      mockedComponent2.host = new MockHTMLElement('body', 'div');
+      expect(() => mockedComponent2.disconnectedCallback()).not.toThrowError();
+    });
   });
 });

package/dist/collection/global/scripts/beforeVegaLoad.js

@@ -4,6 +4,10 @@ import { VegaNotify } from '../../helpers/notify/vegaNotifyController';
 import { VegaThemeManager } from '../../helpers/theme/themeManager';
 import { setVegaLogLevel } from '../../utils/log';
 import { VegaDialog } from '../../helpers/dialog/vegaDialogController';
+import { GlobalSlimmersRegistry } from 'vega-slimmer/core';
+import { VegaWatchMethodCancelSlimmer } from '../../helpers/slimmers/global/vegaWatchMethodCancelSlimmer';
+import VegaEventManager from '../../helpers/event-manager/vegaEventManager';
+import { TypographyUrls } from '../../constants/tokens/typography';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -16,6 +20,9 @@ export default function () {
   injectVegaThemeManagerIntoGlobal();
   injectVegaLogLevelIntoGlobal();
   injectVegaDialogIntoGlobal();
+  registerGlobalVegaSlimmers();
+  injectSetEventSemanticsIntoGlobal();
+  injectVegaTypography();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -63,3 +70,31 @@ function injectVegaLogLevelIntoGlobal() {
 function injectVegaDialogIntoGlobal() {
   globalThis.VegaDialog = VegaDialog;
 }
+/**
+ * register global vega slimmers
+ */
+function registerGlobalVegaSlimmers() {
+  GlobalSlimmersRegistry.register([VegaWatchMethodCancelSlimmer]);
+}
+/**
+ * Inject setEventSemantics to global as a public api
+ */
+function injectSetEventSemanticsIntoGlobal() {
+  globalThis.VegaEventManager = VegaEventManager;
+}
+/**
+ * Inject Vega typography stylesheet
+ */
+function injectVegaTypography() {
+  Object.keys(TypographyUrls).forEach((key) => {
+    const { url } = TypographyUrls[key];
+    const typographyLinkId = `vega-typography-${key}`;
+    if (!document.querySelector(`#${typographyLinkId}`)) {
+      const typographyLink = document.createElement('link');
+      typographyLink.id = typographyLinkId;
+      typographyLink.href = url;
+      typographyLink.rel = 'stylesheet';
+      document.head.append(typographyLink);
+    }
+  });
+}

package/dist/collection/global/tests/beforeVegaLoad.test.js

@@ -1,3 +1,4 @@
+import { TypographyUrls } from '../../constants/tokens/typography';
 jest.mock('../../helpers/feature-control/featureFlagsMap', () => {
   return {
     /* eslint-disable-next-line @typescript-eslint/naming-convention */
@@ -34,4 +35,21 @@ describe('beforeVegaLoad unit test', () => {
     BeforeVegaLoad();
     expect(FeatureFlag.isEnabled(NOT_DEFAULT_DISABLED)).toBeFalsy();
   });
+  it('should inject Vega typography in page head', () => {
+    BeforeVegaLoad();
+    expect(TypographyUrls).toEqual({
+      'inter': {
+        name: 'Inter',
+        url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap',
+      },
+      'roboto-mono': {
+        name: 'Roboto Mono',
+        url: 'https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap',
+      },
+    });
+    Object.keys(TypographyUrls).forEach((key) => {
+      const { url } = TypographyUrls[key];
+      expect(document.head.querySelector(`#vega-typography-${key}`)).toEqualHtml(`<link href="${url}" id="vega-typography-${key}" rel="stylesheet">`);
+    });
+  });
 });

package/dist/collection/helpers/{observer → change-manager}/changeManager.js

@@ -43,6 +43,14 @@ class ChangeManager {
       }
     }
   }
+  /**
+   * The function clears the observers for a given subject in a pub-sub map.
+   *
+   * @param {Subject} subject - The subject parameter is an object that represents the subject of the observer pattern. It is used as a key to identify the observers that are subscribed to it.
+   */
+  clearObserversBySubject(subject) {
+    this.pubSubMap.delete(subject);
+  }
   /**
    * If the subject is in the map, then notify all observers of the subject
    *
@@ -56,7 +64,7 @@ class ChangeManager {
           observer.notify(payload);
         }
         catch (e) {
-          LogUtility.warn(`Encountered error while notifying observer for subject ${subject.getTitle()}`, e);
+          LogUtility.warn(`Encountered error while notifying observer for subject ${subject.getDescription()}`, e);
         }
       });
     }

package/dist/collection/helpers/change-manager/subject/dom-node-subject/domNodeSubject.js

@@ -0,0 +1,23 @@
+/** The DomNodeSubject class represents a subject related to DOM nodes. */
+export class DomNodeSubject {
+  /**
+   * The constructor function takes a SubjectTitle parameter and assigns it to the private title property.
+   *
+   * @param {SubjectTitle} title - The "title" parameter is a private property of the class that is of type "SubjectTitle".
+   * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the container or
+   * parent element where the subject title will be displayed. It is used to specify the location where
+   * the title will be rendered on the web page.
+   */
+  constructor(title, host) {
+    this.title = title;
+    this.host = host;
+  }
+  /**
+   * The getDescription function returns the title of an object as a string.
+   *
+   * @returns {string} The title of the object.
+   */
+  getDescription() {
+    return `, this is a dom nodes subject of ${this.title}.(class name:${this.host.className}, id:${this.host.id})`;
+  }
+}

package/dist/collection/helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory.js

@@ -0,0 +1,54 @@
+import { DomNodeSubject } from './domNodeSubject';
+/** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
+class DomNodeSubjectFactory {
+  constructor() {
+    this.cache = new WeakMap();
+  }
+  /**
+   * The function `getSubject` returns the subject associated with a given node and event ID, either from the cache or by setting it if it doesn't exist.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement, which represents an element in the HTML document.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of the event for which we want to get the subject.
+   * @returns {DomNodeSubject} a `DomNodeSubject` object.
+   */
+  getSubject(node, eventId) {
+    if (this.isExist(node, eventId)) {
+      return this.cache.get(node).get(eventId);
+    }
+    else {
+      return this.setSubject(node, eventId);
+    }
+  }
+  /**
+   * The function checks if a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} node - The "node" parameter is an HTMLElement, which represents an HTML element in the DOM (Document Object Model). It could be any HTML element such as a div, span, button, etc.
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents an event ID that is used to identify a specific event.
+   * @returns {boolean} a boolean value.
+   */
+  isExist(node, eventId) {
+    if (node) {
+      return (this.cache.has(node) &&
+        this.cache.get(node) !== undefined &&
+        this.cache.get(node).has(eventId));
+    }
+    return false;
+  }
+  /**
+   * The function `setSubject` creates a new `DomNodeSubject` and associates it with a given `node` and `eventId`, and then returns the created subject.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an HTMLElement object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @returns {DomNodeSubject} dom node subject object
+   */
+  setSubject(node, eventId) {
+    const subjectTitle = `${node.tagName}:${eventId.getName()}`;
+    const subject = new DomNodeSubject(subjectTitle, node);
+    if (!this.cache.get(node)) {
+      this.cache.set(node, new Map());
+    }
+    this.cache.get(node).set(eventId, subject);
+    return subject;
+  }
+}
+export default new DomNodeSubjectFactory();

package/dist/collection/helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory.js

@@ -0,0 +1,40 @@
+import changeManager from '../../changeManager';
+import { Observer } from '../../observer/observer';
+import domNodesSubjectFactory from './domNodeSubjectFactory';
+/**
+ * The function `domAcceptableHandle` always returns `true`.
+ *
+ * @returns {boolean} true
+ */
+const domAcceptableHandle = () => {
+  return true;
+};
+/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
+export class DomNodeSubjectObserverFactory {
+  /**
+   * add observer to a given HTML element node
+   *
+   * @param {HTMLElement} node the node ref
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @param {(input?: unknown) => void} callback the callback handle
+   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
+   */
+  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
+    if (node) {
+      const domNodesObserver = new Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
+      changeManager.register(domNodesSubjectFactory.getSubject(node, eventId), domNodesObserver);
+    }
+  }
+  /**
+   * The function removes observers from a given HTML element node.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   */
+  static removeUniqueObserverFromNode(node, eventId) {
+    if (domNodesSubjectFactory.isExist(node, eventId)) {
+      changeManager.clearObserversBySubject(domNodesSubjectFactory.getSubject(node, eventId));
+    }
+  }
+}

package/dist/collection/helpers/change-manager/subject/static-subject/staticSubject.js

@@ -0,0 +1,21 @@
+/**
+ * A subject class is used for register by observer
+ */
+export class StaticSubject {
+  /**
+   * It takes a subject title and returns a SubjectTitle object
+   *
+   * @param {SubjectTitle} title - The title of the subject.
+   */
+  constructor(title) {
+    this.title = title;
+  }
+  /**
+   * Get the title of the subject
+   *
+   * @returns {SubjectTitle} The title of the subject.
+   */
+  getDescription() {
+    return this.title;
+  }
+}