@globalpayments/vega 2.36.0 → 2.37.1

package/dist/collection/components/vega-modal/slimmers/renderers/vega-modal-renderer.js

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { Fragment, h, Host } from '@stencil/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
+/**
+ * Modal renderer
+ */
+export class VegaModalRenderer extends VegaSlimmer {
+  getModalContentRef() {
+    return this.modalContent;
+  }
+  getModalFooterRef() {
+    return this.modalFooter;
+  }
+  getModalContainerRef() {
+    return this.modalContainer;
+  }
+  render() {
+    return (h(Host, { class: {
+        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
+        'animation': this.animation,
+      } },
+      h("div", { class: "modal-dialog" }, this.renderContainer())));
+  }
+  renderContainer() {
+    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
+    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
+      this.renderHeader(padding),
+      this.renderContent(padding),
+      this.renderFooter(padding)));
+  }
+  renderHeader(padding) {
+    return (h("div", { class: {
+        'vega-modal-header': true,
+        'vega-modal-header-with-title': this.hasModalTitle(),
+        'vega-modal-header-with-icon': this.showCloseButton,
+        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      } },
+      this.renderTitle(),
+      this.showCloseButton && this.renderCloseBtn()));
+  }
+  renderContent(padding) {
+    return (h("div", { class: {
+        'vega-modal-content': true,
+        'vega-modal-content-with-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalContent = e) },
+      h(Fragment, null,
+        h("slot", null),
+        h("slot", { name: "content" }),
+        h("slot", { name: "modal-content" }))));
+  }
+  renderFooter(padding) {
+    return (h("div", { class: {
+        'vega-modal-footer': true,
+        'vega-modal-footer-with-slot': this.hasModalFooter(),
+        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalFooter = e) },
+      h(Fragment, null,
+        h("slot", { name: "footer" }),
+        h("slot", { name: "modal-footer" }))));
+  }
+  renderTitle() {
+    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
+      h("slot", { name: "title" }),
+      h("slot", { name: "modal-title" })))));
+  }
+  renderCloseBtn() {
+    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.openStateController.onModalClose, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close", size: "size-16" })));
+  }
+  hasModalFooter() {
+    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
+      this.host.querySelector(`[slot='footer']`) !== null);
+  }
+  isContentScrollable() {
+    return Boolean(this.contentMaxHeight);
+  }
+  hasModalTitle() {
+    return (Boolean(this.modalTitle) ||
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "animation", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "padding", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "showCloseButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "modalTitle", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "contentMaxHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "handleClose", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "openStateController", void 0);

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

@@ -4,18 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { DefaultModalSize } from '../../constants/ui';
-import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
-import { DeviceType } from '../../types/ui.type';
-import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { Component, Element, Event, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { findParent, getDeviceType } from '../../utils/ui';
-import { formatAndValidResponsiveToken } from '../../utils/design-token';
-import InternalVegaZIndexManager from '../../helpers/zindex/internal-vega-z-index-manager';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaOpen, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -25,31 +16,35 @@ import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/depreca
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaModalRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-modal/runtime-metrics-payload-definition';
 import { VegaNestedModalController } from './slimmers/controllers/vega-nested-modal-controller';
+import { VegaModalRenderer } from './slimmers/renderers/vega-modal-renderer';
+import { VegaModalLayoutController } from './slimmers/controllers/vega-modal-layout-controller';
+import { VegaModalMobileController } from './slimmers/controllers/vega-modal-mobile-controller';
+import { VegaModalScrollController } from './slimmers/controllers/vega-modal-scroll-controller';
+import { VegaModalOpenStateController } from './slimmers/controllers/vega-modal-open-state-controller';
+import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-backdrop-controller';
+import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
+import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
 /**
  * @vegaVersion 1.0.6
  */
 export class VegaModal {
   constructor() {
     this.globalSlimmers = {};
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-resize-e2e}
-     */
-    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
-      callback: /* istanbul ignore next */ () => {
-        this.setModalWidth('update');
-        this.setContentMaxHeight();
-      },
-      isDeferred: true,
-    });
     this.nestedModalController = new VegaNestedModalController();
+    this.openStateController = new VegaModalOpenStateController();
+    this.mobileController = new VegaModalMobileController();
+    this.scrollController = new VegaModalScrollController();
+    this.layoutController = new VegaModalLayoutController();
+    this.backdropController = new VegaModalBackdropController();
+    this.openedModalStackController = new VegaModalOpenedModalStackController();
+    this.zIndexController = new VegaModalZIndexController();
+    this.renderer = new VegaModalRenderer();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
-    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.renderer.getModalContainerRef());
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
-    this.isModalWidthSet = false;
     /**
      * Provides options for controlling the behavior of the backdrop.
      * - `default`:
@@ -135,18 +130,6 @@ export class VegaModal {
      * @vegaVersion 1.22.0
      */
     this.handleClose = undefined;
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-toggle-interactive-e2e}
-     */
-    /* istanbul ignore next */
-    this.closeModal = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!this.handleClose || this.handleClose()) {
-        this.open = false;
-      }
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -155,31 +138,14 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   watchSize() {
-    this.setModalWidth('update');
+    methodPlaceholder();
   }
   watchOpen() {
-    this.toggle();
+    methodPlaceholder();
   }
   disconnectedCallback() {
     this.open = false;
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-resize-e2e}
-   */
-  /* istanbul ignore next */
-  componentDidLoad() {
-    if (this.open) {
-      this.toggle();
-    }
-    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
-      this.disableBackdropTouchMove();
-    }
-    if (this.isContentScrollable) {
-      this.listenContentScroll();
-    }
-    this.setContentMaxHeight();
-  }
   /**
    * Clicking on a non-static current modal should close this modal, not other modals.
    * The below method is e2e-test covered in
@@ -187,19 +153,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataTarget(e) {
-    /*
-     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
-     */
-    const target = e.composedPath()[0];
-    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
-      this.open = false;
-    }
-    if (this.host.id &&
-      (target.getAttribute('data-target') === this.host.id ||
-        findParent(target, `[data-target=${this.host.id}]`))) {
-      e.preventDefault();
-      this.open = true;
-    }
+    methodPlaceholder(e);
   }
   /**
    * The below method is e2e-test covered in
@@ -207,11 +161,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataDismiss(e) {
-    const target = e.target.closest(`[data-dismiss='modal']`);
-    if (target) {
-      e.preventDefault();
-      this.open = false;
-    }
+    methodPlaceholder(e);
   }
   /**
    * Invoke this method to show or hide the modal.
@@ -237,265 +187,7 @@ export class VegaModal {
     }
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: {
-        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
-        'animation': this.animation,
-      } },
-      h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
-  }
-  renderContainer() {
-    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
-    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
-      this.renderHeader(padding),
-      this.renderContent(padding),
-      this.renderFooter(padding)));
-  }
-  renderHeader(padding) {
-    return (h("div", { class: {
-        'vega-modal-header': true,
-        'vega-modal-header-with-title': this.hasModalTitle(),
-        'vega-modal-header-with-icon': this.showCloseButton,
-        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      } },
-      this.renderTitle(),
-      this.showCloseButton && this.renderCloseBtn()));
-  }
-  renderContent(padding) {
-    return (h("div", { class: {
-        'vega-modal-content': true,
-        'vega-modal-content-with-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalContent = e) },
-      h(Fragment, null,
-        h("slot", null),
-        h("slot", { name: "content" }),
-        h("slot", { name: "modal-content" }))));
-  }
-  renderFooter(padding) {
-    return (h("div", { class: {
-        'vega-modal-footer': true,
-        'vega-modal-footer-with-slot': this.hasModalFooter(),
-        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalFooter = e) },
-      h(Fragment, null,
-        h("slot", { name: "footer" }),
-        h("slot", { name: "modal-footer" }))));
-  }
-  renderTitle() {
-    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
-      h("slot", { name: "title" }),
-      h("slot", { name: "modal-title" })))));
-  }
-  renderCloseBtn() {
-    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-icon", { icon: "close", size: "size-16" })));
-  }
-  hasModalFooter() {
-    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
-      this.host.querySelector(`[slot='footer']`) !== null);
-  }
-  isContentScrollable() {
-    return Boolean(this.contentMaxHeight);
-  }
-  hasModalTitle() {
-    return (Boolean(this.modalTitle) ||
-      this.host.querySelector(`[slot='modal-title']`) !== null ||
-      this.host.querySelector(`[slot='title']`) !== null);
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-scroll-to-bottom}
-   */
-  /* istanbul ignore next */
-  listenContentScroll() {
-    this.modalContent.addEventListener('scroll', () => {
-      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
-        this.modalContent.clientHeight) {
-        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-      else {
-        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-    });
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  toggle() {
-    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
-    this.updateDocumentRootOverflow();
-    this.setBackdrop();
-    this.setModalZIndex();
-    this.setModalWidth();
-    this.emitEvent();
-    this.setModalVisibility();
-  }
-  setModalZIndex() {
-    if (this.open) {
-      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.setZIndex(this.host, 'base');
-    }
-    else {
-      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
-      const length = this.getVisibleModalLength();
-      if (length > 0) {
-        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
-      }
-      this.removeBackdropWhileNoModalShow();
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * While call toggle method for modal show or hide, it will call this method.
-   * but we should really update the modal width while first initialize modal, window resize and size changed.
-   * So to avoid repeated calls by toggle, we add a flag as parameter,
-   */
-  /* istanbul ignore next */
-  setModalWidth(flag = 'initialize') {
-    if (this.isModalWidthSet && flag === 'initialize')
-      return;
-    const size = this.getModalSize();
-    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
-    typeof size === 'number'
-      ? (dialog.style['width'] = `${size}px`)
-      : (dialog.style['width'] = `${size}`);
-    this.isModalWidthSet = true;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-max-height-responsive-e2e}
-   */
-  /* istanbul ignore next */
-  setContentMaxHeight() {
-    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
-    if (maxHeight) {
-      this.modalContent.style.maxHeight = `${maxHeight}px`;
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  setModalVisibility() {
-    this.host.style['display'] = this.open ? 'flex' : 'none';
-  }
-  emitEvent() {
-    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * @see{module:vega-modal-default-width-S-320-e2e}
-   * @see{module:vega-modal-default-width-S-600-e2e}
-   */
-  /* istanbul ignore next */
-  getModalSize() {
-    const size = ResponsiveFormatFacade.format(this.size, 'size');
-    if (size) {
-      return size;
-    }
-    else {
-      return DefaultModalSize[getCurrentBreakpoint()];
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-backdrop-color-default-e2e}
-   * @see{module:vega-modal-backdrop-color-semi-e2e}
-   * @see{module:vega-modal-backdrop-color-none-e2e}
-   * @see{module:vega-modal-default-e2e}
-   */
-  /* istanbul ignore next */
-  setBackdrop() {
-    if (this.backdrop === 'none')
-      return;
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
-    if (!backdrop) {
-      backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add('modal-backdrop');
-      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
-      backdrop.visible = true;
-      document.querySelector('body').append(backdrop);
-    }
-    this.backdropRef = backdrop;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-disconnected-callback-e2e }
-   */
-  /* istanbul ignore next */
-  removeBackdropWhileNoModalShow() {
-    if (this.getVisibleModalLength() === 0) {
-      this.backdropRef && this.backdropRef.remove();
-    }
-  }
-  //TODO: Record the nest modal by an array.
-  /**
-   * Get visible modal length
-   */
-  getVisibleModalLength() {
-    return VegaModal.openedModalStack.length;
-  }
-  /**
-   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
-   */
-  updateDocumentRootOverflow() {
-    if (this.backdrop === 'none')
-      return;
-    if (this.open && this.getVisibleModalLength() === 1) {
-      document.body.classList.add('disable-scroll-in-desktop');
-    }
-    else if (!this.open && this.getVisibleModalLength() === 0) {
-      document.body.classList.remove('disable-scroll-in-desktop');
-    }
-  }
-  pushToModalStack() {
-    VegaModal.openedModalStack.push(this.host);
-  }
-  deleteFromModalStack() {
-    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
-  }
-  /**
-   * There are two situations in modal scrolling:
-   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
-   * 2. Scrolls the modal content (if scrollable) in vega-modal.
-   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
-   *
-   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
-   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
-   * This problem is reproduced on the following websites, and there is no solution yet.
-   * https://v5.bootcss.com/docs/components/modal/
-   * https://mui.com/material-ui/react-dialog/
-   */
-  /* istanbul ignore next */
-  disableBackdropTouchMove() {
-    this.host.addEventListener('touchstart', (e) => {
-      this.touchStartY = e.targetTouches[0].pageY;
-    }, { capture: true });
-    this.host.addEventListener('touchmove', (e) => {
-      const isScrolledTop = this.host.scrollTop <= 0;
-      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
-      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
-      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
-      if (e.target === this.host &&
-        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
-        e.preventDefault();
-      }
-    }, { capture: true });
+    return sanitizeVegaComponent(this.renderer.render(), this.host);
   }
   static get is() { return "vega-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -919,21 +611,36 @@ export class VegaModal {
       "passive": false
     }]; }
 }
-VegaModal.openedModalStack = [];
-VegaModal.backdropColorMap = {
-  default: 'bg-backdrop-modal',
-  semi: 'bg-backdrop-popover',
-  none: 'bg-transparent',
-};
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaModal.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+], VegaModal.prototype, "nestedModalController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "nestedModalController", void 0);
+], VegaModal.prototype, "openStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "mobileController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "scrollController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "layoutController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openedModalStackController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openEventEmitter", void 0);

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

@@ -19,7 +19,7 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleClick = () => {
-      if (!this.selected) {
+      if (!this.selected && !this.customSelectionEnabled) {
         this.controller.setSelected(true);
       }
       this.menuClickEventEmitter.emit();
@@ -73,3 +73,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.js

@@ -24,11 +24,19 @@ export class VegaLeftNavLink {
     this.menuClickEventEmitter = createEventEmitSlimmer(VegaLeftNavLink, VegaMenuClick);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaLeftNavLink, 'counterBadge.count', 'counterBadge.counter', undefined);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
-    /** boolean indicating if current link item is selected **
+    /**
+     * A boolean that indicates whether the current link item is selected.
+     * @VegaWarning Note: Ensure that the `custom-selection-enabled` property is set to `true` before modifying this value, as modifying it without this setting may lead to unexpected behavior.
      * @vegaVersion 1.31.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selected = false;
+    /**
+     * Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link’s selection behavior.
+     *
+     * @vegaVersion 2.37.0
+     */
+    this.customSelectionEnabled = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
@@ -75,15 +83,39 @@ export class VegaLeftNavLink {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "Note: Ensure that the `custom-selection-enabled` property is set to `true` before modifying this value, as modifying it without this setting may lead to unexpected behavior."
+          }, {
             "name": "vegaVersion",
             "text": "1.31.0"
           }],
-        "text": "boolean indicating if current link item is selected **"
+        "text": "A boolean that indicates whether the current link item is selected."
       },
       "attribute": "selected",
       "reflect": true,
       "defaultValue": "false"
     },
+    "customSelectionEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.37.0"
+          }],
+        "text": "Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link\u2019s selection behavior."
+      },
+      "attribute": "custom-selection-enabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "url": {
       "type": "string",
       "mutable": false,

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

@@ -306,7 +306,7 @@ export class VegaPagination {
             "name": "vegaVersion",
             "text": "2.36.0"
           }],
-        "text": "Specifies the properties of the vega-dropdown component\n   used to configure the dropdown for the\n   page size selector in pagination."
+        "text": "Specifies the properties of the `vega-dropdown` component\n   used to configure the dropdown for the\n   page size selector in pagination."
       }
     }
   }; }