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

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

@@ -11,13 +11,19 @@ import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { DeviceType } from '../../types/ui.type';
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { getDeviceType } from '../../utils/ui';
+import { findParent, getDeviceType } from '../../utils/ui';
 import { formatAndValidResponsiveToken } from '../../utils/designToken';
 import ZIndexManager from '../../helpers/zindex/zIndexManager';
-import { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaOpen, VegaClose } from '../../helpers/event-manager/eventID/vegaEventId';
+import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/componentGlobalStyleSlimmer';
+import mainContentStyle from './vega-modal-disable-body-scroll.css';
 export class VegaModal {
   constructor() {
+    this.globalSlimmers = {};
     /**
      * The below method is e2e-test covered in
      * @see{module:vega-modal-resize-e2e}
@@ -29,6 +35,10 @@ export class VegaModal {
       },
       isDeferred: true,
     });
+    this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
+    this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.isModalWidthSet = false;
     /**
      * Provides options for controlling the behavior of the backdrop.
@@ -100,20 +110,6 @@ export class VegaModal {
         this.open = false;
       }
     };
-    /**
-     * we should prevent same event propagation to vega-modal level.
-     * example:
-     * while content have vega-chip component, when close the vega-chip, the `vegaClose` event will propagation,
-     * if use listen the `vegaClose` event on vega-modal, he will not kown this is from vega-modal or vega-chip
-     */
-    this.preventSameNameEvent = () => {
-      this.modalContent.addEventListener('vegaClose', (e) => {
-        e.stopPropagation();
-      });
-      this.modalContent.addEventListener('vegaOpen', (e) => {
-        e.stopPropagation();
-      });
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -146,7 +142,6 @@ export class VegaModal {
       this.listenContentScroll();
     }
     this.setContentMaxHeight();
-    this.preventSameNameEvent();
   }
   /**
    * Clicking on a non-static current modal should close this modal, not other modals.
@@ -155,11 +150,16 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataTarget(e) {
-    const target = e.target;
-    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.el) {
+    /*
+     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
+     */
+    const target = e.composedPath()[0];
+    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
       this.open = false;
     }
-    if (this.el.id && target.closest(`[data-target=${this.el.id}]`)) {
+    if (this.host.id &&
+      (target.getAttribute('data-target') === this.host.id ||
+        findParent(target, `[data-target=${this.host.id}]`))) {
       e.preventDefault();
       this.open = true;
     }
@@ -200,11 +200,11 @@ export class VegaModal {
         'align-center': this.isVerticallyCenter && this.open,
         'animation': this.animation,
       } },
-      h("div", { class: "modal-dialog" }, this.renderContainer())), this.el);
+      h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
   }
   renderContainer() {
     const padding = formatAndValidResponsiveToken(this.padding, 'padding');
-    return (h("div", { class: "modal-container" },
+    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
       this.renderHeader(padding),
       this.renderContent(padding),
       this.renderFooter(padding)));
@@ -221,7 +221,7 @@ export class VegaModal {
       this.showCloseButton && this.renderCloseBtn()));
   }
   renderContent(padding) {
-    const content = this.el.querySelector('[slot="modal-content"]') || this.el.querySelector('[slot="content"]');
+    const content = this.host.querySelector('[slot="modal-content"]') || this.host.querySelector('[slot="content"]');
     return (h("div", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
@@ -251,16 +251,16 @@ export class VegaModal {
       h("vega-icon", { icon: "close", size: "size-16" })));
   }
   hasModalFooter() {
-    return (this.el.querySelector(`[slot='modal-footer']`) !== null ||
-      this.el.querySelector(`[slot='footer']`) !== null);
+    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
+      this.host.querySelector(`[slot='footer']`) !== null);
   }
   isContentScrollable() {
     return Boolean(this.contentMaxHeight);
   }
   hasModalTitle() {
     return (Boolean(this.modalTitle) ||
-      this.el.querySelector(`[slot='modal-title']`) !== null ||
-      this.el.querySelector(`[slot='title']`) !== null);
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
   }
   /**
    * The below method is e2e-test covered in
@@ -295,11 +295,11 @@ export class VegaModal {
   setModalZIndex() {
     if (this.open) {
       ZIndexManager.setZIndex(this.backdropRef, 'base');
-      ZIndexManager.setZIndex(this.el, 'base');
+      ZIndexManager.setZIndex(this.host, 'base');
     }
     else {
       ZIndexManager.removeZIndex(this.backdropRef, 'base');
-      ZIndexManager.removeZIndex(this.el, 'base');
+      ZIndexManager.removeZIndex(this.host, 'base');
       const length = this.getVisibleModalLength();
       if (length > 0) {
         ZIndexManager.setZIndex(this.backdropRef, 'base');
@@ -323,7 +323,7 @@ export class VegaModal {
     if (this.isModalWidthSet && flag === 'initialize')
       return;
     const size = this.getModalSize();
-    const dialog = this.el.querySelector('.modal-dialog');
+    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
     typeof size === 'number'
       ? (dialog.style['width'] = `${size}px`)
       : (dialog.style['width'] = `${size}`);
@@ -346,10 +346,10 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   setModalVisibility() {
-    this.el.style['display'] = this.open ? 'flex' : 'none';
+    this.host.style['display'] = this.open ? 'flex' : 'none';
   }
   emitEvent() {
-    this.open ? this.vegaOpen.emit() : this.vegaClose.emit();
+    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
   }
   /**
    * The below method is e2e-test covered in
@@ -381,10 +381,12 @@ export class VegaModal {
   setBackdrop() {
     if (this.backdrop === 'none')
       return;
-    let backdrop = document.querySelector('.modal-backdrop');
+    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
     if (!backdrop) {
-      backdrop = document.createElement('div');
-      backdrop.classList.add('modal-backdrop', VegaModal.backdropColorMap[this.backdropColor]);
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add('modal-backdrop');
+      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
       document.querySelector('body').append(backdrop);
     }
     this.backdropRef = backdrop;
@@ -420,7 +422,7 @@ export class VegaModal {
     }
   }
   pushToModalStack() {
-    VegaModal.openedModalStack.push(this.el);
+    VegaModal.openedModalStack.push(this.host);
   }
   popFromModalStack() {
     VegaModal.openedModalStack.pop();
@@ -439,21 +441,28 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   disableBackdropTouchMove() {
-    this.el.addEventListener('touchstart', (e) => {
+    this.host.addEventListener('touchstart', (e) => {
       this.touchStartY = e.targetTouches[0].pageY;
     }, { capture: true });
-    this.el.addEventListener('touchmove', (e) => {
-      const isScrolledTop = this.el.scrollTop <= 0;
-      const isScrolledBottom = this.el.scrollHeight - this.el.scrollTop <= this.el.clientHeight;
+    this.host.addEventListener('touchmove', (e) => {
+      const isScrolledTop = this.host.scrollTop <= 0;
+      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
       const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
       const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
-      if (e.target === this.el &&
+      if (e.target === this.host &&
         ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
         e.preventDefault();
       }
     }, { capture: true });
   }
   static get is() { return "vega-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-modal.css"]
+  }; }
   static get properties() { return {
     "backdrop": {
       "type": "string",
@@ -701,6 +710,24 @@ export class VegaModal {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the modal close event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "vegaOpen",
       "name": "vegaOpen",
@@ -716,6 +743,24 @@ export class VegaModal {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "modalOpen",
+      "name": "modalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the modal open event. The event name is not `open` because already has a property `open`"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "modal": {
@@ -738,7 +783,7 @@ export class VegaModal {
       }
     }
   }; }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "size",
       "methodName": "watchSize"
@@ -762,10 +807,25 @@ export class VegaModal {
 }
 VegaModal.openedModalStack = [];
 VegaModal.backdropColorMap = {
-  default: 'v-bg-backdrop-modal',
-  semi: 'v-bg-backdrop-popover',
-  none: 'v-bg-transparent',
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
 };
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaModal.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "closeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "childNodesEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "componentGlobalStyleSlimmer", void 0);

package/dist/collection/components/vega-nav/slimmers/vega-nav-observer-slimmer.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
-import { LEFT_NAV_LINK_SELECTED_TOPIC } from '../../../helpers/observer/subject';
-import { Observer } from '../../../helpers/observer/observer';
-import ChangeManager from '../../../helpers/observer/changeManager';
+import { LEFT_NAV_LINK_SELECTED_TOPIC } from '../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { Observer } from '../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../helpers/change-manager/changeManager';
 import { findParent } from '../../../utils/ui';
 /**
  * The code is defining an abstract class called `VegaNavObserverSlimmer` that extends the `VegaSlimmer` class.

package/dist/collection/components/vega-nav/vega-left-nav/assets/icons.js

@@ -0,0 +1,6 @@
+export const Icons = {
+  'heartland-logo': {
+    icon: `<svg width="142" height="26" viewBox="0 0 142 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5.38012V9.88886H14.7732V0H20.2857V24.7222H14.9056V13.9144H5.42422V24.7659H0V0ZM81.3186 0H86.4784V24.7222H81.3186V0ZM141.868 0.0435179H136.708C136.708 3.19395 136.708 6.38814 136.664 9.58233C135.959 8.53217 134.856 7.78833 133.666 7.48204C131.461 6.86946 129.079 7.35077 127.227 8.70716C125.727 9.97612 124.669 11.7264 124.317 13.6516C123.92 15.4894 123.92 17.4147 124.317 19.2962C124.669 21.1339 125.684 22.7966 127.182 23.8906C128.77 24.8969 130.667 25.2907 132.519 25.0282C134.283 24.8531 135.826 23.8468 136.664 22.2716C136.664 22.824 136.703 23.3764 136.742 23.9288C136.762 24.2077 136.782 24.4867 136.796 24.7656H142C141.912 23.5843 141.868 22.3591 141.868 21.1777V0.0435179ZM129.784 13.039C130.137 11.9889 130.976 10.9388 132.166 10.6762C133.357 10.3262 134.636 10.6762 135.518 11.5514C136.444 12.4702 136.753 13.8267 136.841 15.0956C136.885 16.7583 136.753 18.4648 135.959 19.9525C135.076 21.4839 132.916 22.2716 131.284 21.3964C130.094 20.7401 129.609 19.3399 129.388 18.071C129.124 16.3645 129.256 14.6581 129.784 13.039ZM70.3382 4.15601L75.4537 2.31827V7.52523H79.5991V10.9382H75.4537V17.1515C75.4096 18.1142 75.4537 19.0768 75.5859 20.0394C75.6742 20.5645 76.1152 21.0021 76.6443 21.1334C77.6146 21.3084 78.5847 21.3084 79.5549 21.1771V24.5026C77.7469 25.0276 75.8506 25.1589 73.9984 24.9401C72.94 24.8088 71.9258 24.3276 71.2202 23.5399C70.6028 22.7085 70.3382 21.7021 70.3823 20.6958C70.3382 15.1826 70.3382 9.66925 70.3382 4.15601ZM35.5 8.2703C33.6037 7.04514 31.3106 6.56382 29.1056 7.00138C26.9889 7.35143 25.1367 8.48907 23.946 10.2831C22.4907 12.3396 22.1379 14.9212 22.2261 17.3716C22.3584 19.4718 22.9758 21.7909 24.4752 23.3224C25.9746 24.8538 28.1795 25.3789 30.2522 25.4664C32.0603 25.5539 33.9124 25.1601 35.5441 24.3725C37.264 23.4099 38.3665 21.6158 38.4546 19.6469H33.7361C33.6037 20.2595 33.2509 20.8283 32.81 21.3095C32.2808 21.7471 31.6193 22.0097 30.9577 22.0097C29.8553 22.1409 28.7969 21.7471 28.0473 20.9158C27.2534 19.9094 27.077 18.5967 27.1211 17.4153H38.8515C38.9838 15.7963 38.8075 14.1774 38.4106 12.6021C37.9696 10.8519 36.9553 9.32044 35.5 8.2703ZM27.2975 14.1774C27.2975 13.1272 27.6503 12.1208 28.3118 11.2895C29.5025 9.93302 32.0603 10.0205 32.9864 11.5958C33.4274 12.3833 33.6037 13.3022 33.6037 14.1774H27.2975ZM42.5126 8.75203C44.056 7.39558 46.2169 7.00178 48.2014 6.95802C50.1859 6.91427 52.3908 7.30807 54.0225 8.62074C55.2131 9.5834 55.6983 11.1586 55.7865 12.6463C55.8368 13.696 55.8297 14.7314 55.8225 15.7689V15.769C55.8171 16.5478 55.8117 17.3278 55.8306 18.1158C55.8389 18.5271 55.8425 18.9415 55.8461 19.3576V19.3576C55.8618 21.1545 55.8777 22.982 56.2715 24.723H51.553C51.4206 23.9791 51.3766 23.1915 51.3766 22.4039C50.4504 23.8478 48.9069 24.8105 47.1871 25.0293C45.776 25.2043 44.3207 25.0293 42.9536 24.5042C41.7629 23.9353 40.8368 22.8852 40.484 21.5725C39.9548 19.8661 40.2635 18.0283 41.2778 16.5844C42.2921 15.3154 43.6592 14.4403 45.2468 14.0465C46.9417 13.606 48.6735 13.5686 50.3747 13.5319C50.5325 13.5285 50.6901 13.5251 50.8474 13.5214C50.8474 13.4493 50.8477 13.377 50.848 13.3045V13.3038V13.3032V13.3026C50.8514 12.4946 50.8548 11.662 50.4504 10.9399C49.6567 9.80219 48.1132 9.53961 46.9666 10.3273C46.8343 10.4148 46.7461 10.5023 46.6579 10.5898C46.2169 11.0711 45.9964 11.7274 46.0847 12.3838H41.0132C40.9691 11.0711 41.4983 9.71469 42.5126 8.75203ZM47.0989 17.0657C46.4374 17.2844 45.8641 17.7657 45.5113 18.3783C45.0263 19.4285 45.3349 20.6536 46.261 21.3537C47.5399 22.1851 49.2598 21.8351 50.0977 20.5661C50.8914 19.3847 50.8914 17.9408 50.8914 16.5844C49.6126 16.4531 48.2896 16.5844 47.0989 17.0657ZM96.1373 6.95649C94.1088 6.95649 91.9474 7.35029 90.4039 8.70676C89.3901 9.66934 88.8168 11.0258 88.8605 12.426H93.9322C93.844 11.7259 94.1525 10.982 94.6821 10.5007C95.7405 9.66934 97.2394 9.80063 98.1658 10.7633C98.7448 11.5023 98.742 12.5111 98.7395 13.428C98.7393 13.4882 98.7392 13.5481 98.7392 13.6074C96.7543 13.6074 94.7704 13.6511 92.8738 14.1762C91.3741 14.5701 90.0071 15.4451 89.0816 16.7141C87.9786 18.3331 87.8021 20.3458 88.5519 22.1398C89.037 23.3212 89.9634 24.2401 91.1538 24.6777C92.477 25.0714 93.844 25.2027 95.2109 25.0277C96.8863 24.8527 98.3424 23.7151 99.2679 22.4023C99.2679 23.19 99.3125 23.9338 99.4445 24.7214H104.119C103.671 22.7031 103.674 20.573 103.678 18.5029V18.5028V18.5016V18.5003C103.678 18.3274 103.678 18.1549 103.678 17.983C103.678 16.189 103.678 14.3513 103.634 12.5135C103.502 11.1133 103.061 9.58184 101.914 8.66297C100.326 7.35029 98.1658 6.95649 96.1373 6.95649ZM93.5354 18.1143C93.9322 17.5455 94.5493 17.1516 95.2554 16.9329C96.4013 16.5828 97.5925 16.4953 98.7392 16.5828L98.7394 16.7751C98.7413 18.0786 98.7434 19.4825 97.9447 20.6084C97.1074 21.8335 95.4311 22.1835 94.1525 21.396C93.0941 20.6521 92.8293 19.2081 93.5354 18.1143ZM112.982 7.74535C114.526 6.95774 116.334 6.73897 118.01 7.13276C119.641 7.43906 121.009 8.53297 121.671 10.0644C122.123 11.1017 122.163 12.221 122.204 13.3359L122.204 13.3364C122.214 13.6322 122.225 13.9276 122.243 14.2212V24.7226H116.952V13.2148C116.952 12.2522 116.379 11.3771 115.496 10.8958C113.953 10.1957 112.145 10.8083 111.351 12.2959C110.93 13.169 110.941 14.1409 110.951 15.0687V15.0698C110.952 15.2111 110.954 15.3514 110.954 15.4901V24.6789H105.75V13.4336C105.75 13.0309 105.752 12.6264 105.754 12.2206C105.761 10.5979 105.768 8.95287 105.662 7.30779H110.602L110.63 7.84104C110.664 8.49637 110.699 9.15749 110.734 9.84562C111.263 9.01425 112.057 8.27042 112.982 7.74535ZM68.8393 7.35106C67.5163 7.21979 66.1933 7.48232 65.0026 8.09491C64.0325 8.7075 63.3268 9.58258 62.8859 10.7202C62.8859 9.6286 62.8419 8.53696 62.798 7.44526L62.7977 7.43857H57.9467C58.1672 9.58258 58.2554 11.7704 58.2114 13.9144C58.2114 15.125 58.2065 16.3356 58.2016 17.5462C58.1918 19.9674 58.1819 22.3886 58.2114 24.8097H63.3268V15.8398C63.3268 14.7021 63.5915 13.3894 64.5617 12.6893C65.7965 11.8142 67.384 11.8142 68.8393 11.9454V7.35106Z" fill="#596063" /></svg>`,
+    autoSize: true,
+  },
+};

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -21,11 +21,11 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
     });
     /* eslint-enable jsdoc/require-jsdoc*/
   }
