@globalpayments/vega 2.93.0 → 2.94.0

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

@@ -11,10 +11,11 @@ const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62
 const effect = require('./effect-98e88068.js');
 const featureFlagController = require('./feature-flag-controller-c19d0b58.js');
 const ui = require('./ui-c91c37a7.js');
+const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const internalIconManager = require('./internal-icon-manager-40bcac72.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
-const breakpoints = require('./breakpoints-1cc2c4c6.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-4b2ebbe4.js');
+const tryGetDocument = require('./try-get-document-c0ebd39a.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-5a105612.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-d234a619.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
 const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-93c5fb50.js');
@@ -29,32 +30,31 @@ const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
 const subStateObserverSlimmer = require('./sub-state-observer-slimmer-eee2f0ae.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-300a3929.js');
-const designToken = require('./design-token-47393cbb.js');
-require('./try-get-document-c0ebd39a.js');
+const designToken = require('./design-token-d3d12fa0.js');
 require('./index-3ca118c4.js');
+require('./ui-32120990.js');
+require('./breakpoints-ebde4837.js');
 require('./icon-manager-be358b32.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
 require('./number-4816603d.js');
-require('./ui-32120990.js');
-require('./breakpoints-ebde4837.js');
-require('./keyboard-manager-c78b46bd.js');
-require('./type-guard-1c3770d4.js');
+require('./keyboard-manager-ca76d4dc.js');
+require('./type-guard-f354af8b.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-31f2b057.js');
+require('./internal-translation-controller-eb02c3b1.js');
 require('./static-subject-title-70c73b16.js');
 require('./internal-vega-event-manager-13c4012b.js');
 require('./vega-nonce-manager-df69d3ed.js');
 require('./index-592b4052.js');
 require('./tinycolor-polyfill-502efaa8.js');
 require('./object-b53e9416.js');
-require('./responsive-format-facade-1af54330.js');
+require('./responsive-format-facade-25e9f30d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
-require('./state-border-formatter-501f6645.js');
+require('./state-border-formatter-f1ce0f3b.js');
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (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;
@@ -69,7 +69,11 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
     /* eslint-disable jsdoc/require-jsdoc*/
     super({
       callback: /* istanbul ignore next */ () => {
+        if (this.showAsOverlay) {
+          return;
+        }
         this.updateMainContentUI(this.openState);
+        this.backdropManager.watchOpenState(this.openState);
       },
     });
     this.isVoiceOverClick = false;
@@ -122,6 +126,7 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
     }
   }
   watchOpenState(newState) {
+    this.backdropManager.watchOpenState(newState);
     this.updateMainContentUI(newState);
     if (newState === 'open') {
       this.open = true;
@@ -142,6 +147,7 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
     }
   }
   watchShowAsOverlay() {
+    this.backdropManager.watchShowAsOverlay();
     this.updateMainContentUI(this.openState);
   }
   /**
@@ -219,7 +225,7 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
       this.host.style.display = 'flex';
       setTimeout(() => {
         this.host.classList.add('open');
-        if (mainContent && !this.backdropController.shouldShowBackdrop()) {
+        if (mainContent && !this.shouldShowBackdrop()) {
           bodyElement === null || bodyElement === void 0 ? void 0 : bodyElement.classList.remove('vega-overflow-hidden');
           mainContent.classList.add('open');
         }
@@ -240,38 +246,45 @@ class VegaLeftNavOpenStateController extends pageResizeObserverSlimmer.PageResiz
       }, this.host);
     }
   }
+  shouldShowBackdrop() {
+    const breakpoint = breakpoints.getCurrentBreakpoint();
+    return this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+  }
 }
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "host", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "open", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaLeftNavOpenStateController.prototype, "openState", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavOpenStateController.prototype, "stateUpdateEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavOpenStateController.prototype, "backdropController", void 0);
-__decorate$n([
+], VegaLeftNavOpenStateController.prototype, "showAsOverlay", void 0);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavOpenStateController.prototype, "backdropManager", void 0);
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaLeftNavOpenStateController.prototype, "componentDidRender", null);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('toggle')
 ], VegaLeftNavOpenStateController.prototype, "toggle", null);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('watchOpen')
 ], VegaLeftNavOpenStateController.prototype, "watchOpen", null);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
 ], VegaLeftNavOpenStateController.prototype, "watchOpenState", null);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
 ], VegaLeftNavOpenStateController.prototype, "watchShowAsOverlay", null);
 
@@ -287,7 +300,7 @@ const Icons = {
   },
 };
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (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;
@@ -321,20 +334,20 @@ class VegaLeftNavHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
 (() => {
   internalIconManager.VegaInternalIconManager.register(Icons);
 })();
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "host", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "currentBranding", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (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;
@@ -353,17 +366,17 @@ class VegaLeftNavFooterRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("div", { class: "footer-container" }, this.hasFooterSlot ? (index.h("slot", { name: "footer-slot" })) : (index.h("div", { class: "footer-footnote" }, this.footnote))))));
   }
 }
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "host", void 0);
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavFooterRenderer.prototype, "footnote", void 0);
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavFooterRenderer.prototype, "componentWillLoad", null);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (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;
@@ -379,7 +392,7 @@ class VegaLeftNavZIndexController extends globalSlimmerRegistry.VegaSlimmer {
    */
   /* istanbul ignore next */
   updateZIndex() {
-    const backDrop = this.backdropController.getBackdrop();
+    const backDrop = this.backdropManager.getBackdrop();
     if (this.openState == 'open') {
       backDrop && internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(backDrop, 'base');
       internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.host, 'base');
@@ -392,117 +405,308 @@ class VegaLeftNavZIndexController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "host", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavZIndexController.prototype, "openState", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavZIndexController.prototype, "backdropController", void 0);
-__decorate$k([
+], VegaLeftNavZIndexController.prototype, "backdropManager", void 0);
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
 ], VegaLeftNavZIndexController.prototype, "watchOpenState", null);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (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 {
+/**
+ * Abstract base slimmer with shared backdrop state.
+ */
+class SharedBackdropManager extends globalSlimmerRegistry.VegaSlimmer {
   /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-left-nav-e2e-resize-with-desktop}
+   * Register this consumer and ensure a shared backdrop exists.
    */
-  constructor() {
-    /* eslint-disable jsdoc/require-jsdoc*/
-    super({
-      callback: /* istanbul ignore next */ () => {
-        this.updateBackdropUI(this.openState);
-      },
-    });
-    this.backdrop = null;
-    /* eslint-enable jsdoc/require-jsdoc*/
-  }
   connectedCallback() {
-    if (!this.backdrop || !this.backdrop.isConnected) {
-      this.backdrop = this.createBackdrop();
+    const managerClass = this.constructor;
+    this.resetStaleSharedState();
+    if (!managerClass.consumers.has(this)) {
+      managerClass.consumers.add(this);
+      managerClass.visibilityIntents.set(this, false);
+      managerClass.consumerCount++;
     }
+    this.ensureBackdrop();
   }
+  /**
+   * Unregister this consumer and remove shared backdrop when last consumer disconnects.
+   */
   disconnectedCallback() {
-    this.backdrop && this.backdrop.remove();
-    this.backdrop = null;
+    var _a;
+    const managerClass = this.constructor;
+    const hasConsumer = managerClass.consumers.has(this);
+    const hadVisibilityIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    managerClass.consumers.delete(this);
+    managerClass.visibilityIntents.delete(this);
+    if (hasConsumer && managerClass.consumerCount > 0) {
+      managerClass.consumerCount--;
+    }
+    if (hadVisibilityIntent && managerClass.visibilityIntentCount > 0) {
+      managerClass.visibilityIntentCount--;
+      this.syncVisibility();
+    }
+    if (managerClass.consumerCount === 0) {
+      this.removeBackdrop();
+    }
+  }
+  /**
+   * Get current backdrop element.
+   *
+   * @returns {Nullable<HTMLVegaBackdropElement>} Backdrop element or null.
+   */
+  getBackdrop() {
+    const managerClass = this.constructor;
+    return managerClass.backdropRef;
+  }
+  /**
+   * Get current connected consumer count.
+   *
+   * @returns {number} Consumer count.
+   */
+  getConsumerCount() {
+    const managerClass = this.constructor;
+    return managerClass.consumerCount;
+  }
+  /**
+   * Clear all shared state and remove backdrop.
+   */
+  clear() {
+    const managerClass = this.constructor;
+    this.removeBackdrop();
+    managerClass.consumerCount = 0;
+    managerClass.visibilityIntentCount = 0;
+  }
+  /**
+   * Set visibility intent for this slimmer consumer.
+   *
+   * @param {boolean} visible - Desired visibility.
+   */
+  setVisibilityIntent(visible) {
+    var _a;
+    const managerClass = this.constructor;
+    const currentIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    if (currentIntent !== visible) {
+      managerClass.visibilityIntents.set(this, visible);
+      if (visible) {
+        managerClass.visibilityIntentCount++;
+      }
+      else {
+        managerClass.visibilityIntentCount--;
+      }
+      this.syncVisibility();
+    }
+  }
+  /**
+   * Ensure a backdrop exists for this subclass and return it.
+   *
+   * @returns {HTMLVegaBackdropElement} Shared backdrop element.
+   */
+  ensureBackdrop() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument.tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      throw new Error('SharedBackdropManager requires a browser document.');
+    }
+    this.resetStaleSharedState();
+    if (managerClass.backdropRef && doc.body.contains(managerClass.backdropRef)) {
+      return managerClass.backdropRef;
+    }
+    const backdrop = this.createBackdrop(doc);
+    managerClass.backdropRef = backdrop;
+    return backdrop;
+  }
+  /**
+   * Remove the shared backdrop for this subclass from the DOM.
+   */
+  removeBackdrop() {
+    var _a;
+    const managerClass = this.constructor;
+    if ((_a = managerClass.backdropRef) === null || _a === void 0 ? void 0 : _a.isConnected) {
+      managerClass.backdropRef.remove();
+    }
+    managerClass.backdropRef = null;
+  }
+  /**
+   * Sync shared backdrop `visible` based on current visibility intents.
+   */
+  syncVisibility() {
+    const managerClass = this.constructor;
+    const shouldShow = managerClass.visibilityIntentCount > 0;
+    if (managerClass.backdropRef) {
+      managerClass.backdropRef.visible = shouldShow;
+    }
   }
+  /**
+   * Reset stale static shared state when the tracked backdrop is no longer in the DOM.
+   */
+  resetStaleSharedState() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument.tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+      return;
+    }
+    if (managerClass.backdropRef && !doc.body.contains(managerClass.backdropRef)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+    }
+  }
+}
+SharedBackdropManager.backdropRef = null;
+SharedBackdropManager.consumers = new WeakSet();
+SharedBackdropManager.visibilityIntents = new WeakMap();
+SharedBackdropManager.consumerCount = 0;
+SharedBackdropManager.visibilityIntentCount = 0;
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], SharedBackdropManager.prototype, "connectedCallback", null);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], SharedBackdropManager.prototype, "disconnectedCallback", null);
+
+var __decorate$k = (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;
+};
+/**
+ * Left-nav specific backdrop manager — extends SharedBackdropManager to get its own static scope.
+ * Each subclass of SharedBackdropManager gets its own separate static state (consumers, visibility intents, etc).
+ */
+class VegaLeftNavBackdropManager extends SharedBackdropManager {
+  /**
+   * Watch openState changes and update visibility intent.
+   *
+   * @param {LeftNavOpenStateType} newState - The new open state.
+   */
   watchOpenState(newState) {
-    this.updateBackdropUI(newState);
+    const shouldShow = newState === 'open' && this.shouldShowBackdrop();
+    this.setVisibilityIntent(shouldShow);
   }
+  /**
+   * Watch showAsOverlay changes and re-evaluate visibility.
+   */
   watchShowAsOverlay() {
-    this.updateBackdropUI(this.openState);
+    this.watchOpenState(this.openState);
   }
-  getBackdrop() {
-    return this.backdrop;
+  /**
+   * Customize backdrop creation for left-nav use case.
+   *
+   * @param {Document} doc - The document reference.
+   * @returns {HTMLVegaBackdropElement} The created and configured backdrop element.
+   */
+  createBackdrop(doc) {
+    const backdrop = doc.createElement('vega-backdrop');
+    backdrop.classList.add(VegaLeftNavBackdropManager.backdropClassName);
+    backdrop.duration = 150;
+    backdrop.visible = false;
+    doc.body.append(backdrop);
+    return backdrop;
   }
+  /**
+   * Determine if backdrop should be shown based on current state.
+   *
+   * @returns {boolean} True if backdrop should be visible.
+   */
   shouldShowBackdrop() {
-    return this.isLargeScreen() && !this.showAsOverlay ? false : true;
+    return this.showAsOverlay || !this.isLargeScreen();
+  }
+  /**
+   * Check if current breakpoint is large screen.
+   *
+   * @returns {boolean} True if current breakpoint is 'L' or 'XL'.
+   */
+  isLargeScreen() {
+    const breakpoint = breakpoints.getCurrentBreakpoint();
+    return breakpoint === 'L' || breakpoint === 'XL';
+  }
+}
+VegaLeftNavBackdropManager.backdropClassName = 'vega-left-nav-backdrop';
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "openState", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaLeftNavBackdropManager.prototype, "showAsOverlay", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
+], VegaLeftNavBackdropManager.prototype, "watchOpenState", null);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
+], VegaLeftNavBackdropManager.prototype, "watchShowAsOverlay", null);
+
+var __decorate$j = (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;
+};
+/**
+ * Backdrop click handler controller for left-nav.
+ * Manages backdrop interaction (click events) while the VegaLeftNavBackdropManager
+ * handles visibility state through its slimmer watch methods.
+ */
+class VegaLeftNavBackdropController {
+  constructor() {
+    this.handleBackdropClick = () => {
+      this.openStateController.setOpenState('close');
+    };
+  }
+  connectedCallback() {
+    this.attachBackdropClickEvent();
+  }
+  disconnectedCallback() {
+    this.detachBackdropClickEvent();
   }
   /**
+   * Attach backdrop click event listener.
    * The below method is e2e-test covered in
    * @see{module:vega-left-nav-e2e-vega-click-backdrop}
    */
   /* istanbul ignore next */
-  createBackdrop() {
-    // eslint-disable-next-line no-restricted-globals
-    const backdrop = document.createElement('vega-backdrop');
-    backdrop.visible = false;
-    backdrop.duration = 150;
-    backdrop.addEventListener('vegaClick', () => {
-      this.openStateController.setOpenState('close');
-    });
-    // eslint-disable-next-line no-restricted-globals
-    document.body.append(backdrop);
-    return backdrop;
-  }
-  updateBackdropUI(state) {
-    // eslint-disable-next-line no-restricted-globals
-    const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
-    const backdrop = this.backdrop;
+  attachBackdropClickEvent() {
+    const backdrop = this.backdropManager.getBackdrop();
     if (!backdrop)
       return;
-    if (state === 'open') {
-      backdrop.visible = !mainContent || this.shouldShowBackdrop();
-    }
-    else {
-      backdrop.visible = false;
-    }
+    backdrop.removeEventListener('vegaClick', this.handleBackdropClick);
+    backdrop.addEventListener('vegaClick', this.handleBackdropClick);
   }
-  isLargeScreen() {
-    const currentBreakpoint = breakpoints.getCurrentBreakpoint();
-    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
+  detachBackdropClickEvent() {
+    const backdrop = this.backdropManager.getBackdrop();
+    if (!backdrop)
+      return;
+    backdrop.removeEventListener('vegaClick', this.handleBackdropClick);
   }
 }
 __decorate$j([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openState", void 0);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "showAsOverlay", void 0);
+], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
 __decorate$j([
   globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavBackdropController.prototype, "openStateController", void 0);
+], VegaLeftNavBackdropController.prototype, "backdropManager", void 0);
 __decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaLeftNavBackdropController.prototype, "connectedCallback", null);
 __decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaLeftNavBackdropController.prototype, "disconnectedCallback", null);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('watchOpenState')
