npm - @carbon/ibm-products-web-components - Versions diffs - 0.41.1 → 0.42.0 - Mend

@carbon/ibm-products-web-components 0.41.1 → 0.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/es-custom/components/side-panel/side-panel.js CHANGED Viewed

@@ -23,6 +23,7 @@ import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-load
 import { moderate02 } from "@carbon/motion";
 import '@carbon/web-components/es-custom/components/icon-button/index.js';
 import '@carbon/web-components/es-custom/components/layer/index.js';
+import "@carbon-labs/wc-resizer/es/index.js";
 //#region src/components/side-panel/side-panel.ts
 /**
 * @license
@@ -73,6 +74,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this._actionsMultiple = "";
 		this._slugCloseSize = "sm";
 		this._customHeaderElements = [];
+		this._accumulatedDelta = 0;
 		this._handleHostKeydown = (event) => {
 			if (event.key === "Tab" && !this.slideIn) {
 				const { first: _firstElement, last: _lastElement } = this.getFocusable();
@@ -170,6 +172,59 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 				el.classList.remove(`cds-custom--visually-hidden`);
 			});
 		};
+		this._handleResizeStart = () => {
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+			this._accumulatedDelta = 0;
+		};
+		this._handleResizeDrag = (event) => {
+			const { delta, isKeyboard, key } = event.detail;
+			if (!this._sidePanelWidth) this._sidePanelWidth = this._sidePanel?.clientWidth;
+			if (isKeyboard && (key === "Home" || key === "End")) {
+				if (key === "Home") this.style.setProperty("--c4p-side-panel-modified-size", "75vw");
+				else this.style.setProperty("--c4p-side-panel-modified-size", "16rem");
+				return;
+			}
+			let calculatedWidth;
+			if (isKeyboard) {
+				this._accumulatedDelta += delta;
+				calculatedWidth = this._sidePanelWidth - (this.placement === "right" ? this._accumulatedDelta : -this._accumulatedDelta);
+			} else calculatedWidth = this._sidePanelWidth - (this.placement === "right" ? delta : -delta);
+			if (this._sidePanel?.style) this._sidePanel.style.transition = "none";
+			const minWidth = 256;
+			const maxWidth = window.innerWidth * .75;
+			const newWidth = Math.max(minWidth, Math.min(maxWidth, calculatedWidth));
+			this.style.setProperty("--c4p-side-panel-modified-size", `${newWidth}px`);
+		};
+		this._handleResizeEnd = () => {
+			this._accumulatedDelta = 0;
+			this._sidePanel?.style?.removeProperty("transition");
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+			if (this._resizerHandle) {
+				this._resizerHandle.setAttribute("aria-label", `side panel is covering ${this._getPanelWidthPercent()}% of screen`);
+				this._resizerHandle.setAttribute("aria-valuenow", this._getPanelWidthPercent().toString());
+			}
+		};
+		this._handleResizeReset = () => {
+			const sizeMap = {
+				xs: "16rem",
+				sm: "20rem",
+				md: "30rem",
+				lg: "40rem",
+				xl: "65rem",
+				"2xl": "80rem"
+			};
+			const defaultSize = sizeMap[this.size] || sizeMap.md;
+			const defaultSizeInPx = parseFloat(defaultSize) * 16;
+			this._sidePanelWidth = Math.min(defaultSizeInPx, window.innerWidth * .75);
+			this.style.removeProperty("--c4p-side-panel-modified-size");
+		};
+		this._getPanelWidthPercent = (customWidth) => {
+			if (customWidth) {
+				const remInPixels = parseFloat(customWidth) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+				return Math.round(remInPixels / window.innerWidth * 100);
+			}
+			return Math.round((this._sidePanel?.clientWidth || 0) / window.innerWidth * 100);
+		};
 		this._handleCurrentStepUpdate = () => {
 			const scrollable = this._animateScrollWrapper ?? this._innerContent;
 			if (scrollable) scrollable.scrollTop = 0;
@@ -187,6 +242,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		this.hideCloseButton = false;
 		this.size = "md";
 		this.slideIn = false;
+		this.resizable = false;
 	}
 	/**
 	* Get focusable elements.
@@ -336,10 +392,18 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 		super.connectedCallback();
 		this.disconnectObservers();
 		this.connectObservers();
+		this.addEventListener("resize-start", this._handleResizeStart);
+		this.addEventListener("resize-drag", this._handleResizeDrag);
+		this.addEventListener("resize-end", this._handleResizeEnd);
+		this.addEventListener("resize-reset", this._handleResizeReset);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.disconnectObservers();
+		this.removeEventListener("resize-start", this._handleResizeStart);
+		this.removeEventListener("resize-drag", this._handleResizeDrag);
+		this.removeEventListener("resize-end", this._handleResizeEnd);
+		this.removeEventListener("resize-reset", this._handleResizeReset);
 	}
 	render() {
 		const { closeIconDescription, closeIconTooltipAlignment, condensedActions, currentStep, includeOverlay, labelText, navigationBackIconDescription, open, placement, hideCloseButton, size, slideIn, title } = this;
@@ -465,8 +529,21 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
         ?condensed-actions=${condensedActions}
         ?overlay=${includeOverlay || slideIn}
         ?slide-in=${slideIn}
+        ?resizable=${this.resizable && !slideIn}
         size=${size}
       >
+        ${!slideIn && this.resizable && typeof window !== "undefined" && window.innerWidth > 768 ? html`<clabs-resizer-handle
+              class="${blockClass}__resizer"
+              orientation="horizontal"
+              aria-valuemin="${this._getPanelWidthPercent("16rem")}"
+              aria-valuemax="75"
+              aria-valuenow="${this._getPanelWidthPercent()}"
+              aria-label="side panel is covering ${this._getPanelWidthPercent()}% of screen"
+              @resize-start=${this._handleResizeStart}
+              @resize-drag=${this._handleResizeDrag}
+              @resize-end=${this._handleResizeEnd}
+              @resize-reset=${this._handleResizeReset}
+            ></clabs-resizer-handle>` : ""}
         ${this._doAnimateTitle ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
               ${headerTemplate} ${mainTemplate}
             </div>` : html` ${headerTemplate} ${mainTemplate}`}
@@ -519,6 +596,11 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
 				this._launcher = null;
 			}
 		}
+		if (changedProperties.has("size") && this.resizable && !this.slideIn || changedProperties.has("resizable") && !this.resizable) this.style.removeProperty("--c4p-side-panel-modified-size");
+		if ((changedProperties.has("resizable") || changedProperties.has("open")) && this.resizable && !this.slideIn && this.open) {
+			await this.updateComplete;
+			this._sidePanelWidth = this._sidePanel?.clientWidth;
+		}
 	}
 	/**
 	* @param ms The number of milliseconds.
@@ -564,6 +646,7 @@ __decorate([query(`.${blockClass}__label-text`)], CDSSidePanel.prototype, "_labe
 __decorate([query(`.${blockClass}__title-text`)], CDSSidePanel.prototype, "_title", void 0);
 __decorate([query(`.${blockClass}__subtitle-text`)], CDSSidePanel.prototype, "_subtitle", void 0);
 __decorate([query(`.${blockClass}__inner-content`)], CDSSidePanel.prototype, "_innerContent", void 0);
+__decorate([query("clabs-resizer-handle")], CDSSidePanel.prototype, "_resizerHandle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_isOpen", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_containerScrollTop", void 0);
@@ -574,6 +657,8 @@ __decorate([state()], CDSSidePanel.prototype, "_actionsCount", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_actionsMultiple", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_slugCloseSize", void 0);
 __decorate([state()], CDSSidePanel.prototype, "_customHeaderElements", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_sidePanelWidth", void 0);
+__decorate([state()], CDSSidePanel.prototype, "_accumulatedDelta", void 0);
 __decorate([HostListener("keydown")], CDSSidePanel.prototype, "_handleHostKeydown", void 0);
 __decorate([HostListener("document:keydown")], CDSSidePanel.prototype, "_handleKeydown", void 0);
 __decorate([property({
@@ -648,6 +733,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSSidePanel.prototype, "slideIn", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSSidePanel.prototype, "resizable", void 0);
 __decorate([property({
 	reflect: false,
 	type: String

package/es-custom/components/side-panel/side-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-panel.js","names":["Close16","styles","customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2023, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport styles from './side-panel.scss?lit';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport { moderate02 } from '@carbon/motion';\nimport Handle from '../../globals/internal/handle';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport '@carbon/web-components/es-custom/components/icon-button/index.js';\nimport '@carbon/web-components/es-custom/components/layer/index.js';\nimport '../action-set/index.js';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst blockClass = `${prefix}--side-panel`;\n\n/\n Observes resize of the given element with the given resize observer.\n \n @param observer The resize observer.\n * @param elem The element to observe the resize.\n /\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n if (!elem) {\n return null;\n }\n observer.observe(elem);\n return {\n release() {\n observer.unobserve(elem);\n return null;\n },\n } as Handle;\n};\n\n/\n SidePanel.\n \n @element c4p-side-panel\n * @csspart dialog The dialog.\n * @fires c4p-side-panel-beingclosed\n * The custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n /\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n /\n The handle for observing resize of the parent element of this element.\n /\n private _hObserveResize: Handle \| null = null;\n\n /\n The element that had focus before this side-panel gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track side panel.\n /\n @query(`.${blockClass}`)\n private _sidePanel!: HTMLDivElement;\n\n @query(`.${blockClass}__animated-scroll-wrapper`)\n private _animateScrollWrapper?: HTMLElement;\n\n @query(`.${blockClass}__label-text`)\n private _label!: HTMLElement;\n\n @query(`.${blockClass}__title-text`)\n private _title!: HTMLElement;\n\n @query(`.${blockClass}__subtitle-text`)\n private _subtitle!: HTMLElement;\n\n @query(`.${blockClass}__inner-content`)\n private _innerContent!: HTMLElement;\n\n @state()\n _doAnimateTitle = true;\n\n @state()\n _isOpen = false;\n\n @state()\n _containerScrollTop = -16;\n\n @state()\n _hasSubtitle = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasActionToolbar = false;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _actionsMultiple: 'single' \| 'double' \| 'triple' \| '' = '';\n\n @state()\n _slugCloseSize = 'sm';\n\n @state()\n _customHeaderElements: Element[] = [];\n\n /\n Get focusable elements.\n \n Querying all tabbable items.\n \n @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.\n /\n private getFocusable(): {\n first: HTMLElement \| undefined;\n last: HTMLElement \| undefined;\n all: HTMLElement[];\n } {\n const elements: HTMLElement[] = [];\n\n // Add back button if present (shadow DOM)\n if (this.currentStep > 0) {\n const backButton = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__navigation-back-button`\n );\n if (backButton) {\n elements.push(backButton);\n }\n }\n\n // Add tabbable elements from above-title slot (light DOM - breadcrumbs, etc.)\n const aboveTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"above-title\"]'\n );\n if (aboveTitleSlot) {\n const aboveTitleElements = aboveTitleSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...aboveTitleElements);\n }\n\n // Add label text if present (shadow DOM)\n const labelText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__label-text`\n );\n if (labelText) {\n elements.push(labelText);\n }\n\n // Add title if present (shadow DOM)\n const titleText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__title-text`\n );\n if (titleText) {\n elements.push(titleText);\n }\n\n // Add slug elements if present (light DOM)\n if (this._hasSlug) {\n const slugElements = Array.from(\n this.querySelectorAll<HTMLElement>(`${carbonPrefix}-slug`)\n );\n elements.push(...slugElements);\n }\n\n // Add close button if not hidden (shadow DOM)\n if (!this.hideCloseButton) {\n const closeButton = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__close-button`\n );\n if (closeButton) {\n elements.push(closeButton);\n }\n }\n\n // Add subtitle if present (shadow DOM)\n const subtitleText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__subtitle-text`\n );\n if (subtitleText && !subtitleText.hidden) {\n elements.push(subtitleText);\n }\n\n // Add tabbable elements from below-title slot (light DOM)\n const belowTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"below-title\"]'\n );\n if (belowTitleSlot) {\n const belowTitleElements = belowTitleSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...belowTitleElements);\n }\n\n // Add action toolbar elements (light DOM)\n const actionToolbarSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"action-toolbar\"]'\n );\n if (actionToolbarSlot) {\n const actionToolbarElements = actionToolbarSlot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement &&\n typeof (el as HTMLElement).focus === 'function'\n );\n elements.push(...actionToolbarElements);\n }\n\n // Add body content tabbable elements (light DOM - default slot)\n const defaultSlot =\n this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (defaultSlot) {\n const bodyElements = defaultSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...bodyElements);\n }\n\n // Add action buttons (light DOM)\n const actionsSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"actions\"]'\n );\n if (actionsSlot) {\n const actionElements = actionsSlot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement &&\n typeof (el as HTMLElement).focus === 'function'\n );\n elements.push(...actionElements);\n }\n\n // Filter for focusable items\n const all = elements.filter(\n (el): el is HTMLElement => typeof el?.focus === 'function'\n );\n\n return {\n first: all[0],\n last: all[all.length - 1],\n all,\n };\n }\n\n /\n Handle the keydown event.\n * Trap the focus inside the side-panel by tracking keydown.key == `Tab`\n \n @param {KeyboardEvent} event The keyboard event object.\n /\n @HostListener('keydown')\n protected _handleHostKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && !this.slideIn) {\n const { first: _firstElement, last: _lastElement } = this.getFocusable();\n\n if (\n event.shiftKey &&\n (this.shadowRoot?.activeElement === _firstElement \|\|\n document.activeElement === _firstElement)\n ) {\n event.preventDefault();\n\n _lastElement?.focus();\n } else if (!event.shiftKey && document.activeElement === _lastElement) {\n event.preventDefault();\n\n _firstElement?.focus();\n }\n }\n };\n\n @HostListener('document:keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if (key === 'Esc' \|\| key === 'Escape') {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _reducedMotion =\n typeof window !== 'undefined' && window?.matchMedia\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : { matches: true };\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleClickOnOverlay(event: MouseEvent) {\n if (!this.preventCloseOnClickOutside) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleCloseClick(event: MouseEvent) {\n this._handleUserInitiatedClose(event.target);\n }\n\n /\n Handles user-initiated close request of this side-panel.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleNavigateBack(triggeredBy: EventTarget \| null) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n {\n composed: true,\n detail: {\n triggeredBy,\n },\n }\n )\n );\n }\n\n private _adjustPageContent = () => {\n // sets/resets styles based on slideIn property and selectorPageContent;\n if (this.selectorPageContent) {\n const pageContentEl: HTMLElement \| null = document.querySelector(\n this.selectorPageContent\n );\n\n if (pageContentEl) {\n const newValues = {\n marginInlineStart: '',\n marginInlineEnd: '',\n inlineSize: '',\n transition: this._reducedMotion.matches\n ? 'none'\n : `all ${moderate02}`,\n transitionProperty: 'margin-inline-start, margin-inline-end',\n };\n if (this.open) {\n newValues.inlineSize = 'auto';\n if (this.placement === 'left') {\n newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n } else {\n newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n }\n }\n if (this.slideIn) {\n Object.keys(newValues).forEach((key) => {\n pageContentEl.style[key] = newValues[key];\n });\n }\n }\n }\n };\n\n private _checkSetOpen = () => {\n const { _sidePanel: sidePanel } = this;\n if (sidePanel && this._isOpen) {\n if (this._reducedMotion?.matches) {\n this._isOpen = false;\n } else {\n // wait until the side panel has transitioned off the screen to remove\n sidePanel.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n }\n } else if (this.open) {\n // allow the html to render before animating in the side panel\n // Use requestAnimationFrame to ensure the DOM is rendered before triggering animation\n requestAnimationFrame(() => {\n this._isOpen = this.open;\n });\n } else {\n // When closing, set immediately\n this._isOpen = false;\n }\n };\n\n private _checkUpdateIconButtonSizes = () => {\n const slug = this.querySelector(`${prefix}-slug`);\n const otherButtons = this?.shadowRoot?.querySelectorAll(\n '#nav-back-button, #close-button'\n );\n\n let iconButtonSize = 'sm';\n\n if (slug \|\| otherButtons?.length) {\n const actions = this?.querySelectorAll?.(\n `${prefix}-button[slot='actions']`\n );\n\n if (actions?.length && /l/.test(this.size)) {\n iconButtonSize = 'md';\n }\n }\n\n if (slug) {\n slug?.setAttribute('size', iconButtonSize);\n }\n\n if (otherButtons) {\n [...otherButtons].forEach((btn) => {\n btn.setAttribute('size', iconButtonSize);\n });\n }\n };\n\n private _handleSlugChange(e: Event) {\n this._checkUpdateIconButtonSizes();\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n }\n\n private _handleSubtitleChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const subtitle = target?.assignedElements();\n\n this._hasSubtitle = subtitle.length > 0;\n }\n\n private _handleCustomHeaderSlotChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const customHeaderElms = target?.assignedElements();\n customHeaderElms.forEach((el) => {\n if (el instanceof HTMLElement) {\n el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;\n this._customHeaderElements.push(el);\n }\n });\n }\n\n private _handleActionToolbarChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const toolbarActions = target?.assignedElements();\n\n this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n if (this._hasActionToolbar) {\n for (let i = 0; i < toolbarActions.length; i++) {\n const toolbarAction = toolbarActions[i];\n // toolbar actions size should always be sm\n toolbarAction.setAttribute('size', 'sm');\n\n // Add leading button class to first button\n if (i === 0) {\n toolbarAction.classList.add(\n `${blockClass}__action-toolbar-leading-button`\n );\n } else {\n toolbarAction.classList.remove(\n `${blockClass}__action-toolbar-leading-button`\n );\n }\n }\n }\n }\n\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n\n // update slug size\n this._checkUpdateIconButtonSizes();\n\n const actionsCount = actions?.length ?? 0;\n this._actionsCount = actionsCount;\n\n // Set actions-multiple attribute for container query styling\n if (actionsCount === 1) {\n this._actionsMultiple = 'single';\n } else if (actionsCount === 2) {\n this._actionsMultiple = 'double';\n } else if (actionsCount === 3) {\n this._actionsMultiple = 'triple';\n } else {\n this._actionsMultiple = '';\n }\n }\n\n private _checkSetDoAnimateTitle = () => {\n let canDoAnimateTitle = false;\n\n if (\n this._sidePanel &&\n this.open &&\n this.animateTitle &&\n this?.title?.length &&\n !this._reducedMotion.matches\n ) {\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n // used to calculate the header moves\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-distance`,\n `${scrollAnimationDistance}`\n );\n\n let scrollEl = this._animateScrollWrapper;\n if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n scrollEl = this._innerContent;\n }\n\n if (scrollEl) {\n const innerComputed = window?.getComputedStyle(this._innerContent);\n const innerPaddingHeight = innerComputed\n ? parseFloat(innerComputed?.paddingTop) +\n parseFloat(innerComputed?.paddingBottom)\n : 0;\n\n canDoAnimateTitle =\n (!!this.labelText \|\| !!this._hasActionToolbar \|\| this._hasSubtitle) &&\n scrollEl.scrollHeight - scrollEl.clientHeight >=\n scrollAnimationDistance + innerPaddingHeight;\n }\n }\n\n this._doAnimateTitle = canDoAnimateTitle;\n };\n\n /\n The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n /\n // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n // @ts-ignore\n private _resizeObserver = new ResizeObserver(() => {\n if (this._sidePanel) {\n this._checkSetDoAnimateTitle();\n }\n });\n\n private _getScrollAnimationDistance = () => {\n const labelHeight = this?._label?.offsetHeight ?? 0;\n const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n const titleVerticalBorder = this._hasActionToolbar\n ? this._title.offsetHeight - this._title.clientHeight\n : 0;\n\n return labelHeight + subtitleHeight + titleVerticalBorder;\n };\n\n private _scrollObserver = () => {\n const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n const animationProgress =\n Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;\n\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n `${animationProgress}`\n );\n if (animationProgress === 1) {\n this._customHeaderElements.forEach((el) => {\n el.classList.add(`cds-custom--visually-hidden`);\n });\n } else {\n this._customHeaderElements.forEach((el) => {\n el.classList.remove(`cds-custom--visually-hidden`);\n });\n }\n };\n\n private _handleCurrentStepUpdate = () => {\n const scrollable = this._animateScrollWrapper ?? this._innerContent;\n if (scrollable) {\n scrollable.scrollTop = 0;\n }\n };\n\n /\n Determines if the title will animate on scroll\n /\n @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n animateTitle = true;\n\n /\n Sets the close button icon description\n /\n @property({\n reflect: true,\n attribute: 'close-icon-description',\n type: String,\n })\n closeIconDescription = 'Close';\n\n /\n Sets the close button tooltip alignment\n /\n @property({\n reflect: true,\n attribute: 'close-icon-tooltip-alignment',\n type: String,\n })\n closeIconTooltipAlignment = 'left';\n\n /\n Determines whether the side panel should render the condensed version (affects action buttons primarily)\n /\n @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n condensedActions = false;\n\n /\n Sets the current step of the side panel\n /\n @property({ reflect: true, attribute: 'current-step', type: Number })\n currentStep;\n\n /\n Determines whether the side panel should render with an overlay\n /\n @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n includeOverlay = false;\n\n /\n Sets the label text which will display above the title text\n /\n @property({ reflect: true, attribute: 'label-text' })\n labelText;\n\n /\n Sets the icon description for the navigation back icon button\n /\n @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n navigationBackIconDescription = 'Back';\n\n /\n `true` if the side-panel should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n SidePanel placement.\n /\n @property({ reflect: true, type: String })\n placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n /\n Prevent closing on click outside of side-panel\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n Selector for page content, used to push content to side except\n /\n @property({ reflect: true, attribute: 'selector-page-content' })\n selectorPageContent = '';\n\n /\n Show/hide the \"X\" close button\n /\n @property({ attribute: 'hide-close-button', type: Boolean })\n hideCloseButton = false;\n\n /\n SidePanel size.\n /\n @property({ reflect: true, type: String })\n size = SIDE_PANEL_SIZE.MEDIUM;\n\n /\n Determines if this panel slides in\n /\n @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n slideIn = false;\n\n /\n Sets the title text\n /\n @property({ reflect: false, type: String })\n title;\n\n async connectObservers() {\n await this.updateComplete;\n this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n }\n\n disconnectObservers() {\n if (this._hObserveResize) {\n this._hObserveResize = this._hObserveResize.release();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.disconnectObservers();\n this.connectObservers();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.disconnectObservers();\n }\n\n render() {\n const {\n closeIconDescription,\n closeIconTooltipAlignment,\n condensedActions,\n currentStep,\n includeOverlay,\n labelText,\n navigationBackIconDescription,\n open,\n placement,\n hideCloseButton,\n size,\n slideIn,\n title,\n } = this;\n\n if (!open && !this._isOpen) {\n return html``;\n }\n\n const titleTemplate = html` <div\n class=${`${blockClass}__title`}\n ?no-label=${!!labelText}\n >\n <h2 class=${title ? `${blockClass}__title-text` : ''} tabindex=\"0\">\n ${title}\n </h2>\n ${this._doAnimateTitle\n ? html`<h2\n class=${`${blockClass}__collapsed-title-text`}\n aria-hidden=\"true\"\n >\n ${title}\n </h2>`\n : ''}\n </div>`;\n\n const headerHasTitleClass = this.title\n ? ` ${blockClass}__header--has-title `\n : '';\n const headerTemplate = html`\n <div\n class=${`${blockClass}__header${headerHasTitleClass}`}\n ?detail-step=${currentStep > 0}\n ?no-title-animation=${!this._doAnimateTitle}\n ?reduced-motion=${this._reducedMotion.matches}\n >\n <!-- render back button -->\n ${currentStep > 0\n ? html`<cds-custom-icon-button\n align=\"bottom-left\"\n aria-label=${navigationBackIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n @click=${this._handleNavigateBack}\n >\n ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n <span slot=\"tooltip-content\">\n ${navigationBackIconDescription}\n </span>\n </cds-custom-icon-button>`\n : ''}\n\n <!-- slot for custom header components -->\n <slot\n name=\"above-title\"\n @slotchange=${this._handleCustomHeaderSlotChange}\n ></slot>\n\n <!-- render title label -->\n ${title?.length && labelText?.length\n ? html` <p class=${`${blockClass}__label-text`} tabindex=\"0\">\n ${labelText}\n </p>`\n : ''}\n\n <!-- title -->\n ${title ? titleTemplate : ''}\n\n <!-- render slug and close button area -->\n <div class=${`${blockClass}__slug-and-close`}>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n <!-- {normalizedSlug} -->\n ${!hideCloseButton\n ? html`<cds-custom-icon-button\n align=${closeIconTooltipAlignment}\n aria-label=${closeIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${blockClass}__close-button`}\n @click=${this._handleCloseClick}\n >\n ${iconLoader(Close16, { slot: 'icon' })}\n <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n </cds-custom-icon-button>`\n : ''}\n </div>\n\n <!-- render sub title -->\n <p\n class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n ?hidden=${!this._hasSubtitle}\n ?no-title-animation=${!this._doAnimateTitle}\n ?no-action-toolbar=${!this._hasActionToolbar}\n ?no-title=${!title}\n tabindex=\"0\"\n >\n <slot\n name=\"subtitle\"\n @slotchange=${this._handleSubtitleChange}\n ></slot>\n </p>\n\n <!-- slot for custom header components -->\n <slot\n name=\"below-title\"\n @slotchange=${this._handleCustomHeaderSlotChange}\n ></slot>\n\n <div\n class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n ?hidden=${!this._hasActionToolbar}\n ?no-title-animation=${!this._doAnimateTitle}\n >\n <slot\n name=\"action-toolbar\"\n @slotchange=${this._handleActionToolbarChange}\n ></slot>\n </div>\n </div>\n `;\n\n const mainTemplate = html`<div\n class=${`${blockClass}__inner-content`}\n ?scrolls=${!this._doAnimateTitle}\n >\n <cds-custom-layer level=\"1\">\n <slot></slot>\n </cds-custom-layer>\n </div> `;\n\n const sidePanelAnimateTitleClass = this._doAnimateTitle\n ? ` ${blockClass}--animated-title`\n : '';\n\n return html`\n <div\n class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n part=\"dialog\"\n role=\"complementary\"\n placement=\"${placement}\"\n ?has-slug=${this._hasSlug}\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n ?condensed-actions=${condensedActions}\n ?overlay=${includeOverlay \|\| slideIn}\n ?slide-in=${slideIn}\n size=${size}\n >\n ${this._doAnimateTitle\n ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n ${headerTemplate} ${mainTemplate}\n </div>`\n : html` ${headerTemplate} ${mainTemplate}`}\n\n <c4p-action-set\n class=${`${blockClass}__actions-container`}\n ?hidden=${this._actionsCount === 0}\n size=\"md\"\n button-size=${condensedActions ? 'md' : 'lg'}\n actions-multiple=${this._actionsMultiple}\n >\n <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n </c4p-action-set>\n </div>\n\n ${includeOverlay\n ? html`<div\n ?slide-in=${slideIn}\n class=${`${blockClass}__overlay`}\n ?open=${this.open}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n tabindex=\"-1\"\n @click=${this._handleClickOnOverlay}\n ></div>`\n : ''}\n `;\n }\n\n async updated(changedProperties) {\n if (changedProperties.has('currentStep')) {\n this._handleCurrentStepUpdate();\n }\n\n if (changedProperties.has('_doAnimateTitle')) {\n this?._animateScrollWrapper?.removeEventListener(\n 'scroll',\n this._scrollObserver\n );\n\n if (this._doAnimateTitle) {\n this?._animateScrollWrapper?.addEventListener(\n 'scroll',\n this._scrollObserver\n );\n } else {\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n '0'\n );\n }\n }\n\n if (\n changedProperties.has('_isOpen') \|\|\n changedProperties.has('animateTitle')\n ) {\n / @state property changed /\n this._checkSetDoAnimateTitle();\n }\n\n if (\n changedProperties.has('slideIn') \|\|\n changedProperties.has('open') \|\|\n changedProperties.has('includeOverlay')\n ) {\n this._adjustPageContent();\n }\n\n if (changedProperties.has('open')) {\n this._checkSetOpen();\n\n this.disconnectObservers();\n if (this.open) {\n this.connectObservers();\n\n this._launcher = this.ownerDocument!.activeElement;\n\n await (this.constructor as typeof CDSSidePanel)._delay();\n\n if (this.selectorInitialFocus?.trim()?.length) {\n const focusNode = this.querySelector(this.selectorInitialFocus);\n\n (focusNode as HTMLElement)?.focus();\n } else if (!this.slideIn) {\n const { first: _firstElement } = this.getFocusable();\n\n _firstElement?.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement)?.focus === 'function'\n ) {\n (this._launcher as HTMLElement)?.focus();\n this._launcher = null;\n }\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n /\n static get eventBeforeClose() {\n return `${prefix}-side-panel-beingclosed`;\n }\n\n /\n The name of the custom event fired after this side-panel is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-side-panel-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-side-panel-navigate-back`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"side-panel.js","names":["Close16","styles","customElement"],"sources":["../../../src/components/side-panel/side-panel.ts"],"sourcesContent":["/*\n @license\n \n Copyright IBM Corp. 2023, 2024\n \n This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix, carbonPrefix } from '../../globals/settings';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';\nimport styles from './side-panel.scss?lit';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';\nimport { moderate02 } from '@carbon/motion';\nimport Handle from '../../globals/internal/handle';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport '@carbon/web-components/es-custom/components/icon-button/index.js';\nimport '@carbon/web-components/es-custom/components/layer/index.js';\nimport '../action-set/index.js';\nimport '@carbon-labs/wc-resizer/es/index.js';\n\nexport { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };\n\nconst blockClass = `${prefix}--side-panel`;\n\n/\n Observes resize of the given element with the given resize observer.\n \n @param observer The resize observer.\n * @param elem The element to observe the resize.\n /\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n if (!elem) {\n return null;\n }\n observer.observe(elem);\n return {\n release() {\n observer.unobserve(elem);\n return null;\n },\n } as Handle;\n};\n\n/\n SidePanel.\n \n @element c4p-side-panel\n * @csspart dialog The dialog.\n * @fires c4p-side-panel-beingclosed\n * The custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.\n * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)\n /\n@customElement(`${prefix}-side-panel`)\nclass CDSSidePanel extends HostListenerMixin(LitElement) {\n /\n The handle for observing resize of the parent element of this element.\n /\n private _hObserveResize: Handle \| null = null;\n\n /\n The element that had focus before this side-panel gets open.\n /\n private _launcher: Element \| null = null;\n\n /\n Node to track side panel.\n /\n @query(`.${blockClass}`)\n private _sidePanel!: HTMLDivElement;\n\n @query(`.${blockClass}__animated-scroll-wrapper`)\n private _animateScrollWrapper?: HTMLElement;\n\n @query(`.${blockClass}__label-text`)\n private _label!: HTMLElement;\n\n @query(`.${blockClass}__title-text`)\n private _title!: HTMLElement;\n\n @query(`.${blockClass}__subtitle-text`)\n private _subtitle!: HTMLElement;\n\n @query(`.${blockClass}__inner-content`)\n private _innerContent!: HTMLElement;\n\n /\n Reference to the resizer handle element\n /\n @query('clabs-resizer-handle')\n private _resizerHandle?: HTMLElement;\n\n @state()\n _doAnimateTitle = true;\n\n @state()\n _isOpen = false;\n\n @state()\n _containerScrollTop = -16;\n\n @state()\n _hasSubtitle = false;\n\n @state()\n _hasSlug = false;\n\n @state()\n _hasActionToolbar = false;\n\n @state()\n _actionsCount = 0;\n\n @state()\n _actionsMultiple: 'single' \| 'double' \| 'triple' \| '' = '';\n\n @state()\n _slugCloseSize = 'sm';\n\n @state()\n _customHeaderElements: Element[] = [];\n\n @state()\n _sidePanelWidth?: number;\n\n @state()\n _accumulatedDelta = 0;\n\n /\n Get focusable elements.\n \n Querying all tabbable items.\n \n @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.\n /\n private getFocusable(): {\n first: HTMLElement \| undefined;\n last: HTMLElement \| undefined;\n all: HTMLElement[];\n } {\n const elements: HTMLElement[] = [];\n\n // Add back button if present (shadow DOM)\n if (this.currentStep > 0) {\n const backButton = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__navigation-back-button`\n );\n if (backButton) {\n elements.push(backButton);\n }\n }\n\n // Add tabbable elements from above-title slot (light DOM - breadcrumbs, etc.)\n const aboveTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"above-title\"]'\n );\n if (aboveTitleSlot) {\n const aboveTitleElements = aboveTitleSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...aboveTitleElements);\n }\n\n // Add label text if present (shadow DOM)\n const labelText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__label-text`\n );\n if (labelText) {\n elements.push(labelText);\n }\n\n // Add title if present (shadow DOM)\n const titleText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__title-text`\n );\n if (titleText) {\n elements.push(titleText);\n }\n\n // Add slug elements if present (light DOM)\n if (this._hasSlug) {\n const slugElements = Array.from(\n this.querySelectorAll<HTMLElement>(`${carbonPrefix}-slug`)\n );\n elements.push(...slugElements);\n }\n\n // Add close button if not hidden (shadow DOM)\n if (!this.hideCloseButton) {\n const closeButton = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__close-button`\n );\n if (closeButton) {\n elements.push(closeButton);\n }\n }\n\n // Add subtitle if present (shadow DOM)\n const subtitleText = this.shadowRoot?.querySelector<HTMLElement>(\n `.${blockClass}__subtitle-text`\n );\n if (subtitleText && !subtitleText.hidden) {\n elements.push(subtitleText);\n }\n\n // Add tabbable elements from below-title slot (light DOM)\n const belowTitleSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"below-title\"]'\n );\n if (belowTitleSlot) {\n const belowTitleElements = belowTitleSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...belowTitleElements);\n }\n\n // Add action toolbar elements (light DOM)\n const actionToolbarSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"action-toolbar\"]'\n );\n if (actionToolbarSlot) {\n const actionToolbarElements = actionToolbarSlot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement &&\n typeof (el as HTMLElement).focus === 'function'\n );\n elements.push(...actionToolbarElements);\n }\n\n // Add body content tabbable elements (light DOM - default slot)\n const defaultSlot =\n this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (defaultSlot) {\n const bodyElements = defaultSlot\n .assignedElements({ flatten: true })\n .flatMap((el) =>\n Array.from(el.querySelectorAll<HTMLElement>(selectorTabbable))\n );\n elements.push(...bodyElements);\n }\n\n // Add action buttons (light DOM)\n const actionsSlot = this.shadowRoot?.querySelector<HTMLSlotElement>(\n 'slot[name=\"actions\"]'\n );\n if (actionsSlot) {\n const actionElements = actionsSlot\n .assignedElements({ flatten: true })\n .filter(\n (el): el is HTMLElement =>\n el instanceof HTMLElement &&\n typeof (el as HTMLElement).focus === 'function'\n );\n elements.push(...actionElements);\n }\n\n // Filter for focusable items\n const all = elements.filter(\n (el): el is HTMLElement => typeof el?.focus === 'function'\n );\n\n return {\n first: all[0],\n last: all[all.length - 1],\n all,\n };\n }\n\n /\n Handle the keydown event.\n * Trap the focus inside the side-panel by tracking keydown.key == `Tab`\n \n @param {KeyboardEvent} event The keyboard event object.\n /\n @HostListener('keydown')\n protected _handleHostKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && !this.slideIn) {\n const { first: _firstElement, last: _lastElement } = this.getFocusable();\n\n if (\n event.shiftKey &&\n (this.shadowRoot?.activeElement === _firstElement \|\|\n document.activeElement === _firstElement)\n ) {\n event.preventDefault();\n\n _lastElement?.focus();\n } else if (!event.shiftKey && document.activeElement === _lastElement) {\n event.preventDefault();\n\n _firstElement?.focus();\n }\n }\n };\n\n @HostListener('document:keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n if (key === 'Esc' \|\| key === 'Escape') {\n this._handleUserInitiatedClose(target);\n }\n };\n\n private _reducedMotion =\n typeof window !== 'undefined' && window?.matchMedia\n ? window.matchMedia('(prefers-reduced-motion: reduce)')\n : { matches: true };\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleClickOnOverlay(event: MouseEvent) {\n if (!this.preventCloseOnClickOutside) {\n this._handleUserInitiatedClose(event.target);\n }\n }\n\n /\n Handles `click` event on the side-panel container.\n \n @param event The event.\n /\n private _handleCloseClick(event: MouseEvent) {\n this._handleUserInitiatedClose(event.target);\n }\n\n /\n Handles user-initiated close request of this side-panel.\n \n @param triggeredBy The element that triggered this close request.\n /\n private _handleUserInitiatedClose(triggeredBy: EventTarget \| null) {\n if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventClose,\n init\n )\n );\n }\n }\n }\n\n private _handleNavigateBack(triggeredBy: EventTarget \| null) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSidePanel).eventNavigateBack,\n {\n composed: true,\n detail: {\n triggeredBy,\n },\n }\n )\n );\n }\n\n private _adjustPageContent = () => {\n // sets/resets styles based on slideIn property and selectorPageContent;\n if (this.selectorPageContent) {\n const pageContentEl: HTMLElement \| null = document.querySelector(\n this.selectorPageContent\n );\n\n if (pageContentEl) {\n const newValues = {\n marginInlineStart: '',\n marginInlineEnd: '',\n inlineSize: '',\n transition: this._reducedMotion.matches\n ? 'none'\n : `all ${moderate02}`,\n transitionProperty: 'margin-inline-start, margin-inline-end',\n };\n if (this.open) {\n newValues.inlineSize = 'auto';\n if (this.placement === 'left') {\n newValues.marginInlineStart = `${this?._sidePanel?.offsetWidth}px`;\n } else {\n newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;\n }\n }\n if (this.slideIn) {\n Object.keys(newValues).forEach((key) => {\n pageContentEl.style[key] = newValues[key];\n });\n }\n }\n }\n };\n\n private _checkSetOpen = () => {\n const { _sidePanel: sidePanel } = this;\n if (sidePanel && this._isOpen) {\n if (this._reducedMotion?.matches) {\n this._isOpen = false;\n } else {\n // wait until the side panel has transitioned off the screen to remove\n sidePanel.addEventListener('transitionend', () => {\n this._isOpen = false;\n });\n }\n } else if (this.open) {\n // allow the html to render before animating in the side panel\n // Use requestAnimationFrame to ensure the DOM is rendered before triggering animation\n requestAnimationFrame(() => {\n this._isOpen = this.open;\n });\n } else {\n // When closing, set immediately\n this._isOpen = false;\n }\n };\n\n private _checkUpdateIconButtonSizes = () => {\n const slug = this.querySelector(`${prefix}-slug`);\n const otherButtons = this?.shadowRoot?.querySelectorAll(\n '#nav-back-button, #close-button'\n );\n\n let iconButtonSize = 'sm';\n\n if (slug \|\| otherButtons?.length) {\n const actions = this?.querySelectorAll?.(\n `${prefix}-button[slot='actions']`\n );\n\n if (actions?.length && /l/.test(this.size)) {\n iconButtonSize = 'md';\n }\n }\n\n if (slug) {\n slug?.setAttribute('size', iconButtonSize);\n }\n\n if (otherButtons) {\n [...otherButtons].forEach((btn) => {\n btn.setAttribute('size', iconButtonSize);\n });\n }\n };\n\n private _handleSlugChange(e: Event) {\n this._checkUpdateIconButtonSizes();\n const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n this._hasSlug = childItems.length > 0;\n }\n\n private _handleSubtitleChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const subtitle = target?.assignedElements();\n\n this._hasSubtitle = subtitle.length > 0;\n }\n\n private _handleCustomHeaderSlotChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const customHeaderElms = target?.assignedElements();\n customHeaderElms.forEach((el) => {\n if (el instanceof HTMLElement) {\n el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;\n this._customHeaderElements.push(el);\n }\n });\n }\n\n private _handleActionToolbarChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const toolbarActions = target?.assignedElements();\n\n this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;\n\n if (this._hasActionToolbar) {\n for (let i = 0; i < toolbarActions.length; i++) {\n const toolbarAction = toolbarActions[i];\n // toolbar actions size should always be sm\n toolbarAction.setAttribute('size', 'sm');\n\n // Add leading button class to first button\n if (i === 0) {\n toolbarAction.classList.add(\n `${blockClass}__action-toolbar-leading-button`\n );\n } else {\n toolbarAction.classList.remove(\n `${blockClass}__action-toolbar-leading-button`\n );\n }\n }\n }\n }\n\n private _handleActionsChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n const actions = target?.assignedElements();\n\n // update slug size\n this._checkUpdateIconButtonSizes();\n\n const actionsCount = actions?.length ?? 0;\n this._actionsCount = actionsCount;\n\n // Set actions-multiple attribute for container query styling\n if (actionsCount === 1) {\n this._actionsMultiple = 'single';\n } else if (actionsCount === 2) {\n this._actionsMultiple = 'double';\n } else if (actionsCount === 3) {\n this._actionsMultiple = 'triple';\n } else {\n this._actionsMultiple = '';\n }\n }\n\n private _checkSetDoAnimateTitle = () => {\n let canDoAnimateTitle = false;\n\n if (\n this._sidePanel &&\n this.open &&\n this.animateTitle &&\n this?.title?.length &&\n !this._reducedMotion.matches\n ) {\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n // used to calculate the header moves\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-distance`,\n `${scrollAnimationDistance}`\n );\n\n let scrollEl = this._animateScrollWrapper;\n if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {\n scrollEl = this._innerContent;\n }\n\n if (scrollEl) {\n const innerComputed = window?.getComputedStyle(this._innerContent);\n const innerPaddingHeight = innerComputed\n ? parseFloat(innerComputed?.paddingTop) +\n parseFloat(innerComputed?.paddingBottom)\n : 0;\n\n canDoAnimateTitle =\n (!!this.labelText \|\| !!this._hasActionToolbar \|\| this._hasSubtitle) &&\n scrollEl.scrollHeight - scrollEl.clientHeight >=\n scrollAnimationDistance + innerPaddingHeight;\n }\n }\n\n this._doAnimateTitle = canDoAnimateTitle;\n };\n\n /\n The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n /\n // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n // @ts-ignore\n private _resizeObserver = new ResizeObserver(() => {\n if (this._sidePanel) {\n this._checkSetDoAnimateTitle();\n }\n });\n\n private _getScrollAnimationDistance = () => {\n const labelHeight = this?._label?.offsetHeight ?? 0;\n const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;\n const titleVerticalBorder = this._hasActionToolbar\n ? this._title.offsetHeight - this._title.clientHeight\n : 0;\n\n return labelHeight + subtitleHeight + titleVerticalBorder;\n };\n\n private _scrollObserver = () => {\n const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;\n const scrollAnimationDistance = this._getScrollAnimationDistance();\n const animationProgress =\n Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;\n\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n `${animationProgress}`\n );\n if (animationProgress === 1) {\n this._customHeaderElements.forEach((el) => {\n el.classList.add(`cds-custom--visually-hidden`);\n });\n } else {\n this._customHeaderElements.forEach((el) => {\n el.classList.remove(`cds-custom--visually-hidden`);\n });\n }\n };\n\n /\n Handles resize start event from the resizer handle\n /\n private _handleResizeStart = () => {\n this._sidePanelWidth = this._sidePanel?.clientWidth;\n this._accumulatedDelta = 0;\n };\n\n /\n Handles resize drag event from the resizer handle\n /\n private _handleResizeDrag = (event: CustomEvent) => {\n const { delta, isKeyboard, key } = event.detail;\n\n if (!this._sidePanelWidth) {\n this._sidePanelWidth = this._sidePanel?.clientWidth;\n }\n\n // Handle Home/End keys specially (like React implementation)\n if (isKeyboard && (key === 'Home' \|\| key === 'End')) {\n if (key === 'Home') {\n // Home = maximize to 75vw\n this.style.setProperty('--c4p-side-panel-modified-size', '75vw');\n } else {\n // End = minimize to 16rem\n this.style.setProperty('--c4p-side-panel-modified-size', '16rem');\n }\n return;\n }\n\n let calculatedWidth: number;\n\n if (isKeyboard) {\n // For keyboard arrow keys, accumulate delta (like React implementation)\n this._accumulatedDelta += delta;\n calculatedWidth =\n this._sidePanelWidth -\n (this.placement === 'right'\n ? this._accumulatedDelta\n : -this._accumulatedDelta);\n } else {\n // For mouse events, use delta directly\n calculatedWidth =\n this._sidePanelWidth - (this.placement === 'right' ? delta : -delta);\n }\n\n // Remove transition during drag for smooth resizing\n if (this._sidePanel?.style) {\n this._sidePanel.style.transition = 'none';\n }\n\n // Clamp width between minimum (16rem = 256px) and maximum (75% of viewport)\n const minWidth = 256; // 16rem\n const maxWidth = window.innerWidth 0.75;\n const newWidth = Math.max(minWidth, Math.min(maxWidth, calculatedWidth));\n\n // Apply the new width via CSS variable\n this.style.setProperty('--c4p-side-panel-modified-size', `${newWidth}px`);\n };\n\n /*\n Handles resize end event from the resizer handle\n /\n private _handleResizeEnd = () => {\n this._accumulatedDelta = 0;\n this._sidePanel?.style?.removeProperty('transition');\n this._sidePanelWidth = this._sidePanel?.clientWidth;\n\n // Update ARIA attributes on the resizer handle\n if (this._resizerHandle) {\n this._resizerHandle.setAttribute(\n 'aria-label',\n `side panel is covering ${this._getPanelWidthPercent()}% of screen`\n );\n this._resizerHandle.setAttribute(\n 'aria-valuenow',\n this._getPanelWidthPercent().toString()\n );\n }\n };\n\n /\n Handles double-click/double-tap on resizer to reset size\n /\n private _handleResizeReset = () => {\n // Get the default size for current size setting\n const sizeMap = {\n xs: '16rem',\n sm: '20rem',\n md: '30rem',\n lg: '40rem',\n xl: '65rem',\n '2xl': '80rem',\n };\n\n const defaultSize = sizeMap[this.size] \|\| sizeMap.md;\n const defaultSizeInPx = parseFloat(defaultSize) 16;\n\n // Reset to default size (or 75vw if default is larger)\n this._sidePanelWidth = Math.min(defaultSizeInPx, window.innerWidth * 0.75);\n\n // Remove custom size\n this.style.removeProperty('--c4p-side-panel-modified-size');\n };\n\n /*\n Get the percentage of screen width the panel is covering\n /\n private _getPanelWidthPercent = (customWidth?: string): number => {\n if (customWidth) {\n const remValue = parseFloat(customWidth);\n const remInPixels =\n remValue \n parseFloat(getComputedStyle(document.documentElement).fontSize);\n return Math.round((remInPixels / window.innerWidth) * 100);\n }\n return Math.round(\n ((this._sidePanel?.clientWidth \|\| 0) / window.innerWidth) * 100\n );\n };\n\n private _handleCurrentStepUpdate = () => {\n const scrollable = this._animateScrollWrapper ?? this._innerContent;\n if (scrollable) {\n scrollable.scrollTop = 0;\n }\n };\n\n /*\n Determines if the title will animate on scroll\n /\n @property({ reflect: true, attribute: 'animate-title', type: Boolean })\n animateTitle = true;\n\n /\n Sets the close button icon description\n /\n @property({\n reflect: true,\n attribute: 'close-icon-description',\n type: String,\n })\n closeIconDescription = 'Close';\n\n /\n Sets the close button tooltip alignment\n /\n @property({\n reflect: true,\n attribute: 'close-icon-tooltip-alignment',\n type: String,\n })\n closeIconTooltipAlignment = 'left';\n\n /\n Determines whether the side panel should render the condensed version (affects action buttons primarily)\n /\n @property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })\n condensedActions = false;\n\n /\n Sets the current step of the side panel\n /\n @property({ reflect: true, attribute: 'current-step', type: Number })\n currentStep;\n\n /\n Determines whether the side panel should render with an overlay\n /\n @property({ attribute: 'include-overlay', type: Boolean, reflect: true })\n includeOverlay = false;\n\n /\n Sets the label text which will display above the title text\n /\n @property({ reflect: true, attribute: 'label-text' })\n labelText;\n\n /\n Sets the icon description for the navigation back icon button\n /\n @property({ reflect: true, attribute: 'navigation-back-icon-description' })\n navigationBackIconDescription = 'Back';\n\n /\n `true` if the side-panel should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /\n SidePanel placement.\n /\n @property({ reflect: true, type: String })\n placement = SIDE_PANEL_PLACEMENT.RIGHT;\n\n /\n Prevent closing on click outside of side-panel\n /\n @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n preventCloseOnClickOutside = false;\n\n /\n The initial location of focus in the side panel\n /\n @property({\n reflect: true,\n attribute: 'selector-initial-focus',\n type: String,\n })\n selectorInitialFocus;\n\n /\n Selector for page content, used to push content to side except\n /\n @property({ reflect: true, attribute: 'selector-page-content' })\n selectorPageContent = '';\n\n /\n Show/hide the \"X\" close button\n /\n @property({ attribute: 'hide-close-button', type: Boolean })\n hideCloseButton = false;\n\n /\n SidePanel size.\n /\n @property({ reflect: true, type: String })\n size = SIDE_PANEL_SIZE.MEDIUM;\n\n /\n Determines if this panel slides in\n /\n @property({ attribute: 'slide-in', type: Boolean, reflect: true })\n slideIn = false;\n\n /\n Determines if the side panel is resizable\n /\n @property({ type: Boolean, reflect: true })\n resizable = false;\n\n /\n Sets the title text\n /\n @property({ reflect: false, type: String })\n title;\n\n async connectObservers() {\n await this.updateComplete;\n this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);\n }\n\n disconnectObservers() {\n if (this._hObserveResize) {\n this._hObserveResize = this._hObserveResize.release();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.disconnectObservers();\n this.connectObservers();\n\n // Listen for resize events from resizer handle\n this.addEventListener(\n 'resize-start',\n this._handleResizeStart as EventListener\n );\n this.addEventListener(\n 'resize-drag',\n this._handleResizeDrag as EventListener\n );\n this.addEventListener('resize-end', this._handleResizeEnd as EventListener);\n this.addEventListener(\n 'resize-reset',\n this._handleResizeReset as EventListener\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.disconnectObservers();\n\n // Remove resize event listeners\n this.removeEventListener(\n 'resize-start',\n this._handleResizeStart as EventListener\n );\n this.removeEventListener(\n 'resize-drag',\n this._handleResizeDrag as EventListener\n );\n this.removeEventListener(\n 'resize-end',\n this._handleResizeEnd as EventListener\n );\n this.removeEventListener(\n 'resize-reset',\n this._handleResizeReset as EventListener\n );\n }\n\n render() {\n const {\n closeIconDescription,\n closeIconTooltipAlignment,\n condensedActions,\n currentStep,\n includeOverlay,\n labelText,\n navigationBackIconDescription,\n open,\n placement,\n hideCloseButton,\n size,\n slideIn,\n title,\n } = this;\n\n if (!open && !this._isOpen) {\n return html``;\n }\n\n const titleTemplate = html` <div\n class=${`${blockClass}__title`}\n ?no-label=${!!labelText}\n >\n <h2 class=${title ? `${blockClass}__title-text` : ''} tabindex=\"0\">\n ${title}\n </h2>\n ${this._doAnimateTitle\n ? html`<h2\n class=${`${blockClass}__collapsed-title-text`}\n aria-hidden=\"true\"\n >\n ${title}\n </h2>`\n : ''}\n </div>`;\n\n const headerHasTitleClass = this.title\n ? ` ${blockClass}__header--has-title `\n : '';\n const headerTemplate = html`\n <div\n class=${`${blockClass}__header${headerHasTitleClass}`}\n ?detail-step=${currentStep > 0}\n ?no-title-animation=${!this._doAnimateTitle}\n ?reduced-motion=${this._reducedMotion.matches}\n >\n <!-- render back button -->\n ${currentStep > 0\n ? html`<cds-custom-icon-button\n align=\"bottom-left\"\n aria-label=${navigationBackIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${prefix}--btn ${blockClass}__navigation-back-button`}\n @click=${this._handleNavigateBack}\n >\n ${iconLoader(ArrowLeft16, { slot: 'icon' })}\n <span slot=\"tooltip-content\">\n ${navigationBackIconDescription}\n </span>\n </cds-custom-icon-button>`\n : ''}\n\n <!-- slot for custom header components -->\n <slot\n name=\"above-title\"\n @slotchange=${this._handleCustomHeaderSlotChange}\n ></slot>\n\n <!-- render title label -->\n ${title?.length && labelText?.length\n ? html` <p class=${`${blockClass}__label-text`} tabindex=\"0\">\n ${labelText}\n </p>`\n : ''}\n\n <!-- title -->\n ${title ? titleTemplate : ''}\n\n <!-- render slug and close button area -->\n <div class=${`${blockClass}__slug-and-close`}>\n <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n <!-- {normalizedSlug} -->\n ${!hideCloseButton\n ? html`<cds-custom-icon-button\n align=${closeIconTooltipAlignment}\n aria-label=${closeIconDescription}\n kind=\"ghost\"\n size=\"sm\"\n class=${`${blockClass}__close-button`}\n @click=${this._handleCloseClick}\n >\n ${iconLoader(Close16, { slot: 'icon' })}\n <span slot=\"tooltip-content\"> ${closeIconDescription} </span>\n </cds-custom-icon-button>`\n : ''}\n </div>\n\n <!-- render sub title -->\n <p\n class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}\n ?hidden=${!this._hasSubtitle}\n ?no-title-animation=${!this._doAnimateTitle}\n ?no-action-toolbar=${!this._hasActionToolbar}\n ?no-title=${!title}\n tabindex=\"0\"\n >\n <slot\n name=\"subtitle\"\n @slotchange=${this._handleSubtitleChange}\n ></slot>\n </p>\n\n <!-- slot for custom header components -->\n <slot\n name=\"below-title\"\n @slotchange=${this._handleCustomHeaderSlotChange}\n ></slot>\n\n <div\n class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}\n ?hidden=${!this._hasActionToolbar}\n ?no-title-animation=${!this._doAnimateTitle}\n >\n <slot\n name=\"action-toolbar\"\n @slotchange=${this._handleActionToolbarChange}\n ></slot>\n </div>\n </div>\n `;\n\n const mainTemplate = html`<div\n class=${`${blockClass}__inner-content`}\n ?scrolls=${!this._doAnimateTitle}\n >\n <cds-custom-layer level=\"1\">\n <slot></slot>\n </cds-custom-layer>\n </div> `;\n\n const sidePanelAnimateTitleClass = this._doAnimateTitle\n ? ` ${blockClass}--animated-title`\n : '';\n\n return html`\n <div\n class=${`${blockClass}${sidePanelAnimateTitleClass}`}\n part=\"dialog\"\n role=\"complementary\"\n placement=\"${placement}\"\n ?has-slug=${this._hasSlug}\n ?open=${this._isOpen}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n ?condensed-actions=${condensedActions}\n ?overlay=${includeOverlay \|\| slideIn}\n ?slide-in=${slideIn}\n ?resizable=${this.resizable && !slideIn}\n size=${size}\n >\n ${!slideIn &&\n this.resizable &&\n typeof window !== 'undefined' &&\n window.innerWidth > 768\n ? html`<clabs-resizer-handle\n class=\"${blockClass}__resizer\"\n orientation=\"horizontal\"\n aria-valuemin=\"${this._getPanelWidthPercent('16rem')}\"\n aria-valuemax=\"75\"\n aria-valuenow=\"${this._getPanelWidthPercent()}\"\n aria-label=\"side panel is covering ${this._getPanelWidthPercent()}% of screen\"\n @resize-start=${this._handleResizeStart}\n @resize-drag=${this._handleResizeDrag}\n @resize-end=${this._handleResizeEnd}\n @resize-reset=${this._handleResizeReset}\n ></clabs-resizer-handle>`\n : ''}\n ${this._doAnimateTitle\n ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>\n ${headerTemplate} ${mainTemplate}\n </div>`\n : html` ${headerTemplate} ${mainTemplate}`}\n\n <c4p-action-set\n class=${`${blockClass}__actions-container`}\n ?hidden=${this._actionsCount === 0}\n size=\"md\"\n button-size=${condensedActions ? 'md' : 'lg'}\n actions-multiple=${this._actionsMultiple}\n >\n <slot name=\"actions\" @slotchange=${this._handleActionsChange}></slot>\n </c4p-action-set>\n </div>\n\n ${includeOverlay\n ? html`<div\n ?slide-in=${slideIn}\n class=${`${blockClass}__overlay`}\n ?open=${this.open}\n ?opening=${open && !this._isOpen}\n ?closing=${!open && this._isOpen}\n tabindex=\"-1\"\n @click=${this._handleClickOnOverlay}\n ></div>`\n : ''}\n `;\n }\n\n async updated(changedProperties) {\n if (changedProperties.has('currentStep')) {\n this._handleCurrentStepUpdate();\n }\n\n if (changedProperties.has('_doAnimateTitle')) {\n this?._animateScrollWrapper?.removeEventListener(\n 'scroll',\n this._scrollObserver\n );\n\n if (this._doAnimateTitle) {\n this?._animateScrollWrapper?.addEventListener(\n 'scroll',\n this._scrollObserver\n );\n } else {\n this?._sidePanel?.style?.setProperty(\n `--${blockClass}--scroll-animation-progress`,\n '0'\n );\n }\n }\n\n if (\n changedProperties.has('_isOpen') \|\|\n changedProperties.has('animateTitle')\n ) {\n / @state property changed /\n this._checkSetDoAnimateTitle();\n }\n\n if (\n changedProperties.has('slideIn') \|\|\n changedProperties.has('open') \|\|\n changedProperties.has('includeOverlay')\n ) {\n this._adjustPageContent();\n }\n\n if (changedProperties.has('open')) {\n this._checkSetOpen();\n\n this.disconnectObservers();\n if (this.open) {\n this.connectObservers();\n\n this._launcher = this.ownerDocument!.activeElement;\n\n await (this.constructor as typeof CDSSidePanel)._delay();\n\n if (this.selectorInitialFocus?.trim()?.length) {\n const focusNode = this.querySelector(this.selectorInitialFocus);\n\n (focusNode as HTMLElement)?.focus();\n } else if (!this.slideIn) {\n const { first: _firstElement } = this.getFocusable();\n\n _firstElement?.focus();\n }\n } else if (\n this._launcher &&\n typeof (this._launcher as HTMLElement)?.focus === 'function'\n ) {\n (this._launcher as HTMLElement)?.focus();\n this._launcher = null;\n }\n }\n\n // Reset custom size when size prop changes or when resizable is disabled\n if (\n (changedProperties.has('size') && this.resizable && !this.slideIn) \|\|\n (changedProperties.has('resizable') && !this.resizable)\n ) {\n this.style.removeProperty('--c4p-side-panel-modified-size');\n }\n\n // Update stored width when resizable changes or panel opens\n if (\n (changedProperties.has('resizable') \|\| changedProperties.has('open')) &&\n this.resizable &&\n !this.slideIn &&\n this.open\n ) {\n await this.updateComplete;\n this._sidePanelWidth = this._sidePanel?.clientWidth;\n }\n }\n\n /\n @param ms The number of milliseconds.\n * @returns A promise that is resolves after the given milliseconds.\n /\n private static _delay(ms = 0) {\n return new Promise((resolve) => {\n setTimeout(resolve, ms);\n });\n }\n\n /\n A selector selecting tabbable nodes.\n /\n static get selectorTabbable() {\n return selectorTabbable;\n }\n\n /\n The name of the custom event fired before this side-panel is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this side-panel.\n /\n static get eventBeforeClose() {\n return `${prefix}-side-panel-beingclosed`;\n }\n\n /\n The name of the custom event fired after this side-panel is closed upon a user gesture.\n /\n static get eventClose() {\n return `${prefix}-side-panel-closed`;\n }\n\n /\n The name of the custom event fired on clicking the navigate back button\n */\n static get eventNavigateBack() {\n return `${prefix}-side-panel-navigate-back`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSidePanel;\n"],"mappings":"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"}