-  disconnectedCallback() {
-    this.backDrop && this.backDrop.remove();
+  connectedCallback() {
+    this.backdrop = this.createBackdrop();
   }
-  componentWillLoad() {
-    this.backDrop = this.findOrCreateBackDrop();
+  disconnectedCallback() {
+    this.backdrop && this.backdrop.remove();
   }
   watchOpenState(newState) {
     this.updateBackdropUI(newState);
@@ -34,7 +34,7 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
     this.updateBackdropUI(this.openState);
   }
   getBackdrop() {
-    return this.backDrop;
+    return this.backdrop;
   }
   shouldShowBackdrop() {
     return this.isLargeScreen() && !this.showAsOverlay ? false : true;
@@ -44,31 +44,28 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
    * @see{module:vega-left-nav-e2e-vega-click-backdrop}
    */
   /* istanbul ignore next */
-  findOrCreateBackDrop() {
-    var _a;
-    let backDrop = document.querySelector('.' + VegaLeftNavBackdropController.backDropCss);
-    if (!backDrop) {
-      backDrop = document.createElement('div');
-      backDrop.classList.add(VegaLeftNavBackdropController.backDropCss);
-      backDrop.addEventListener('click', () => {
-        this.openStateController.setOpenState('close');
-      });
-      (_a = document.querySelector('body')) === null || _a === void 0 ? void 0 : _a.append(backDrop);
-    }
-    return backDrop;
+  createBackdrop() {
+    const backdrop = document.createElement('vega-backdrop');
+    backdrop.visible = false;
+    backdrop.duration = 150;
+    backdrop.addEventListener('vegaClick', () => {
+      this.openStateController.setOpenState('close');
+    });
+    document.body.append(backdrop);
+    return backdrop;
   }
   updateBackdropUI(state) {
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
       if (mainContent && !this.shouldShowBackdrop()) {
-        this.backDrop.classList.remove('open');
+        this.backdrop.visible = false;
       }
       else {
-        this.backDrop.classList.add('open');
+        this.backdrop.visible = true;
       }
     }
     else {
-      this.backDrop.classList.remove('open');
+      this.backdrop.visible = false;
     }
   }
   isLargeScreen() {
@@ -76,7 +73,6 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
     return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
   }
 }
-VegaLeftNavBackdropController.backDropCss = 'vega-left-nav-backdrop';
 __decorate([
   MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openState", void 0);
@@ -86,12 +82,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate([
-  MapToComponentMethod('componentWillLoad')
-], VegaLeftNavBackdropController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('watchOpenState')
 ], VegaLeftNavBackdropController.prototype, "watchOpenState", null);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-open-state-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/pageResizeObserverSlimmer';
+import { executeAfterTransition } from '../../../../../utils/effect';
 export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   /**
    * The below method is e2e-test covered in
@@ -48,7 +49,7 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     else {
       this.open = false;
     }
-    this.vegaStateUpdate.emit(this.openState);
+    this.stateUpdateEventEmitter.emit(this.openState);
   }
   watchShowAsOverlay() {
     this.updateMainContentUI(this.openState);
@@ -70,20 +71,28 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     const bodyElement = document.querySelector('body');
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
-      this.host.classList.add('open');
-      if (mainContent && !this.backdropController.shouldShowBackdrop()) {
-        bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
-        mainContent.classList.add('open');
-      }
-      else {
-        bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.add('vega-overflow-hidden');
-        mainContent && mainContent.classList.remove('open');
-      }
+      this.host.style.display = 'flex';
+      setTimeout(() => {
+        this.host.classList.add('open');
+        if (mainContent && !this.backdropController.shouldShowBackdrop()) {
+          bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
+          mainContent.classList.add('open');
+        }
+        else {
+          bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.add('vega-overflow-hidden');
+          mainContent && mainContent.classList.remove('open');
+        }
+      });
     }
     else {
       this.host.classList.remove('open');
       bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
       mainContent && mainContent.classList.remove('open');
+      executeAfterTransition(() => {
+        if (!this.open) {
+          this.host.style.display = 'none';
+        }
+      }, this.host);
     }
   }
 }
@@ -98,7 +107,7 @@ __decorate([
 ], VegaLeftNavOpenStateController.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
-], VegaLeftNavOpenStateController.prototype, "vegaStateUpdate", void 0);
+], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/renderers/vega-left-nav-header-renderer.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaLeftNavSeparator } from '../../internal/vega-left-nav-separator';
+import { VegaIconManager } from '../../../../../helpers/icon/iconManager';
+import { Icons } from '../../assets/icons';
 export class VegaLeftNavHeaderRenderer extends VegaSlimmer {
   componentWillLoad() {
     this.hasHeaderSlot = !!this.host.querySelector('[slot="header-slot"]');
@@ -18,11 +20,14 @@ export class VegaLeftNavHeaderRenderer extends VegaSlimmer {
     const { title, subtitle } = this.headerConfig;
     return (h(Fragment, null,
       h("div", { class: "header-container" },
-        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (h("vega-icon", { icon: "HeartlandLogo" })),
+        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (h("vega-icon", { icon: "heartland-logo" })),
         subtitle && h("div", { class: "header-subtitle" }, subtitle)),
       h(VegaLeftNavSeparator, null)));
   }
 }
+(() => {
+  VegaIconManager.register(Icons);
+})();
 __decorate([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "host", void 0);