@heartlandone/vega-sandbox-pr-1507-b052ce5e9dcd599f1cf217963f17573ffcae0396 2.27.0

package/dist/cjs/vega-left-nav_5.cjs.entry.js

@@ -0,0 +1,1185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const placeholder = require('./placeholder-cb6d37ad.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-bb1eaebe.js');
+const effect = require('./effect-37695d3d.js');
+const featureFlagController = require('./feature-flag-controller-078da332.js');
+const internalIconManager = require('./internal-icon-manager-858baff1.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-23051df4.js');
+const breakpoints = require('./breakpoints-17d6c4c7.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-962eda7c.js');
+const vegaEventId = require('./vega-event-id-e40ac8f0.js');
+const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-6749808c.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
+const vegaInternalEventId = require('./vega-internal-event-id-c98e9a7d.js');
+const chevronDown = require('./chevron-down-ca2fa88e.js');
+const staticSubjectTitle = require('./static-subject-title-3599787e.js');
+const observer = require('./observer-f49483e8.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const ui = require('./ui-08f33116.js');
+const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
+const designToken = require('./design-token-6694bd5a.js');
+require('./index-5792390b.js');
+require('./icon-manager-5a2b67cf.js');
+require('./create-public-api-runtime-metrics-slimmer-7510221b.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./number-459031f7.js');
+require('./ui-32e69595.js');
+require('./breakpoints-ebde4837.js');
+require('./internal-vega-event-manager-49c87e82.js');
+require('./object-bbd4ed7f.js');
+require('./type-guard-0b7742ff.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./responsive-format-facade-7969c733.js');
+require('./pixel-98f2a10c.js');
+require('./state-background-color-formatter-4821b86e.js');
+
+var __decorate$i = (undefined && undefined.__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;
+};
+class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResizeObserverSlimmer {
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-resize-with-desktop}
+   */
+  constructor() {
+    /* eslint-disable jsdoc/require-jsdoc*/
+    super({
+      callback: /* istanbul ignore next */ () => {
+        this.updateMainContentUI(this.openState);
+      },
+    });
+    /* eslint-enable jsdoc/require-jsdoc*/
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-open-by-default}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    if (this.open === true) {
+      this.openState = 'open';
+      if (featureFlagController.FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD')) {
+        this.host.classList.add('disableAnimation');
+      }
+    }
+    else {
+      this.openState = 'close';
+    }
+  }
+  /** Call this method to toggle the left nav menu */
+  async toggle() {
+    this.openState === 'open' ? (this.openState = 'close') : (this.openState = 'open');
+  }
+  watchOpen(newOpenValue) {
+    if (newOpenValue) {
+      this.openState = 'open';
+    }
+    else {
+      this.openState = 'close';
+    }
+  }
+  watchOpenState(newState) {
+    this.updateMainContentUI(newState);
+    if (newState === 'open') {
+      this.open = true;
+    }
+    else {
+      this.open = false;
+      if (featureFlagController.FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD') &&
+        this.host.classList.contains('disableAnimation')) {
+        this.host.classList.remove('disableAnimation');
+      }
+    }
+    this.stateUpdateEventEmitter.emit(this.openState);
+  }
+  watchShowAsOverlay() {
+    this.updateMainContentUI(this.openState);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-vega-click-backdrop}
+   */
+  /* istanbul ignore next */
+  setOpenState(openState) {
+    this.openState = openState;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-resize-with-desktop}
+   */
+  /* istanbul ignore next */
+  updateMainContentUI(state) {
+    const bodyElement = document.querySelector('body');
+    const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
+    if (state === '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');
+      effect.executeAfterTransition(() => {
+        if (!this.open) {
+          this.host.style.display = 'none';
+        }
+      }, this.host);
+    }
+  }
+}
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "host", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaLeftNavOpenStateController.prototype, "open", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaLeftNavOpenStateController.prototype, "openState", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('toggle')
+], VegaLeftNavOpenStateController.prototype, "toggle", null);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpen')
+], VegaLeftNavOpenStateController.prototype, "watchOpen", null);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
+], VegaLeftNavOpenStateController.prototype, "watchOpenState", null);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavOpenStateController.prototype, "watchShowAsOverlay", null);
+
+const VegaLeftNavSeparator = () => {
+  return (index.h("div", { class: "header-footer-separator-container" },
+    index.h("div", { class: "header-footer-separator" })));
+};
+
+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,
+  },
+};
+
+var __decorate$h = (undefined && undefined.__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;
+};
+class VegaLeftNavHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  componentWillLoad() {
+    this.hasHeaderSlot = !!this.host.querySelector('[slot="header-slot"]');
+  }
+  render() {
+    return this.renderHeader();
+  }
+  renderHeader() {
+    const { title, subtitle } = this.headerConfig;
+    return (index.h(index.Fragment, null,
+      index.h("div", { class: "header-container" },
+        this.hasHeaderSlot ? (index.h("slot", { name: "header-slot" })) : title ? (index.h("div", { class: "header-title" }, title)) : (index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('heartland-logo') })),
+        subtitle && index.h("div", { class: "header-subtitle" }, subtitle)),
+      index.h(VegaLeftNavSeparator, null)));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register(Icons);
+})();
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavHeaderRenderer.prototype, "host", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);
+
+var __decorate$g = (undefined && undefined.__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;
+};
+class VegaLeftNavFooterRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  componentWillLoad() {
+    this.hasFooterSlot = !!this.host.querySelector('[slot="footer-slot"]');
+  }
+  render() {
+    return this.renderFooter();
+  }
+  renderFooter() {
+    return ((this.footnote || this.hasFooterSlot) && (index.h(index.Fragment, null,
+      index.h(VegaLeftNavSeparator, null),
+      index.h("div", { class: "footer-container" }, this.hasFooterSlot ? (index.h("slot", { name: "footer-slot" })) : (index.h("div", { class: "footer-footnote" }, this.footnote))))));
+  }
+}
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavFooterRenderer.prototype, "host", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavFooterRenderer.prototype, "footnote", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaLeftNavFooterRenderer.prototype, "componentWillLoad", null);
+
+var __decorate$f = (undefined && undefined.__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;
+};
+class VegaLeftNavZIndexController extends globalSlimmerRegistry.VegaSlimmer {
+  watchOpenState() {
+    this.updateZIndex();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-z-index}
+   */
+  /* istanbul ignore next */
+  updateZIndex() {
+    const backDrop = this.backdropController.getBackdrop();
+    if (this.openState == 'open') {
+      internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(backDrop, 'base');
+      internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.host, 'base');
+    }
+    else {
+      effect.executeAfterTransition(() => {
+        internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
+        internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.host, 'base');
+      }, this.host, 300);
+    }
+  }
+}
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavZIndexController.prototype, "host", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavZIndexController.prototype, "openState", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
+], VegaLeftNavZIndexController.prototype, "watchOpenState", null);
+
+var __decorate$e = (undefined && undefined.__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;
+};
+class VegaLeftNavBackdropController extends pageResizeObserverSlimmer.PageResizeObserverSlimmer {
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-resize-with-desktop}
+   */
+  constructor() {
+    /* eslint-disable jsdoc/require-jsdoc*/
+    super({
+      callback: /* istanbul ignore next */ () => {
+        this.updateBackdropUI(this.openState);
+      },
+    });
+    /* eslint-enable jsdoc/require-jsdoc*/
+  }
+  connectedCallback() {
+    this.backdrop = this.createBackdrop();
+  }
+  disconnectedCallback() {
+    this.backdrop && this.backdrop.remove();
+  }
+  watchOpenState(newState) {
+    this.updateBackdropUI(newState);
+  }
+  watchShowAsOverlay() {
+    this.updateBackdropUI(this.openState);
+  }
+  getBackdrop() {
+    return this.backdrop;
+  }
+  shouldShowBackdrop() {
+    return this.isLargeScreen() && !this.showAsOverlay ? false : true;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-e2e-vega-click-backdrop}
+   */
+  /* istanbul ignore next */
+  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.visible = false;
+      }
+      else {
+        this.backdrop.visible = true;
+      }
+    }
+    else {
+      this.backdrop.visible = false;
+    }
+  }
+  isLargeScreen() {
+    const currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
+  }
+}
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavBackdropController.prototype, "openState", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
+], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
+
+var __decorate$d = (undefined && undefined.__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;
+};
+class VegaNavListRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    var _a;
+    return (index.h("div", { class: "vega-nav-list-container" }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderListBySource() : index.h("slot", null)));
+  }
+  renderListBySource() {
+    return (index.h(index.Fragment, null, this.source.map((item) => {
+      return index.h(index.Fragment, null, this.renderLeftNavSourceItem(item));
+    })));
+  }
+  renderLeftNavSourceItem(item) {
+    if (item.type == 'section') {
+      return this.renderSection(item);
+    }
+    else if (item.type == 'group') {
+      return this.renderGroup(item);
+    }
+    else {
+      return this.renderLink(item);
+    }
+  }
+  renderSection(section) {
+    var _a;
+    return (index.h("vega-left-nav-section", { sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
+  }
+  renderGroup(item) {
+    var _a;
+    return (index.h("vega-left-nav-group", { key: item.name, icon: item.icon, label: item.name }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
+  }
+  renderLink(item) {
+    return (index.h("vega-left-nav-link", { key: item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
+  }
+}
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaNavListRenderer.prototype, "source", void 0);
+
+const vegaLeftNavContentCss = ".vega-left-nav-content{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:200ms;transition-property:margin}vega-left-nav.disableAnimation+.vega-left-nav-content.open{transition-duration:0s}.vega-left-nav-content.open{margin-left:300px}";
+
+var __decorate$c = (undefined && undefined.__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;
+};
+class VegaLeftNavAutoCollapseController extends globalSlimmerRegistry.VegaSlimmer {
+  registerMenuClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalLeftNavLinkClick, () => {
+      if (this.shouldAutoCollapse()) {
+        this.openStateController.setOpenState('close');
+      }
+    });
+  }
+  unregisterMenuClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalLeftNavLinkClick);
+  }
+  shouldAutoCollapse() {
+    return (this.autoCollapseOnOverlay &&
+      this.backdropController.shouldShowBackdrop() &&
+      this.openState === 'open');
+  }
+}
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "host", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "openState", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "autoCollapseOnOverlay", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaLeftNavAutoCollapseController.prototype, "registerMenuClickObserver", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaLeftNavAutoCollapseController.prototype, "unregisterMenuClickObserver", null);
+
+const VegaLeftNavRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the left nav',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !host.source || host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the left nav',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !!host.source && host.source.length > 0,
+  },
+];
+
+const vegaLeftNavCss = ":host{display:none;flex-direction:column;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:fixed;top:0px;right:0px;bottom:0px;left:0px;text-align:left;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);width:300px;transition-duration:200ms;transition-property:transform;transform:translateX(-320px)}:host(.open.disableAnimation){transition-duration:0s}:host(.open){transform:translateX(0px)}.header-container{padding-left:24px;padding-right:24px;padding-top:24px;padding-bottom:16px}.header-container .header-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.header-container .header-subtitle{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;margin-top:2px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.header-container .header-subtitle{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}.header-footer-separator-container{padding-left:12px;padding-right:12px}.header-footer-separator{width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}.vega-nav-list-container{flex-grow:1;padding-left:12px;padding-right:12px;padding-top:12px;overflow-y:auto;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-nav-list-container .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.footer-container{padding-top:16px;padding-bottom:16px;padding-left:24px;padding-right:24px}.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.footer-container .footer-footnote{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}body.vega-overflow-hidden{overflow:hidden}.header-container vega-icon{width:142px;height:26px}.header-container vega-icon[icon=\"v-internal-icon heartland-logo\"]+.header-subtitle{margin-top:8px}";
+
+var __decorate$b = (undefined && undefined.__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;
+};
+const VegaLeftNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaStateUpdate = index.createEvent(this, "vegaStateUpdate", 7);
+    this.stateUpdate = index.createEvent(this, "stateUpdate", 7);
+    this.globalSlimmers = {};
+    this.headerRenderer = new VegaLeftNavHeaderRenderer();
+    this.footerRenderer = new VegaLeftNavFooterRenderer();
+    this.openStateController = new VegaLeftNavOpenStateController();
+    this.backdropController = new VegaLeftNavBackdropController();
+    this.zIndexController = new VegaLeftNavZIndexController();
+    this.listRenderer = new VegaNavListRenderer();
+    this.vegaLeftNavAutoCollapseController = new VegaLeftNavAutoCollapseController();
+    this.stateUpdateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNav, vegaEventId.VegaStateUpdate);
+    this.componentGlobalStyleSlimmer = new componentGlobalStyleSlimmer.ComponentGlobalStyleSlimmer(vegaLeftNavContentCss);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaLeftNavRuntimeMetricsPayloadDefinition);
+    this.openState = 'close';
+    /**
+     * Determines whether the left navigation is expanded or collapsed.
+     *
+     * @vegaVersion 1.39.2
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.open = false;
+    /**
+     * Specifies the configuration options for the header within the left-nav.
+     *
+     * You can use this property to define a custom title and subtitle.
+     *
+     * @vegaVersion 1.31.0
+     */
+    this.headerConfig = {};
+    /**
+     * Provides additional information or context in the form of
+     *    a footnote in the left-nav footer.
+     *
+     * @vegaVersion 1.31.0
+     */
+    this.footnote = '';
+    /**
+     * Determines whether the left-nav should appear as an overlay,
+     *    accompanied by a backdrop that darkens the content on the page.
+     *
+     * This property has no effect on breakpoints smaller than the desktop size.
+     *
+     * Note: To use the backdrop-free feature when the left navigation is open, ensure the `show-as-overlay`
+     *    property is set to `false` within the `vega-left-nav` component. Additionally, enclose all content
+     *    within an element possessing the class `vega-left-nav-content` immediately following the
+     *    `vega-left-nav` component.
+     *
+     * @vegaVersion 1.33.0
+     */
+    this.showAsOverlay = true;
+    /** Determines whether the left navigation automatically collapses when the left navigation link is clicked in overlay mode. *
+     * @vegaVersion 2.7.0
+     */
+    this.autoCollapseOnOverlay = false;
+  }
+  watchOpenState() {
+  }
+  watchOpen() {
+  }
+  watchShowAsOverlay() {
+  }
+  /**
+   * Invoke this method to toggle the left-nav's open state.
+   *
+   * @vegaVersion 1.31.0
+   */
+  async toggle() {
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.headerRenderer.render(), this.listRenderer.render(), this.footerRenderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "openState": ["watchOpenState"],
+    "open": ["watchOpen"],
+    "showAsOverlay": ["watchShowAsOverlay"]
+  }; }
+};
+__decorate$b([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLeftNav.prototype, "globalSlimmers", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "headerRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "footerRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "openStateController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "backdropController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "zIndexController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "listRenderer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "vegaLeftNavAutoCollapseController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "stateUpdateEventEmitter", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate$b([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLeftNav.style = vegaLeftNavCss;
+
+var __decorate$a = (undefined && undefined.__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;
+};
+class VegaLeftNavGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleClick = (e) => {
+      const currentTarget = e.currentTarget;
+      if (currentTarget && currentTarget.dataset.root === '$1') {
+        e.preventDefault();
+        this.groupContainer.classList.toggle('open');
+        this.groupClickEventEmitter.emit(this.groupContainer.classList.contains('open') ? 'EXPAND' : 'COLLAPSE');
+      }
+    };
+  }
+  /**
+   * Get the map of the row form refs
+   *
+   * @returns {Map} The map of row form refs
+   */
+  getGroupContainer() {
+    return this.groupContainer;
+  }
+  render() {
+    return (index.h("div", { class: "vega-li-main", ref: (ref) => (this.groupContainer = ref) },
+      index.h("a", { href: `#${this.label}`, role: 'button', tabIndex: 0, "data-root": "$1", onClick: this.handleClick, "aria-label": this.label || 'No label defined' },
+        this.icon && (index.h("div", { class: "vega-links-icon" },
+          index.h("div", { class: "prefix-icon" },
+            index.h("vega-icon", { icon: this.icon, size: "size-16" })))),
+        index.h("span", { class: "vega-links-name" }, this.label),
+        index.h("div", { class: "suffix-icons" },
+          index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down'), size: "size-12" }),
+          index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-up'), size: "size-12" }))),
+      index.h("div", { class: "vega-nav-list-sub" },
+        index.h("slot", null))));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'chevron-up': chevronDown.chevronUp,
+    'chevron-down': chevronDown.chevronDown,
+  });
+})();
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "icon", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "label", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "groupClickEventEmitter", void 0);
+
+var __decorate$9 = (undefined && undefined.__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;
+};
+/**
+ * The code is defining an abstract class called `VegaNavObserverSlimmer` that extends the `VegaSlimmer` class.
+ */
+class VegaNavObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-link-e2e-disconnected}
+   * @see{module:vega-left-nav-group-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  /**
+   * Unregister the observer with subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  /**
+   * The function creates an observer to observe the subject of LEFT_NAV_LINK_SELECTED_TOPIC.
+   */
+  componentWillLoad() {
+    this.observer = new observer.Observer(this.isAcceptableNavListObserver.bind(this), this.observerListener.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  /**
+   * The function checks if the input is an HTMLElement and if it has the same parent element with the host element.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  isAcceptableNavListObserver(input) {
+    return (input instanceof HTMLElement &&
+      ui.findParent(this.host, '.vega-nav-list-container') ===
+        ui.findParent(input, '.vega-nav-list-container'));
+  }
+}
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaNavObserverSlimmer.prototype, "disconnectedCallback", null);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaNavObserverSlimmer.prototype, "componentWillLoad", null);
+
+var __decorate$8 = (undefined && undefined.__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;
+};
+class VegaLeftNavGroupController extends VegaNavObserverSlimmer {
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-group-observer-with-selected}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    const hasSelectedLinkItem = this.host.contains(castInput);
+    if (hasSelectedLinkItem) {
+      this.renderer.getGroupContainer().classList.add('open');
+    }
+    else {
+      this.renderer.getGroupContainer().classList.remove('open');
+    }
+  }
+}
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupController.prototype, "host", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavGroupController.prototype, "renderer", void 0);
+
+const vegaLeftNavGroupCss = ":host{display:block}.suffix-icons{padding-left:8px}.suffix-icons vega-icon,.vega-li-main.open>a>.suffix-icons vega-icon:first-of-type{display:none}.suffix-icons vega-icon:first-of-type,.vega-li-main.open>a>.suffix-icons vega-icon:last-of-type{display:inline-flex}.vega-nav-list-sub{display:none}.vega-li-main.open>.vega-nav-list-sub{display:block}.vega-li-main>a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none;outline:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-li-main>a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}.vega-li-main>a:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}.vega-li-main>a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}.vega-li-main>a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}.vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}.vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}::slotted(vega-left-nav-group){padding-left:32px}::slotted(vega-left-nav-link){padding-left:32px}";
+
+var __decorate$7 = (undefined && undefined.__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;
+};
+const VegaLeftNavGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaGroupClick = index.createEvent(this, "vegaGroupClick", 7);
+    this.groupClick = index.createEvent(this, "groupClick", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaLeftNavGroupRenderer();
+    this.controller = new VegaLeftNavGroupController();
+    this.groupClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavGroup, vegaEventId.VegaGroupClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    /** label attached to the left nav group items **
+     * @vegaVersion 1.31.0
+     */
+    this.label = '';
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(this.renderer.render(), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$7([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLeftNavGroup.prototype, "globalSlimmers", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "renderer", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "controller", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "groupClickEventEmitter", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLeftNavGroup.style = vegaLeftNavGroupCss;
+
+var __decorate$6 = (undefined && undefined.__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;
+};
+class VegaLeftNavLinkRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-left-nav-link-click-event}
+     */
+    /* istanbul ignore next */
+    this.handleClick = () => {
+      if (!this.selected) {
+        this.controller.setSelected(true);
+      }
+      this.menuClickEventEmitter.emit();
+      this.notifyVegaLeftNav();
+    };
+  }
+  render() {
+    var _a;
+    const url = this.url || 'javascript:void(0);';
+    const classList = this.selected === true ? 'selected' : '';
+    return (index.h(index.Host, { class: classList },
+      index.h("a", { href: url, onClick: this.handleClick },
+        this.icon && (index.h("div", { class: "vega-links-icon" },
+          index.h("div", { class: "prefix-icon" },
+            index.h("vega-icon", { icon: this.icon, size: "size-16" })))),
+        index.h("span", { class: "vega-links-name" },
+          index.h("slot", null)),
+        index.h("div", { class: "vega-counter-badge" },
+          index.h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: (_a = this.counterBadge) === null || _a === void 0 ? void 0 : _a.color })))));
+  }
+  notifyVegaLeftNav() {
+    const vegaLeftNav = ui.findParent(this.host, 'vega-left-nav');
+    if (vegaLeftNav) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(vegaLeftNav, vegaInternalEventId.VegaInternalLeftNavLinkClick), {
+        host: this.host,
+      });
+    }
+  }
+}
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "host", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "selected", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "url", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "counterBadge", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "icon", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "menuClickEventEmitter", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "controller", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+
+var __decorate$5 = (undefined && undefined.__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;
+};
+class VegaLeftNavLinkController extends VegaNavObserverSlimmer {
+  componentDidRender() {
+    if (this.selected) {
+      changeManager.ChangeManager.notify(staticSubjectTitle.LEFT_NAV_LINK_SELECTED_TOPIC, this.host);
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-link-observer-with-click}
+   */
+  /* istanbul ignore next */
+  setSelected(selected) {
+    this.selected = selected;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-left-nav-link-observer-with-click}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    if (castInput !== this.host) {
+      this.setSelected(false);
+    }
+  }
+}
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavLinkController.prototype, "host", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaLeftNavLinkController.prototype, "selected", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], VegaLeftNavLinkController.prototype, "componentDidRender", null);
+
+const vegaLeftNavLinkCss = ":host{display:block}:host(.selected) .vega-links-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.selected) a{background-color:rgba(0, 151, 255, 0.3)}:host .vega-counter-badge{position:relative;width:32px;height:20px}:host vega-counter-badge{position:absolute;top:10px;left:18px}:host a{display:flex;align-items:center;overflow:hidden;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px;cursor:pointer;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}:host a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}:host .vega-links-icon{color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-right:12px;box-sizing:border-box}:host .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}:host(:not(.selected)) a:hover{background-color:rgba(var(--v-bg-tertiary, 240, 243, 247, 1))}:host>a{outline:none}:host>a:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}";
+
+var __decorate$4 = (undefined && undefined.__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;
+};
+const VegaLeftNavLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaMenuClick = index.createEvent(this, "vegaMenuClick", 7);
+    this.menuClick = index.createEvent(this, "menuClick", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaLeftNavLinkRenderer();
+    this.controller = new VegaLeftNavLinkController();
+    this.menuClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavLink, vegaEventId.VegaMenuClick);
+    this.deprecatedPropertySlimmer = deprecatedPropertySlimmer.createDeprecatedPropertySlimmer(VegaLeftNavLink, 'counterBadge.count', 'counterBadge.counter', undefined);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    /** boolean indicating if current link item is selected **
+     * @vegaVersion 1.31.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.selected = false;
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(this.renderer.render(), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$4([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLeftNavLink.prototype, "globalSlimmers", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "renderer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "controller", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "menuClickEventEmitter", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLeftNavLink.style = vegaLeftNavLinkCss;
+
+var __decorate$3 = (undefined && undefined.__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;
+};
+class VegaLeftNavSectionRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    return (index.h(index.Host, null,
+      this.renderSectionHeader(),
+      index.h("slot", null),
+      this.renderListSeparator()));
+  }
+  renderListSeparator() {
+    return (index.h("div", { class: "list-separator-container" },
+      index.h("div", { class: "list-separator" })));
+  }
+  renderSectionHeader() {
+    var _a;
+    return (((_a = this.sectionHeader) === null || _a === void 0 ? void 0 : _a.title) && (index.h("div", { class: "section-header" },
+      index.h("div", { class: "section-header-title" }, this.sectionHeader.title),
+      this.sectionHeader.actionTitle && (index.h("vega-button-link", { label: this.sectionHeader.actionTitle, size: "small", link: this.sectionHeader.actionLink, eventful: this.sectionHeader.actionEventful, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+            this.actionClickEventEmitter.emit();
+          });
+        } })))));
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavSectionRenderer.prototype, "sectionHeader", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavSectionRenderer.prototype, "actionClickEventEmitter", void 0);
+
+const vegaLeftNavSectionCss = ":host{display:block}:host(:last-child) .list-separator-container{display:none}.list-separator-container{padding-left:12px;padding-right:12px;padding-top:20px;padding-bottom:20px}.list-separator{width:100%;height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1))}.section-header{display:flex;align-items:center;gap:12px;padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;border-radius:4px}.section-header>.section-header-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;flex:1 1 0%;overflow:hidden;text-transform:uppercase}@media screen and (min-width: 768px) and (max-width: 1023px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.section-header>.section-header-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}.section-header>vega-button-link{flex-basis:0}";
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+const VegaLeftNavSection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaActionClick = index.createEvent(this, "vegaActionClick", 7);
+    this.actionClick = index.createEvent(this, "actionClick", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaLeftNavSectionRenderer();
+    this.actionClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaLeftNavSection, vegaEventId.VegaActionClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(this.renderer.render(), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$2([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaLeftNavSection.prototype, "globalSlimmers", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavSection.prototype, "renderer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavSection.prototype, "actionClickEventEmitter", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNavSection.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaLeftNavSection.style = vegaLeftNavSectionCss;
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+class VegaNavCardMaxHeightController extends pageResizeObserverSlimmer.PageResizeObserverSlimmer {
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-nav-card-max-height-config-e2e}
+   */
+  constructor() {
+    super({
+      callback: /* istanbul ignore next */ () => {
+        this.updateMaxHeight();
+      },
+    });
+  }
+  watchMaxHeight() {
+    this.updateMaxHeight();
+  }
+  updateMaxHeight() {
+    const maxHeight = designToken.formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight');
+    this.currentMaxHeight = maxHeight;
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaNavCardMaxHeightController.prototype, "maxHeight", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaNavCardMaxHeightController.prototype, "currentMaxHeight", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchMaxHeight')
+], VegaNavCardMaxHeightController.prototype, "watchMaxHeight", null);
+
+const VegaNavCardRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !host.source || host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !!host.source && host.source.length > 0,
+  },
+];
+
+const vegaNavCardCss = ":host{display:block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:12px;box-shadow: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));text-align:left;overflow-y:auto;width:300px}.vega-nav-list-container{padding:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-nav-list-container .vega-links-icon .prefix-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px}a .vega-links-name{flex:1 1 0%;overflow:hidden;overflow-wrap:break-word}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaNavCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.listRenderer = new VegaNavListRenderer();
+    this.maxHeightController = new VegaNavCardMaxHeightController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaNavCardRuntimeMetricsPayloadDefinition);
+  }
+  watchMaxHeight() {
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, { style: {
+        maxHeight: this.currentMaxHeight,
+      } }, this.listRenderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "maxHeight": ["watchMaxHeight"]
+  }; }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaNavCard.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaNavCard.prototype, "listRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaNavCard.prototype, "maxHeightController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaNavCard.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaNavCard.style = vegaNavCardCss;
+
+exports.vega_left_nav = VegaLeftNav;
+exports.vega_left_nav_group = VegaLeftNavGroup;
+exports.vega_left_nav_link = VegaLeftNavLink;
+exports.vega_left_nav_section = VegaLeftNavSection;
+exports.vega_nav_card = VegaNavCard;