@globalpayments/vega 2.28.1 → 2.30.0

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -16,7 +16,7 @@ import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaSearch } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaSearch, VegaSearchTrigger, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaInputSelectLazyLoadController } from './slimmers/controllers/vega-input-select-lazy-load-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -54,7 +54,8 @@ export class VegaInputSelect {
     this.lazyLoadController = new VegaInputSelectLazyLoadController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaChange);
     this.searchEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaSearch);
-    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaSearch], () => this.host, true);
+    this.searchTriggerEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaSearchTrigger);
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaSearch, VegaSearchTrigger], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputSelectRuntimeMetricsPayloadDefinition);
     this.isDropdownShow = false;
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -687,6 +688,55 @@ export class VegaInputSelect {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaSearchTrigger",
+      "name": "vegaSearchTrigger",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.30.0"
+          }],
+        "text": "An event emitter notifying the search event triggered within the dropdown,\n   but only if `useDefaultFilter` is set to `false`.\nUnlike the Vegasearch event, this event includes the details of the user who triggered it.\nIt can be triggered in two ways: by pressing \"Enter\" or through user input."
+      },
+      "complexType": {
+        "original": "VegaDropdownSearchTriggerEventDetail",
+        "resolved": "{ searchBy: VegaDropdownSearchTriggerByType; value: string; }",
+        "references": {
+          "VegaDropdownSearchTriggerEventDetail": {
+            "location": "import",
+            "path": "../vega-dropdown/types"
+          }
+        }
+      }
+    }, {
+      "method": "searchTrigger",
+      "name": "searchTrigger",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.30.0"
+          }],
+        "text": "An event emitter notifying the search event triggered within the dropdown,\nUnlike the Vegasearch event, this event includes the details of the user who triggered it.\nIt can be triggered in two ways: by pressing \"Enter\" or through user input."
+      },
+      "complexType": {
+        "original": "VegaDropdownSearchTriggerEventDetail",
+        "resolved": "{ searchBy: VegaDropdownSearchTriggerByType; value: string; }",
+        "references": {
+          "VegaDropdownSearchTriggerEventDetail": {
+            "location": "import",
+            "path": "../vega-dropdown/types"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "doClose": {
@@ -809,6 +859,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "searchEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "searchTriggerEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "eventPrevent", void 0);

package/dist/collection/components/vega-sidenav/icons/chevron-right.js

@@ -0,0 +1,4 @@
+export default {
+  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,
+};

package/dist/collection/components/vega-sidenav/icons/toggle-button-bg.js

@@ -0,0 +1,3 @@
+export default {
+  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>`,
+};

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

@@ -0,0 +1,101 @@
+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 internalVegaZIndexManager from '../../../../helpers/zindex/internal-vega-z-index-manager';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+/** Manages the visibility and z-index of a backdrop element for a side navigation menu. */
+export class VegaSidenavBackdropController extends 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.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.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 = getCurrentBreakpoint();
+    return breakpoint === 'S' || breakpoint === 'M' ? true : false;
+  }
+}
+VegaSidenavBackdropController.backdropClassName = 'vega-sidenav-backdrop';
+__decorate([
+  MapToComponentField()
+], VegaSidenavBackdropController.prototype, "openState", void 0);

package/dist/collection/components/vega-sidenav/slimmers/controllers/vega-sidenav-open-status-controller.js

@@ -0,0 +1,316 @@
+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, MapToComponentMethod } from 'vega-slimmer/core';
+import { executeAfterTransition } from '../../../../utils/effect';
+import ZIndexManager from '../../../../helpers/zindex/internal-vega-z-index-manager';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalSidenavLinkClick } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** Manages the open status of a side navigation component, handling toggling, updating status based on screen size, and other related functionalities. */
+export class VegaSidenavOpenStatusController extends 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.addUniqueObserverToNode(this.host, 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.removeUniqueObserverFromNode(this.host, 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');
+      ZIndexManager.setZIndex(this.sidebar, 'base');
+    }
+    else {
+      executeAfterTransition(() => {
+        this.backdropController.removeZIndex('base');
+        ZIndexManager.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 = 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.formatCustom(input);
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaSidenavOpenStatusController.prototype, "openState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "openByDefault", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "stateUpdateEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "backdropController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "collapseButtonRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaSidenavOpenStatusController.prototype, "initOpenStatus", null);
+__decorate([
+  MapToComponentMethod('watchOpenByDefaultChange')
+], VegaSidenavOpenStatusController.prototype, "updateOpenStatus", null);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaSidenavOpenStatusController.prototype, "registerSidenavLinkClickObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaSidenavOpenStatusController.prototype, "unregisterSidenavLinkClickObserver", null);

package/dist/collection/components/vega-sidenav/slimmers/renderers/vega-sidenav-collapse-button-renderer.js

@@ -0,0 +1,79 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import sidenavChevronRight from '../../icons/chevron-right';
+import sidenavToggleButtonBg from '../../icons/toggle-button-bg';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaIconManager } from '../../../../helpers/icon/icon-manager';
+/** Renders a collapsible button for a sidebar with specific functionality and styling. */
+export class VegaSidenavCollapseButtonRenderer extends 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 (h("i", { role: 'button', onClick: this.handleClickSidebarIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "vega-handler-icon", tabIndex: 0, "aria-label": "Handle Sidebar Icon", ref: (node) => (this.collapseButtonRef = node) },
+      h("style", null, maskImageStyle),
+      h("vega-icon", { size: "size-16", icon: 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 = VegaIconManager.getIcon(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}}`;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'sidenav-chevron-right': sidenavChevronRight,
+    'sidenav-toggle-button-bg': sidenavToggleButtonBg,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaSidenavCollapseButtonRenderer.prototype, "host", void 0);