-], VegaLeftNavBackdropController.prototype, "watchOpenState", null);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('watchShowAsOverlay')
-], VegaLeftNavBackdropController.prototype, "watchShowAsOverlay", null);
 
 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;
@@ -567,9 +771,9 @@ class VegaLeftNavAutoCollapseController extends globalSlimmerRegistry.VegaSlimme
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalLeftNavLinkClick);
   }
   shouldAutoCollapse() {
-    return (this.autoCollapseOnOverlay &&
-      this.backdropController.shouldShowBackdrop() &&
-      this.openState === 'open');
+    const breakpoint = breakpoints.getCurrentBreakpoint();
+    const shouldShowBackdrop = this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+    return this.autoCollapseOnOverlay && shouldShowBackdrop && this.openState === 'open';
   }
 }
 __decorate$h([
@@ -584,9 +788,6 @@ __decorate$h([
 __decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "showAsOverlay", void 0);
-__decorate$h([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaLeftNavAutoCollapseController.prototype, "backdropController", void 0);
 __decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaLeftNavAutoCollapseController.prototype, "openStateController", void 0);
@@ -645,6 +846,7 @@ const VegaLeftNav = class {
     this.headerRenderer = new VegaLeftNavHeaderRenderer();
     this.footerRenderer = new VegaLeftNavFooterRenderer();
     this.openStateController = new VegaLeftNavOpenStateController();
+    this.backdropManager = new VegaLeftNavBackdropManager();
     this.backdropController = new VegaLeftNavBackdropController();
     this.zIndexController = new VegaLeftNavZIndexController();
     this.listRenderer = new VegaNavListRenderer();
@@ -766,6 +968,9 @@ __decorate$g([
 __decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "openStateController", void 0);
+__decorate$g([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaLeftNav.prototype, "backdropManager", void 0);
 __decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "backdropController", void 0);
@@ -799,7 +1004,7 @@ __decorate$g([
       keyCode: 'Escape',
       // eslint-disable-next-line jsdoc/require-jsdoc
       activeElementInScope: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           // eslint-disable-next-line no-restricted-globals
           return [document.body];
@@ -807,7 +1012,7 @@ __decorate$g([
         return [target.host];
       },
       callback: /* istanbul ignore next */ () => {
-        const backdrop = target.backdropController.getBackdrop();
+        const backdrop = target.backdropManager.getBackdrop();
         if (backdrop && backdrop.visible) {
           target.openStateController.setOpenState('close');
         }

package/dist/cjs/vega-loader-wrapper_2.cjs.entry.js

@@ -8,15 +8,15 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const component = require('./component-1e352960.js');
 const ui = require('./ui-c91c37a7.js');
-const responsiveFormatFacade = require('./responsive-format-facade-1af54330.js');
+const responsiveFormatFacade = require('./responsive-format-facade-25e9f30d.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 require('./number-4816603d.js');
-require('./type-guard-1c3770d4.js');
+require('./type-guard-f354af8b.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-31f2b057.js');
+require('./internal-translation-controller-eb02c3b1.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
 require('./pixel-98f2a10c.js');

package/dist/cjs/vega-pagination-page-size-selector-mobile.cjs.entry.js

@@ -6,8 +6,8 @@ const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const component = require('./component-1e352960.js');
-const translationSlimmer = require('./translation-slimmer-7fb6e94c.js');
-const internalTranslationController = require('./internal-translation-controller-31f2b057.js');
+const translationSlimmer = require('./translation-slimmer-9099f56c.js');
+const internalTranslationController = require('./internal-translation-controller-eb02c3b1.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaEventId = require('./vega-event-id-58afed7a.js');
 const ui = require('./ui-c91c37a7.js');