@heartlandone/vega-sandbox-pr-1571-faec173de61a4f0c4dcd71d9a960d24d53c03274 2.29.0

package/dist/cjs/vega-sidenav_3.cjs.entry.js

@@ -0,0 +1,1006 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const array = require('./array-5adef7b2.js');
+const component = require('./component-73a88c4e.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-5cc88124.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-1ee24991.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
+const breakpoints = require('./breakpoints-7e2dff90.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const internalIconManager = require('./internal-icon-manager-2ff58050.js');
+const iconManager = require('./icon-manager-3787af39.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-c729699e.js');
+const effect = require('./effect-37695d3d.js');
+const responsiveFormatFacade = require('./responsive-format-facade-ad2f67bf.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-a8cf1874.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-2e41340d.js');
+const vegaInternalEventId = require('./vega-internal-event-id-99cc22e1.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d409d0ac.js');
+const vegaEventId = require('./vega-event-id-e40ac8f0.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const observer = require('./observer-f49483e8.js');
+const staticSubjectTitle = require('./static-subject-title-471e1793.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-c1332b19.js');
+const ui = require('./ui-08f33116.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-4d9a8e67.js');
+require('./number-4816603d.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./ui-32e69595.js');
+require('./type-guard-a07b353b.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./pixel-98f2a10c.js');
+
+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;
+};
+/** Manages the visibility and z-index of a backdrop element for a side navigation menu. */
+class VegaSidenavBackdropController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.backdropRef = null;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * create or remove the sidenav backdrop element.
+   *
+   * @param {ResponsiveBehavior} responsiveBehavior The sidenav config
+   */
+  updateBackdropAvailability(responsiveBehavior) {
+    if (this.openState === 'open' && (responsiveBehavior === null || responsiveBehavior === void 0 ? void 0 : responsiveBehavior.showBackdrop)) {
+      this.append();
+    }
+    else {
+      this.removeZIndex('base');
+      this.remove();
+    }
+  }
+  /**
+   * The function sets the z-index of an element using a specified level.
+   *
+   * @param {ZIndexLevelType} [level] - The zindex level
+   */
+  setZIndex(level) {
+    internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.backdropRef, level);
+  }
+  /**
+   * The function removes a specified Z index level from a backdrop element using an internal Vega Z index manager.
+   *
+   * @param {ZIndexLevelType} [level] - The zindex level
+   */
+  removeZIndex(level) {
+    internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.backdropRef, level);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Appends a backdrop element to the body of the document and sets its visibility based on a breakpoint.
+   */
+  append() {
+    let backdrop = document.querySelector(`vega-backdrop.${VegaSidenavBackdropController.backdropClassName}`);
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add(VegaSidenavBackdropController.backdropClassName);
+      document.querySelector('body').append(backdrop);
+    }
+    backdrop.visible = this.getBackdropVisibleByBreakpoint();
+    this.backdropRef = backdrop;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Sets the visibility of the `backdropRef` to false.
+   */
+  remove() {
+    if (this.backdropRef) {
+      this.backdropRef.remove();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Determines if the backdrop is visible based on the current breakpoint.
+   *
+   * @returns {boolean} A boolean value based on the current breakpoint. It returns `true` if the current breakpoint is either 'S' or 'M', and `false` otherwise.
+   */
+  getBackdropVisibleByBreakpoint() {
+    const breakpoint = breakpoints.getCurrentBreakpoint();
+    return breakpoint === 'S' || breakpoint === 'M' ? true : false;
+  }
+}
+VegaSidenavBackdropController.backdropClassName = 'vega-sidenav-backdrop';
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavBackdropController.prototype, "openState", void 0);
+
+const sidenavChevronRight = {
+  icon: `<svg width="26" height="43" viewBox="0 0 26 43" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7444 22.3536L10.6711 28.4268C10.3782 28.7197 9.90333 28.7197 9.61045 28.4268L8.90211 27.7184C8.6097 27.426 8.60914 26.9521 8.90086 26.659L13.714 21.8232L8.90086 16.9874C8.60914 16.6943 8.6097 16.2204 8.90211 15.928L9.61045 15.2197C9.90336 14.9268 10.3782 14.9268 10.6711 15.2197L16.7443 21.2929C17.0372 21.5858 17.0372 22.0606 16.7444 22.3536Z" fill="currentColor"/></svg>`,
+  autoSize: true,
+};
+
+const sidenavToggleButtonBg = {
+  icon: `<svg width="26" height="43" viewBox="0 0 26 43" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 9.79086 1.79086 8 4 8H8V0L12.4853 4.48528C14.7357 6.73572 17.788 8 20.9706 8H22C24.2091 8 26 9.79086 26 12V31C26 33.2091 24.2091 35 22 35H20.9706C17.788 35 14.7357 36.2643 12.4853 38.5147L8 43V35H4C1.79086 35 0 33.2091 0 31V12Z" fill="currentColor"/></svg>`,
+};
+
+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;
+};
+/** Renders a collapsible button for a sidebar with specific functionality and styling. */
+class VegaSidenavCollapseButtonRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.collapseButtonRef = null;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+     * @see{module:vega-sidenav-desktop-click-icon-change-position}
+     */
+    /* istanbul ignore next */
+    this.handleClickSidebarIcon = async () => {
+      await this.host.toggle();
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the visibility of the collapse button base on the property canCollapseSidenav
+   *
+   * @param {boolean} canCollapseSidenav The component could collapse or not
+   */
+  updateHandlerIconAvailability(canCollapseSidenav) {
+    if (this.collapseButtonRef) {
+      if (!canCollapseSidenav) {
+        this.collapseButtonRef.classList.add('disable-collapse');
+      }
+      else {
+        this.collapseButtonRef.classList.remove('disable-collapse');
+      }
+    }
+  }
+  /**
+   * Render an action button, the button has a special background and chevron left or right icon.
+   *
+   * @returns {HTMLElement} The button element
+   */
+  render() {
+    const maskImageStyle = this.getButtonMaskImage();
+    return (index.h("i", { role: 'button', onClick: this.handleClickSidebarIcon, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), class: "vega-handler-icon", tabIndex: 0, "aria-label": "Handle Sidebar Icon", ref: (node) => (this.collapseButtonRef = node) },
+      index.h("style", null, maskImageStyle),
+      index.h("vega-icon", { size: "size-16", icon: internalIconManager.VegaInternalIconManager.getIconKey('sidenav-chevron-right') })));
+  }
+  /**
+   * Generating a CSS `mask-image` property value using an SVG icon retrieved from the `VegaIconManager` and`VegaInternalIconManager`.
+   *
+   * @returns {string} The svg content string after encode
+   */
+  getButtonMaskImage() {
+    const svg = iconManager.VegaIconManager.getIcon(internalIconManager.VegaInternalIconManager.getIconKey('sidenav-toggle-button-bg')).icon;
+    const svgUrl = `url(data:image/svg+xml,${globalThis.encodeURIComponent(svg)})`;
+    return `.vega-handler-icon{-webkit-mask-image:${svgUrl};mask-image:${svgUrl}}`;
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'sidenav-chevron-right': sidenavChevronRight,
+    'sidenav-toggle-button-bg': sidenavToggleButtonBg,
+  });
+})();
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavCollapseButtonRenderer.prototype, "host", 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;
+};
+/** Manages the open status of a side navigation component, handling toggling, updating status based on screen size, and other related functionalities. */
+class VegaSidenavOpenStatusController extends pageResizeObserverSlimmer.PageResizeObserverSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   */
+  /**
+   * Register the callback function to page resize observer slimmer
+   */
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => {
+        this.responsiveBehavior = this.getSidenavResponsiveBehavior();
+        this.backdropController.updateBackdropAvailability(this.responsiveBehavior);
+        this.updateOverflowAvailability();
+        this.updateStatusOpenByDefault(true);
+        this.collapseButtonRenderer.updateHandlerIconAvailability(this.canCollapseSidenav());
+      },
+    });
+  }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
+   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggle the open state of a side navigation based on certain conditions.
+   */
+  toggleSidenav() {
+    if (this.canCollapseSidenav()) {
+      switch (this.openState) {
+        case 'open':
+          this.setSideNavOpenStatus('clickClose');
+          break;
+        case 'close':
+          this.setSideNavOpenStatus('clickOpen');
+          break;
+        case 'hoverOpen':
+          this.setSideNavOpenStatus('hoverClose');
+          break;
+      }
+    }
+  }
+  /**
+   * The function `setSidenavRef` sets the sidebar reference.
+   *
+   * @param {HTMLDivElement} sidebarRef - A reference to the sidebar element in the HTML document.
+   */
+  setSidenavRef(sidebarRef) {
+    this.sidebar = sidebarRef;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggles the open/close status of a side navigation based on different input flags.
+   *
+   * @param {'hoverOpen' | 'hoverClose' | 'clickOpen' | 'clickClose'} statusFlag - A string literal type that can have one of the
+   * following values: 'hoverOpen', 'hoverClose', 'clickOpen', or 'clickClose'.
+   */
+  setSideNavOpenStatus(statusFlag) {
+    let updated = false;
+    switch (statusFlag) {
+      case 'clickOpen':
+        if (this.openState === 'close') {
+          this.openState = 'open';
+          this.host.classList.add('open');
+          this.sidebar.classList.add('open');
+          updated = true;
+        }
+        break;
+      case 'clickClose':
+        if (this.openState === 'hoverOpen' || this.openState === 'open') {
+          this.openState = 'close';
+          this.host.classList.remove('open');
+          this.sidebar.classList.remove('open');
+          updated = true;
+        }
+        break;
+      case 'hoverOpen':
+        if (this.openState === 'close') {
+          this.openState = 'hoverOpen';
+          this.host.classList.add('open');
+          this.sidebar.classList.add('open');
+          updated = true;
+        }
+        break;
+      case 'hoverClose':
+        if (this.openState === 'hoverOpen') {
+          this.openState = 'close';
+          this.host.classList.remove('open');
+          this.sidebar.classList.remove('open');
+          updated = true;
+        }
+        break;
+    }
+    if (updated) {
+      this.backdropController.updateBackdropAvailability(this.responsiveBehavior);
+      this.updateOverflowAvailability();
+      this.updateZIndex();
+      this.stateUpdateEmitter.emit(this.openState);
+    }
+  }
+  /**
+   * Update the sidenav status when component did load
+   */
+  initOpenStatus() {
+    this.responsiveBehavior = this.getSidenavResponsiveBehavior();
+    this.updateStatusOpenByDefault();
+  }
+  /**
+   * Update sidenav status when the property value change
+   */
+  updateOpenStatus() {
+    this.updateStatusOpenByDefault();
+    this.collapseButtonRenderer.updateHandlerIconAvailability(this.canCollapseSidenav());
+  }
+  /*
+   * It will hide the sidenav when clicking the link in the sidenav on mobile terminal default.
+   * If link set showSideBarOnClickLink is true that will don't hide the sidenav..
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-handler-mobile}
+   * @see{module:vega-sidenav-e2e-vega-click-handler-not-close-sidenav-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Add an observer to a DOM node for a specific event and handles the event payload to determine whether to close the sidebar.
+   */
+  registerSidenavLinkClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalSidenavLinkClick, (payload) => {
+      // payload.detail = VegaSidenavLink.showSideBarOnClickLink
+      if (!this.responsiveBehavior.showSideBarOnClickLink && !payload.detail) {
+        this.setSideNavOpenStatus('clickClose');
+      }
+    });
+  }
+  /**
+   * Remove the observer when the component remove from page
+   */
+  unregisterSidenavLinkClickObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalSidenavLinkClick);
+  }
+  /*
+   * Please refer to the documentation for this part of the logic: vega-stencil/docs/sidenav-responsive-support-spec.md
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   */
+  /* istanbul ignore next */
+  /**
+   * Returns different responsive behaviors based on the screen size.
+   *
+   * @returns {ResponsiveBehavior} Object
+   */
+  getSidenavResponsiveBehavior() {
+    if (this.isLargeScreen()) {
+      return {
+        showSideBar: true,
+        showBackdrop: false,
+        canBeScrolled: true,
+        showSideBarOnClickLink: true,
+      };
+    }
+    else {
+      return {
+        showSideBar: false,
+        showBackdrop: true,
+        canBeScrolled: false,
+        showSideBarOnClickLink: false,
+      };
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-z-index}
+   * @see{module:vega-sidenav-e2e-z-index-in-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set or remove the sidenav and backdrop style z-index
+   */
+  updateZIndex() {
+    if (['hoverOpen', 'open'].includes(this.openState)) {
+      this.backdropController.setZIndex('base');
+      internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.sidebar, 'base');
+    }
+    else {
+      effect.executeAfterTransition(() => {
+        this.backdropController.removeZIndex('base');
+        internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.sidebar, 'base');
+      }, this.sidebar, 300);
+    }
+  }
+  /**
+   * Determines whether the sidenav can be collapsed based on the current open by default setting and screen size.
+   *
+   * @returns {boolean} The method `canCollapseSidenav()` returns a boolean value.
+   */
+  canCollapseSidenav() {
+    const openByDefault = this.getCurrentOpenByDefault();
+    return openByDefault !== 'disableCollapse' || !this.isLargeScreen();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-hidden-overflow-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the body style overflow
+   */
+  updateOverflowAvailability() {
+    var _a;
+    const bodyElement = document.querySelector('body');
+    if (!((_a = this.responsiveBehavior) === null || _a === void 0 ? void 0 : _a.canBeScrolled) && this.openState === 'open') {
+      bodyElement.style['overflow'] = 'hidden';
+    }
+    else {
+      bodyElement.style['overflow'] = null;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
+   */
+  /* istanbul ignore next */
+  /**
+   *
+   *
+   * @param triggerByResize
+   */
+  /**
+   * Determines whether to open or close a side navigation based on certain conditions.
+   *
+   * @param {boolean} [triggerByResize=false] - The `updateStatusOpenByDefault` method was triggered by a resize event
+   */
+  updateStatusOpenByDefault(triggerByResize = false) {
+    const openByDefault = this.getCurrentOpenByDefault();
+    const canCollapseSidenav = this.canCollapseSidenav();
+    if (!triggerByResize) {
+      if (openByDefault == 'open' || !canCollapseSidenav) {
+        this.setSideNavOpenStatus('clickOpen');
+      }
+      else if (openByDefault == 'close' ||
+        (openByDefault == 'disableCollapse' && canCollapseSidenav)) {
+        this.setSideNavOpenStatus('clickClose');
+      }
+    }
+    else if (!canCollapseSidenav) {
+      this.setSideNavOpenStatus('clickOpen');
+    }
+  }
+  /**
+   * Returns true if the current breakpoint is 'L' or 'XL'.
+   *
+   * @returns {boolean} Determine if the screen is considered large.
+   */
+  isLargeScreen() {
+    const currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
+  }
+  /**
+   * TReturns the current openByDefault value formatted using ResponsiveFormatFacade.
+   *
+   * @param {ResponsiveType<OpenByDefaultType>} input - parameter
+   * @returns {OpenByDefaultType} The formatted value of the `input` parameter, which is of type `OpenByDefaultType`.
+   */
+  getCurrentOpenByDefault(input = this.openByDefault) {
+    return responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(input);
+  }
+}
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaSidenavOpenStatusController.prototype, "openState", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "openByDefault", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "host", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "stateUpdateEmitter", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "backdropController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "collapseButtonRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaSidenavOpenStatusController.prototype, "initOpenStatus", null);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpenByDefaultChange')
+], VegaSidenavOpenStatusController.prototype, "updateOpenStatus", null);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaSidenavOpenStatusController.prototype, "registerSidenavLinkClickObserver", null);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaSidenavOpenStatusController.prototype, "unregisterSidenavLinkClickObserver", null);
+
+const vegaSidenavCss = ":host{height:100%;width:0px;min-height:100vh;display:flex;align-items:stretch;text-align:left;top:0px;right:0px;bottom:0px;left:0px}:host .vega-sidebar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;box-sizing:border-box;position:relative;padding-left:0px;padding-right:0px;display:flex;align-items:stretch;width:0px;transition-duration:300ms}:host .vega-sidebar .header-placeholder{margin-top:24px}:host .vega-sidebar .vega-sidebar-content-container{width:100%;overflow:hidden;display:flex;flex-direction:column}:host .vega-sidebar .vega-sidebar-content-container>.vega-nav-list{padding-left:8px;padding-right:8px}:host .vega-sidebar .vega-nav-list{padding:0px;margin:0px;flex:1 1 0%;list-style-type:none}:host .vega-sidebar .vega-nav-list::-webkit-scrollbar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1));width:4px}:host .vega-sidebar .vega-nav-list::-webkit-scrollbar-thumb{background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1));border-radius:9999px}:host .vega-sidebar .vega-sidebar-header{position:relative}:host .vega-sidebar .vega-sidebar-header>div{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms}:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-collapse-container{display:flex;justify-content:center;align-items:center;flex-shrink:0;height:56px;position:absolute;pointer-events:none;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));display:none;padding-top:24px;padding-left:12px;padding-right:12px;padding-bottom:32px;top:0;left:0;opacity:1}@media (min-width: 1024px){:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-collapse-container{display:flex}}:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-collapse-container image{max-width:100%;max-height:48px}:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-expand-container{color:rgba(var(--v-text-white, 252, 252, 252, 1));overflow:hidden;box-sizing:border-box;padding-left:24px;padding-right:24px;padding-top:24px;padding-bottom:32px;width:100%;opacity:0}:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-expand-container>vega-icon{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-expand-container img{max-height:80px;max-width:100%}:host .vega-sidebar .vega-sidebar-header .vega-sidebar-headline{overflow-wrap:break-word;font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px;margin-top:8px;opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;max-height:25px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-sidebar .vega-sidebar-header .vega-sidebar-headline{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){:host .vega-sidebar .vega-sidebar-header .vega-sidebar-headline{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){:host .vega-sidebar .vega-sidebar-header .vega-sidebar-headline{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host .vega-sidebar .vega-handler-icon{cursor:pointer;position:absolute;background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));right:-18px;-webkit-mask-size:cover;mask-size:cover;width:26px;height:43px;top:24px}@media (min-width: 320px){:host .vega-sidebar .vega-handler-icon{display:none}}@media (min-width: 1024px){:host .vega-sidebar .vega-handler-icon{display:block}}:host .vega-sidebar .vega-handler-icon vega-icon{cursor:pointer;position:absolute;display:block;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));left:0px;top:0px;width:100%;height:100%;transform-origin:center}:host .vega-sidebar .vega-nav-footer{padding-top:16px;padding-bottom:16px;padding-left:24px;padding-right:24px}:host .vega-sidebar .vega-nav-footer .vega-nav-footnote{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-sidebar .vega-nav-footer .vega-nav-footnote{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-sidebar .vega-nav-footer .vega-nav-footnote{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-sidebar .vega-nav-footer .vega-nav-footnote{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media (min-width: 1024px){:host{width:72px}:host .vega-sidebar{width:72px}}:host(.open){width:auto}:host(.open) .vega-sidebar{top:0px;right:0px;bottom:0px;left:0px;position:fixed;width:300px}@media (min-width: 768px){:host(.open) .vega-sidebar{width:240px}}@media (min-width: 1024px){:host(.open) .vega-sidebar{position:relative}}:host(.open) .vega-sidebar .vega-nav-list{overflow-y:auto;overflow-x:hidden}@media (min-width: 320px){:host(.open) .vega-sidebar .vega-handler-icon{display:block}}:host(.open) .vega-sidebar .vega-handler-icon vega-icon{transform:rotate(180deg)}@media (min-width: 320px){:host(.open) .vega-sidebar .vega-handler-icon.disable-collapse{display:block}}@media (min-width: 1024px){:host(.open) .vega-sidebar .vega-handler-icon.disable-collapse{display:none}}:host(.open) .vega-sidebar .vega-sidebar-header .vega-sidebar-headline{opacity:1;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-delay:100ms}:host(.open) .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-expand-container{opacity:1}:host(.open) .vega-sidebar .vega-sidebar-header>div.vega-sidebar-header-collapse-container{opacity:0}:host(.open) .vega-sidebar .vega-nav-footer .vega-nav-footnote{opacity:1;transition-delay:100ms}";
+
+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 VegaSidenav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaStateUpdate = index.createEvent(this, "vegaStateUpdate", 7);
+    this.stateUpdate = index.createEvent(this, "stateUpdate", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.openStateNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaSidenav, 'openState', 'watchOpenState');
+    this.backdropController = new VegaSidenavBackdropController();
+    this.collapseButtonRenderer = new VegaSidenavCollapseButtonRenderer();
+    this.openStatusController = new VegaSidenavOpenStatusController();
+    this.stateUpdateEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaSidenav, vegaEventId.VegaStateUpdate);
+    this.openState = 'close';
+    /**
+     * Provides additional information or context in the form of
+     *    a footnote in the side nav footer.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.footnote = '';
+    /**
+     * Specifies the configuration for the header of the side nav,
+     *    allowing customization of the logo and headline.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.headerConfig = {};
+    /**
+     * Specifies the default open behavior for the side nav across
+     *    different screen sizes and disables collapse for
+     *    large screens.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.openByDefault = 'close';
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+     */
+    /* istanbul ignore next */
+    this.attachMouseEventToContent = () => {
+      this.content.addEventListener('mouseenter', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverOpen');
+      });
+      this.content.addEventListener('mouseleave', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverClose');
+      });
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-with-source-with-child}
+     * @see{module:vega-sidenav-e2e-with-source-without-child}
+     */
+    /* istanbul ignore next */
+    this.renderSideBarListBySource = () => {
+      var _a;
+      return (index.h(index.Fragment, null, (_a = this.source) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => {
+        if (item === null || item === void 0 ? void 0 : item.children) {
+          return (index.h("vega-sidenav-group", { key: index$1, icon: item.icon || 'globe', label: item.name }, item.children.map((child, childIndex) => (index.h("vega-sidenav-link", { key: `${index$1}_${childIndex}`, url: child.url, selected: child.selected }, child.name)))));
+        }
+        else {
+          return (index.h("vega-sidenav-link", { key: index$1, icon: item.icon || 'globe', url: item.url, selected: item.selected }, item.name));
+        }
+      })));
+    };
+  }
+  /**
+   * The method to used notify the sub state the parent state value changed
+   */
+  watchOpenState() {
+  }
+  /**
+   * clear inner content in `div.vega-nav-list` if previousSource is empty.
+   * to avoid untracked sidenav items (render by slot) keeping existed while source updated.
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   */
+  /* istanbul ignore next */
+  watchSourceChange(currentSource, previousSource) {
+    if (currentSource) {
+      this.validSource();
+    }
+    if (!(previousSource === null || previousSource === void 0 ? void 0 : previousSource.length)) {
+      this.host
+        .querySelectorAll('vega-sidenav-link, vega-sidenav-group')
+        .forEach((el) => el.remove());
+    }
+  }
+  watchOpenByDefaultChange() {
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  componentWillLoad() {
+    this.source && this.validSource();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    this.attachMouseEventToContent();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  collapseSidenavByBackDropClick(e) {
+    const target = e.target;
+    if (target.classList.contains(VegaSidenavBackdropController.backdropClassName)) {
+      this.openStatusController.setSideNavOpenStatus('clickClose');
+    }
+  }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
+   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Invoke this method to toggle the side navigation menu.
+   *
+   * @vegaVersion 2.29.0
+   */
+  async toggle() {
+    this.openStatusController.toggleSidenav();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-desktop-not-show-backdrop}
+   * @see{module:vega-sidenav-mobile-show-backdrop}
+   */
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("div", { class: "vega-sidebar", ref: (el) => this.openStatusController.setSidenavRef(el) }, index.h("div", { class: "vega-sidebar-content-container", ref: (el) => (this.content = el) }, index.h(index.Fragment, null, !createPublicApiRuntimeMetricsSlimmer.isObjectEmpty(this.headerConfig) && this.renderSideBarHeader(), this.renderSideBarList(), this.renderSideBarFooter())), this.collapseButtonRenderer.render())), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  validSource() {
+    const selectedItems = array.flattenChildren(this.source).filter((item) => item.selected);
+    if (selectedItems.length > 1) {
+      throw new Error('There should be only one item selected at the same time.');
+    }
+  }
+  /**
+   * The current div uses a named slot and has a sibling above it, if you skip rendering this whole element by checking a variable,
+   * it will cause the slot's position to move into the sibling.
+   * For specific examples, see the documentation of stencil_slot_bug.md
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   * @see{module:vega-sidenav-e2e-with-source-without-length}
+   */
+  /* istanbul ignore next */
+  renderSideBarList() {
+    var _a;
+    return (index.h(index.Fragment, null, createPublicApiRuntimeMetricsSlimmer.isObjectEmpty(this.headerConfig) ? index.h("div", { class: "header-placeholder" }) : null, index.h("slot", { name: "before-list-slot" }), index.h("div", { class: "vega-nav-list" }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderSideBarListBySource() : index.h("slot", null))));
+  }
+  renderSideBarHeader() {
+    const { collapseLogo, expandLogo, headline } = this.headerConfig;
+    return (index.h("div", { class: "vega-sidebar-header" }, index.h("div", { class: "vega-sidebar-header-collapse-container" }, collapseLogo && index.h("img", { src: collapseLogo, alt: 'collapse logo' })), index.h("div", { class: "vega-sidebar-header-expand-container" }, expandLogo && index.h("img", { src: expandLogo, alt: 'expand logo' }), headline && index.h("div", { class: "vega-sidebar-headline" }, headline))));
+  }
+  renderSideBarFooter() {
+    return (this.footnote && (index.h("div", { class: "vega-nav-footer" }, index.h("div", { class: "vega-nav-footnote" }, this.footnote))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "openState": ["watchOpenState"],
+    "source": ["watchSourceChange"],
+    "openByDefault": ["watchOpenByDefaultChange"]
+  }; }
+};
+__decorate$4([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaSidenav.prototype, "globalSlimmers", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStateNotifySlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "backdropController", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "collapseButtonRenderer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStatusController", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenav.prototype, "stateUpdateEmitter", void 0);
+VegaSidenav.style = vegaSidenavCss;
+
+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;
+};
+/** The class `VegaSidenavGroupSubStateController` is a TypeScript class that observes and manages sub-states for a sidenav group component. */
+class VegaSidenavGroupSubStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a sidenav with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-sidenav',
+      subStates: [
+        {
+          subStateName: 'openState',
+          parentStateName: 'openState',
+        },
+      ],
+    });
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaSidenavGroupSubStateController.prototype, "openState", void 0);
+
+/**
+ * `isHTMLVegaSidenavLinkElement` returns `true` if the input is an `HTMLVegaSidenavLinkElement` and `false` otherwise
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} indicating if the input is type of {@link HTMLVegaSidenavLinkElement}
+ */
+const isHTMLVegaSidenavLinkElement = (input) => {
+  return input instanceof HTMLElement && input['tagName'] === 'VEGA-SIDENAV-LINK';
+};
+
+const vegaSidenavGroupCss = ":host{display:block;margin-top:4px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;width:100%;box-sizing:border-box}:host a{display:flex;align-items:center;width:100%;height:100%;position:relative;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;overflow:hidden;color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1));cursor:pointer;text-decoration:none;border-radius:8px;box-sizing:border-box;outline:2px solid transparent;outline-offset:2px}:host .vega-nav-list{padding:0px;margin:0px;flex:1 1 0%;list-style-type:none}:host .vega-li-main.sidenav-open .vega-nav-list{overflow-y:auto;overflow-x:hidden}:host .vega-nav-list::-webkit-scrollbar{background-color:rgba(var(--v-bg-sidebar, 18, 18, 39, 1));width:4px}:host .vega-nav-list::-webkit-scrollbar-thumb{background-color:rgba(var(--v-bg-status-info, 205, 209, 211, 1));border-radius:9999px}:host a.sub-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host .vega-li-main.sidenav-open a:focus{border-color:rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))}:host .vega-li-main.sidenav-open a:not(.selected):hover{background-color:rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1));color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host .vega-links-icon{padding:8px;box-sizing:border-box}:host a .vega-links-icon>div{display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:8px;height:100%;width:100%}:host .vega-links-icon .prefix-icon{width:40px;height:40px}:host .vega-nav-list-sub .vega-links-icon{height:auto;width:auto}:host a .vega-links-name{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;opacity:0;pointer-events:none;overflow:hidden;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px;flex:1 1 0%;padding-top:8px;padding-bottom:8px;transition-duration:300ms}@media screen and (min-width: 768px) and (max-width: 1023px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host .vega-li-main.sidenav-open a .vega-links-name{opacity:1;pointer-events:auto;overflow-wrap:break-word}:host .suffix-icons{padding-right:16px;padding-left:8px;width:12px}:host .suffix-icons vega-icon{pointer-events:auto;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;opacity:0;position:absolute;right:16px;top:50%;transform:translateY(-50%)}:host .vega-li-main.sidenav-open .suffix-icons vega-icon,:host .vega-li-main.sidenav-open.open>a>.suffix-icons vega-icon:first-of-type{opacity:0}:host .vega-li-main.sidenav-open .suffix-icons vega-icon:first-of-type,:host .vega-li-main.sidenav-open.open>a>.suffix-icons vega-icon:last-of-type{opacity:1}:host .vega-nav-list-sub{display:none}:host .vega-li-main.sidenav-open.open>.vega-nav-list-sub{display:block}:host ::slotted(vega-sidenav-group){padding-left:48px}:host ::slotted(vega-sidenav-link){padding-left:48px}@media (min-width: 768px){:host{width:224px}}";
+
+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 VegaSidenavGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.subStateObserverSlimmer = new VegaSidenavGroupSubStateController();
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.openState = 'close';
+    /**
+     * Specifies the text that serves as the label or title
+     *    for the side navigation group in the sidebar.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.label = '';
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-group-toggle}
+     */
+    this.handleClick = (e) => {
+      const currentTarget = e.currentTarget;
+      if (currentTarget && currentTarget.dataset.root === '$1') {
+        e.preventDefault();
+        currentTarget.closest('.vega-li-main').classList.toggle('open');
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-group-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentWillLoad() {
+    this.observer = new observer.Observer(isHTMLVegaSidenavLinkElement, this.observerListener.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("div", { class: { 'vega-li-main': true, 'sidenav-open': this.openState !== 'close' }, ref: (ref) => (this.groupContainer = ref) }, index.h("a", { href: `#${this.label}`, role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), "data-root": "$1", onClick: this.handleClick, "aria-label": this.label || 'No label defined' }, index.h("div", { class: "vega-links-icon" }, index.h("div", { class: "prefix-icon" }, index.h("vega-icon", { icon: this.icon, size: "size-24" }))), index.h("span", { class: "vega-links-name" }, this.label), index.h("div", { class: "suffix-icons" }, index.h("vega-icon", { icon: "chevron-down", size: "size-12" }), index.h("vega-icon", { icon: "chevron-up", size: "size-12" }))), index.h("div", { class: "vega-nav-list vega-nav-list-sub" }, index.h("slot", null)))), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-group-observer-with-selected}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    const hasSelectedLinkItem = this.host.contains(castInput);
+    if (hasSelectedLinkItem) {
+      this.groupContainer.querySelector('a').classList.add('sub-selected');
+      this.groupContainer.classList.add('open');
+    }
+    else {
+      this.groupContainer.querySelector('a').classList.remove('sub-selected');
+      this.groupContainer.classList.remove('open');
+    }
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenavGroup.prototype, "subStateObserverSlimmer", void 0);
+__decorate$2([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaSidenavGroup.prototype, "globalSlimmers", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenavGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaSidenavGroup.style = vegaSidenavGroupCss;
+
+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;
+};
+/** The class `VegaSidenavLinkSubStateController` is a TypeScript class that observes and manages sub-states for a sidenav link component. */
+class VegaSidenavLinkSubStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a sidenav with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-sidenav',
+      subStates: [
+        {
+          subStateName: 'openState',
+          parentStateName: 'openState',
+        },
+      ],
+    });
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaSidenavLinkSubStateController.prototype, "openState", void 0);
+
+const vegaSidenavLinkCss = ":host{display:block;margin-top:4px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;width:100%;box-sizing:border-box}:host a{display:flex;align-items:center;width:100%;height:100%;position:relative;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;overflow:hidden;color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1));cursor:pointer;text-decoration:none;border-radius:8px;box-sizing:border-box;outline:2px solid transparent;outline-offset:2px}:host a.selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1));background:transparent}:host .vega-links-icon{padding:8px;box-sizing:border-box}:host a.selected .vega-links-icon{border-radius:8px;background-color:rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))}:host a .vega-links-icon>div{display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:8px;height:100%;width:100%}:host a.selected .vega-links-icon>div{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host .vega-links-icon .prefix-icon{width:40px;height:40px}:host a .vega-links-name{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;opacity:0;pointer-events:none;overflow:hidden;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px;flex:1 1 0%;padding-top:8px;padding-bottom:8px;transition-duration:300ms}@media screen and (min-width: 768px) and (max-width: 1023px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host a .vega-links-name{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.has-group-parent:not([icon])) .vega-links-name{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host(.sidenav-open) a:focus{border-color:rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))}:host(.sidenav-open) a:not(.selected):hover{background-color:rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1));color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.sidenav-open) a.selected{background-color:rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))}:host(.sidenav-open) a.selected .vega-links-icon{background:transparent}:host(.sidenav-open) a .vega-links-name{opacity:1;pointer-events:auto;overflow-wrap:break-word}@media (min-width: 768px){:host{width:224px}}";
+
+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 VegaSidenavLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.subStateObserverSlimmer = new VegaSidenavLinkSubStateController();
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaSidenavLink, vegaEventId.VegaClick);
+    this.openState = 'close';
+    /**
+     * Indicates whether the link item is selected.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.selected = false;
+    /**
+     * Determines if the side nav should stay open when the
+     *    sidenav-link element is clicked.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.showSideBarOnClickLink = false;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-link-click-event}
+     */
+    /* istanbul ignore next */
+    this.handleClick = (e) => {
+      if (!this.selected) {
+        this.selected = true;
+      }
+      this.clickEventEmitter.emit();
+      this.notifyParentSidenavClick();
+      if (internalVegaEventManager.internalVegaEventManager.getSemantics(this.host).namespace === 'native') {
+        e.stopPropagation();
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-link-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentWillLoad() {
+    const parent = ui.findParent(this.host, 'vega-sidenav-group');
+    if (parent) {
+      this.host.classList.add('has-group-parent');
+    }
+    this.observer = new observer.Observer(isHTMLVegaSidenavLinkElement, this.observerListener.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentDidRender() {
+    if (this.selected) {
+      changeManager.ChangeManager.notify(staticSubjectTitle.SIDENAV_LINK_SELECTED_TOPIC, this.host);
+    }
+  }
+  render() {
+    const url = this.url || 'javascript:void(0);';
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: { 'sidenav-open': this.openState !== 'close' } }, index.h("a", { href: url, onClick: this.handleClick, class: { selected: this.selected === true } }, this.icon ? (index.h("div", { class: "vega-links-icon" }, index.h("div", { class: "prefix-icon" }, index.h("vega-icon", { icon: this.icon, size: "size-24" })))) : null, index.h("span", { class: "vega-links-name" }, index.h("slot", null)))), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-link-observer-with-click}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    if (castInput !== this.host) {
+      this.selected = false;
+    }
+  }
+  /**
+   * Notify the parent sidenav element the child link has been clicked
+   */
+  notifyParentSidenavClick() {
+    const sidenav = ui.findParent(this.host, 'vega-sidenav');
+    if (sidenav) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(sidenav, vegaInternalEventId.VegaInternalSidenavLinkClick), {
+        host: this.host,
+        detail: this.showSideBarOnClickLink,
+      });
+    }
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaSidenavLink.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "subStateObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "clickEventEmitter", void 0);
+VegaSidenavLink.style = vegaSidenavLinkCss;
+
+exports.vega_sidenav = VegaSidenav;
+exports.vega_sidenav_group = VegaSidenavGroup;
+exports.vega_sidenav_link = VegaSidenavLink;