@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

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

@@ -0,0 +1,859 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from './defs.js';
+import styles from './side-panel.scss.js';
+import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import ArrowLeft16 from '@carbon/icons/es/arrow--left/16';
+import Close16 from '@carbon/icons/es/close/16';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
+import { moderate02 } from '@carbon/motion';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/button/button-set-base.js';
+import '@carbon/web-components/es-custom/components/icon-button/index.js';
+import '@carbon/web-components/es-custom/components/layer/index.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const blockClass = `${prefix}--side-panel`;
+const blockClassActionSet = `${prefix}--action-set`;
+/**
+ * Observes resize of the given element with the given resize observer.
+ *
+ * @param observer The resize observer.
+ * @param elem The element to observe the resize.
+ */
+const observeResize = (observer, elem) => {
+    if (!elem) {
+        return null;
+    }
+    observer.observe(elem);
+    return {
+        release() {
+            observer.unobserve(elem);
+            return null;
+        },
+    };
+};
+/**
+ * SidePanel.
+ *
+ * @element c4p-side-panel
+ * @csspart dialog The dialog.
+ * @fires c4p-side-panel-beingclosed
+ *   The custom event fired before this side-panel is being closed upon a user gesture.
+ *   Cancellation of this event stops the user-initiated action of closing this side-panel.
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ */
+let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The handle for observing resize of the parent element of this element.
+         */
+        this._hObserveResize = null;
+        /**
+         * The element that had focus before this side-panel gets open.
+         */
+        this._launcher = null;
+        this._doAnimateTitle = true;
+        this._isOpen = false;
+        this._containerScrollTop = -16;
+        this._hasSubtitle = false;
+        this._hasSlug = false;
+        this._hasActionToolbar = false;
+        this._actionsCount = 0;
+        this._slugCloseSize = 'sm';
+        this._customHeaderElements = [];
+        /**
+         * Handle the keydown event.
+         * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
+         *
+         * @param {KeyboardEvent} event The keyboard event object.
+         */
+        this._handleHostKeydown = (event) => {
+            var _a;
+            if (event.key === 'Tab' && !this.slideIn) {
+                const { first: _firstElement, last: _lastElement } = this.getFocusable();
+                if (event.shiftKey &&
+                    (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === _firstElement ||
+                        document.activeElement === _firstElement)) {
+                    event.preventDefault();
+                    _lastElement === null || _lastElement === void 0 ? void 0 : _lastElement.focus();
+                }
+                else if (!event.shiftKey && document.activeElement === _lastElement) {
+                    event.preventDefault();
+                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
+                }
+            }
+        };
+        this._handleKeydown = ({ key, target }) => {
+            if (key === 'Esc' || key === 'Escape') {
+                this._handleUserInitiatedClose(target);
+            }
+        };
+        this._reducedMotion = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.matchMedia)
+            ? window.matchMedia('(prefers-reduced-motion: reduce)')
+            : { matches: true };
+        this._adjustPageContent = () => {
+            var _a, _b;
+            // sets/resets styles based on slideIn property and selectorPageContent;
+            if (this.selectorPageContent) {
+                const pageContentEl = document.querySelector(this.selectorPageContent);
+                if (pageContentEl) {
+                    const newValues = {
+                        marginInlineStart: '',
+                        marginInlineEnd: '',
+                        inlineSize: '',
+                        transition: this._reducedMotion.matches
+                            ? 'none'
+                            : `all ${moderate02}`,
+                        transitionProperty: 'margin-inline-start, margin-inline-end',
+                    };
+                    if (this.open) {
+                        newValues.inlineSize = 'auto';
+                        if (this.placement === 'left') {
+                            newValues.marginInlineStart = `${(_a = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+                        }
+                        else {
+                            newValues.marginInlineEnd = `${(_b = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _b === void 0 ? void 0 : _b.offsetWidth}px`;
+                        }
+                    }
+                    if (this.slideIn) {
+                        Object.keys(newValues).forEach((key) => {
+                            pageContentEl.style[key] = newValues[key];
+                        });
+                    }
+                }
+            }
+        };
+        this._checkSetOpen = () => {
+            var _a;
+            const { _sidePanel: sidePanel } = this;
+            if (sidePanel && this._isOpen) {
+                if ((_a = this._reducedMotion) === null || _a === void 0 ? void 0 : _a.matches) {
+                    this._isOpen = false;
+                }
+                else {
+                    // wait until the side panel has transitioned off the screen to remove
+                    sidePanel.addEventListener('transitionend', () => {
+                        this._isOpen = false;
+                    });
+                }
+            }
+            else {
+                // allow the html to render before animating in the side panel
+                this._isOpen = this.open;
+            }
+        };
+        this._checkUpdateIconButtonSizes = () => {
+            var _a, _b;
+            const slug = this.querySelector(`${prefix}-slug`);
+            const otherButtons = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('#nav-back-button, #close-button');
+            let iconButtonSize = 'sm';
+            if (slug || (otherButtons === null || otherButtons === void 0 ? void 0 : otherButtons.length)) {
+                const actions = (_b = this === null || this === void 0 ? void 0 : this.querySelectorAll) === null || _b === void 0 ? void 0 : _b.call(this, `${prefix}-button[slot='actions']`);
+                if ((actions === null || actions === void 0 ? void 0 : actions.length) && /l/.test(this.size)) {
+                    iconButtonSize = 'md';
+                }
+            }
+            if (slug) {
+                slug === null || slug === void 0 ? void 0 : slug.setAttribute('size', iconButtonSize);
+            }
+            if (otherButtons) {
+                [...otherButtons].forEach((btn) => {
+                    btn.setAttribute('size', iconButtonSize);
+                });
+            }
+        };
+        this._checkUpdateActionSizes = () => {
+            if (this._actions) {
+                for (let i = 0; i < this._actions.length; i++) {
+                    this._actions[i].setAttribute('size', this.condensedActions ? 'lg' : 'xl');
+                }
+            }
+        };
+        this._maxActions = 3;
+        this._checkSetDoAnimateTitle = () => {
+            var _a, _b, _c;
+            let canDoAnimateTitle = false;
+            if (this._sidePanel &&
+                this.open &&
+                this.animateTitle &&
+                ((_a = this === null || this === void 0 ? void 0 : this.title) === null || _a === void 0 ? void 0 : _a.length) &&
+                !this._reducedMotion.matches) {
+                const scrollAnimationDistance = this._getScrollAnimationDistance();
+                // used to calculate the header moves
+                (_c = (_b = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.setProperty(`--${blockClass}--scroll-animation-distance`, `${scrollAnimationDistance}`);
+                let scrollEl = this._animateScrollWrapper;
+                if (!scrollEl && this.animateTitle && !this._doAnimateTitle) {
+                    scrollEl = this._innerContent;
+                }
+                if (scrollEl) {
+                    const innerComputed = window === null || window === void 0 ? void 0 : window.getComputedStyle(this._innerContent);
+                    const innerPaddingHeight = innerComputed
+                        ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) +
+                            parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom)
+                        : 0;
+                    canDoAnimateTitle =
+                        (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) &&
+                            scrollEl.scrollHeight - scrollEl.clientHeight >=
+                                scrollAnimationDistance + innerPaddingHeight;
+                }
+            }
+            this._doAnimateTitle = canDoAnimateTitle;
+        };
+        /**
+         * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
+         */
+        // TODO: Wait for `.d.ts` update to support `ResizeObserver`
+        // @ts-ignore
+        this._resizeObserver = new ResizeObserver(() => {
+            if (this._sidePanel) {
+                this._checkSetDoAnimateTitle();
+            }
+        });
+        this._getScrollAnimationDistance = () => {
+            var _a, _b, _c, _d;
+            const labelHeight = (_b = (_a = this === null || this === void 0 ? void 0 : this._label) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+            const subtitleHeight = (_d = (_c = this === null || this === void 0 ? void 0 : this._subtitle) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
+            const titleVerticalBorder = this._hasActionToolbar
+                ? this._title.offsetHeight - this._title.clientHeight
+                : 0;
+            return labelHeight + subtitleHeight + titleVerticalBorder;
+        };
+        this._scrollObserver = () => {
+            var _a, _b, _c, _d;
+            const scrollTop = (_b = (_a = this._animateScrollWrapper) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+            const scrollAnimationDistance = this._getScrollAnimationDistance();
+            const animationProgress = Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;
+            (_d = (_c = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.setProperty(`--${blockClass}--scroll-animation-progress`, `${animationProgress}`);
+            if (animationProgress === 1) {
+                this._customHeaderElements.forEach((el) => {
+                    el.classList.add(`cds-custom--visually-hidden`);
+                });
+            }
+            else {
+                this._customHeaderElements.forEach((el) => {
+                    el.classList.remove(`cds-custom--visually-hidden`);
+                });
+            }
+        };
+        this._handleCurrentStepUpdate = () => {
+            var _a;
+            const scrollable = (_a = this._animateScrollWrapper) !== null && _a !== void 0 ? _a : this._innerContent;
+            if (scrollable) {
+                scrollable.scrollTop = 0;
+            }
+        };
+        /**
+         * Determines if the title will animate on scroll
+         */
+        this.animateTitle = true;
+        /**
+         * Sets the close button icon description
+         */
+        this.closeIconDescription = 'Close';
+        /**
+         * Sets the close button tooltip alignment
+         */
+        this.closeIconTooltipAlignment = 'left';
+        /**
+         * Determines whether the side panel should render the condensed version (affects action buttons primarily)
+         */
+        this.condensedActions = false;
+        /**
+         * Determines whether the side panel should render with an overlay
+         */
+        this.includeOverlay = false;
+        /**
+         * Sets the icon description for the navigation back icon button
+         */
+        this.navigationBackIconDescription = 'Back';
+        /**
+         * `true` if the side-panel should be open.
+         */
+        this.open = false;
+        /**
+         * SidePanel placement.
+         */
+        this.placement = SIDE_PANEL_PLACEMENT.RIGHT;
+        /**
+         * Prevent closing on click outside of side-panel
+         */
+        this.preventCloseOnClickOutside = false;
+        /**
+         * Selector for page content, used to push content to side except
+         */
+        this.selectorPageContent = '';
+        /**
+         * Show/hide the "X" close button
+         */
+        this.hideCloseButton = false;
+        /**
+         * SidePanel size.
+         */
+        this.size = SIDE_PANEL_SIZE.MEDIUM;
+        /**
+         * Determines if this panel slides in
+         */
+        this.slideIn = false;
+    }
+    /**
+     * Get focusable elements.
+     *
+     * Querying all tabbable items.
+     *
+     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+     */
+    getFocusable() {
+        var _a, _b;
+        const elements = [];
+        // Add slug elements if present
+        if (this._hasSlug) {
+            elements.push(this.querySelectorAll(`${carbonPrefix}-slug`));
+        }
+        // Add close button if not hidden
+        if (!this.hideCloseButton) {
+            const closeButtons = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${carbonPrefix}-icon-button`);
+            if (closeButtons) {
+                elements.push(closeButtons);
+            }
+        }
+        // Add tabbable elements inside light DOM
+        const _tabbableItems = this.querySelectorAll(selectorTabbable);
+        if (_tabbableItems) {
+            elements.push(_tabbableItems);
+        }
+        // Flatten NodeList arrays and filter for focusable items
+        const all = (_b = elements === null || elements === void 0 ? void 0 : elements.flatMap((nodeList) => Array.from(nodeList))) === null || _b === void 0 ? void 0 : _b.filter((el) => typeof (el === null || el === void 0 ? void 0 : el.focus) === 'function');
+        return {
+            first: all[0],
+            last: all[all.length - 1],
+            all,
+        };
+    }
+    /**
+     * Handles `click` event on the side-panel container.
+     *
+     * @param event The event.
+     */
+    _handleClickOnOverlay(event) {
+        if (!this.preventCloseOnClickOutside) {
+            this._handleUserInitiatedClose(event.target);
+        }
+    }
+    /**
+     * Handles `click` event on the side-panel container.
+     *
+     * @param event The event.
+     */
+    _handleCloseClick(event) {
+        this._handleUserInitiatedClose(event.target);
+    }
+    /**
+     * Handles user-initiated close request of this side-panel.
+     *
+     * @param triggeredBy The element that triggered this close request.
+     */
+    _handleUserInitiatedClose(triggeredBy) {
+        if (this.open) {
+            const init = {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: {
+                    triggeredBy,
+                },
+            };
+            if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
+                this.open = false;
+                this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
+            }
+        }
+    }
+    _handleNavigateBack(triggeredBy) {
+        this.dispatchEvent(new CustomEvent(this.constructor.eventNavigateBack, {
+            composed: true,
+            detail: {
+                triggeredBy,
+            },
+        }));
+    }
+    _handleSlugChange(e) {
+        this._checkUpdateIconButtonSizes();
+        const childItems = e.target.assignedElements();
+        this._hasSlug = childItems.length > 0;
+    }
+    _handleSubtitleChange(e) {
+        const target = e.target;
+        const subtitle = target === null || target === void 0 ? void 0 : target.assignedElements();
+        this._hasSubtitle = subtitle.length > 0;
+    }
+    _handleCustomHeaderSlotChange(e) {
+        const target = e.target;
+        const customHeaderElms = target === null || target === void 0 ? void 0 : target.assignedElements();
+        customHeaderElms.forEach((el) => {
+            if (el instanceof HTMLElement) {
+                el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;
+                this._customHeaderElements.push(el);
+            }
+        });
+    }
+    _handleActionToolbarChange(e) {
+        const target = e.target;
+        const toolbarActions = target === null || target === void 0 ? void 0 : target.assignedElements();
+        this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;
+        if (this._hasActionToolbar) {
+            for (const toolbarAction of toolbarActions) {
+                // toolbar actions size should always be sm
+                toolbarAction.setAttribute('size', 'sm');
+            }
+        }
+    }
+    _handleActionsChange(e) {
+        var _a;
+        const target = e.target;
+        const actions = target === null || target === void 0 ? void 0 : target.assignedElements();
+        // update slug size
+        this._checkUpdateIconButtonSizes();
+        const actionsCount = (_a = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _a !== void 0 ? _a : 0;
+        if (actionsCount > this._maxActions) {
+            this._actionsCount = this._maxActions;
+            if (process.env.NODE_ENV === 'development') {
+                console.error(`Too many side-panel actions, max ${this._maxActions}.`);
+            }
+        }
+        else {
+            this._actionsCount = actionsCount;
+        }
+        for (let i = 0; i < (actions === null || actions === void 0 ? void 0 : actions.length); i++) {
+            if (i + 1 > this._maxActions) {
+                // hide excessive side panel actions
+                actions[i].setAttribute('hidden', 'true');
+                actions[i].setAttribute(`data-actions-limit-${this._maxActions}-exceeded`, `${actions.length}`);
+            }
+            else {
+                actions[i].classList.add(`${blockClassActionSet}__action-button`);
+            }
+        }
+        this._checkUpdateActionSizes();
+    }
+    async connectObservers() {
+        await this.updateComplete;
+        this._hObserveResize = observeResize(this._resizeObserver, this._sidePanel);
+    }
+    disconnectObservers() {
+        if (this._hObserveResize) {
+            this._hObserveResize = this._hObserveResize.release();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.disconnectObservers();
+        this.connectObservers();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disconnectObservers();
+    }
+    render() {
+        const { closeIconDescription, closeIconTooltipAlignment, condensedActions, currentStep, includeOverlay, labelText, navigationBackIconDescription, open, placement, hideCloseButton, size, slideIn, title, } = this;
+        if (!open && !this._isOpen) {
+            return html ``;
+        }
+        const actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];
+        const titleTemplate = html ` <div
+      class=${`${blockClass}__title`}
+      ?no-label=${!!labelText}
+    >
+      <h2 class=${title ? `${blockClass}__title-text` : ''}>${title}</h2>
+      ${this._doAnimateTitle
+            ? html `<h2
+            class=${`${blockClass}__collapsed-title-text`}
+            aria-hidden="true"
+          >
+            ${title}
+          </h2>`
+            : ''}
+    </div>`;
+        const headerHasTitleClass = this.title
+            ? ` ${blockClass}__header--has-title `
+            : '';
+        const headerTemplate = html `
+      <div
+        class=${`${blockClass}__header${headerHasTitleClass}`}
+        ?detail-step=${currentStep > 0}
+        ?no-title-animation=${!this._doAnimateTitle}
+        ?reduced-motion=${this._reducedMotion.matches}
+      >
+        <!-- render back button -->
+        ${currentStep > 0
+            ? html `<cds-custom-icon-button
+              align="bottom-left"
+              aria-label=${navigationBackIconDescription}
+              kind="ghost"
+              size="sm"
+              class=${`${prefix}--btn ${blockClass}__navigation-back-button`}
+              @click=${this._handleNavigateBack}
+            >
+              ${iconLoader(ArrowLeft16, { slot: 'icon' })}
+              <span slot="tooltip-content">
+                ${navigationBackIconDescription}
+              </span>
+            </cds-custom-icon-button>`
+            : ''}
+
+        <!-- slot for custom header components -->
+        <slot
+          name="above-title"
+          @slotchange=${this._handleCustomHeaderSlotChange}
+        ></slot>
+
+        <!-- render title label -->
+        ${(title === null || title === void 0 ? void 0 : title.length) && (labelText === null || labelText === void 0 ? void 0 : labelText.length)
+            ? html ` <p class=${`${blockClass}__label-text`}>${labelText}</p>`
+            : ''}
+
+        <!-- title -->
+        ${title ? titleTemplate : ''}
+
+        <!-- render slug and close button area -->
+        <div class=${`${blockClass}__slug-and-close`}>
+          <slot name="slug" @slotchange=${this._handleSlugChange}></slot>
+          <!-- {normalizedSlug} -->
+          ${!hideCloseButton
+            ? html `<cds-custom-icon-button
+                align=${closeIconTooltipAlignment}
+                aria-label=${closeIconDescription}
+                kind="ghost"
+                size="sm"
+                class=${`${blockClass}__close-button`}
+                @click=${this._handleCloseClick}
+              >
+                ${iconLoader(Close16, { slot: 'icon' })}
+                <span slot="tooltip-content"> ${closeIconDescription} </span>
+              </cds-custom-icon-button>`
+            : ''}
+        </div>
+
+        <!-- render sub title -->
+        <p
+          class=${this._hasSubtitle ? `${blockClass}__subtitle-text` : ''}
+          ?hidden=${!this._hasSubtitle}
+          ?no-title-animation=${!this._doAnimateTitle}
+          ?no-action-toolbar=${!this._hasActionToolbar}
+          ?no-title=${!title}
+        >
+          <slot
+            name="subtitle"
+            @slotchange=${this._handleSubtitleChange}
+          ></slot>
+        </p>
+
+        <!-- slot for custom header components -->
+        <slot
+          name="below-title"
+          @slotchange=${this._handleCustomHeaderSlotChange}
+        ></slot>
+
+        <div
+          class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ''}
+          ?hidden=${!this._hasActionToolbar}
+          ?no-title-animation=${!this._doAnimateTitle}
+        >
+          <slot
+            name="action-toolbar"
+            @slotchange=${this._handleActionToolbarChange}
+          ></slot>
+        </div>
+      </div>
+    `;
+        const mainTemplate = html `<div
+      class=${`${blockClass}__inner-content`}
+      ?scrolls=${!this._doAnimateTitle}
+    >
+      <cds-custom-layer level="1">
+        <slot></slot>
+      </cds-custom-layer>
+    </div> `;
+        const sidePanelAnimateTitleClass = this._doAnimateTitle
+            ? ` ${blockClass}--animated-title`
+            : '';
+        return html `
+      <div
+        class=${`${blockClass}${sidePanelAnimateTitleClass}`}
+        part="dialog"
+        role="complementary"
+        placement="${placement}"
+        ?has-slug=${this._hasSlug}
+        ?open=${this._isOpen}
+        ?opening=${open && !this._isOpen}
+        ?closing=${!open && this._isOpen}
+        ?condensed-actions=${condensedActions}
+        ?overlay=${includeOverlay || slideIn}
+        ?slide-in=${slideIn}
+        size=${size}
+      >
+        ${this._doAnimateTitle
+            ? html `<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
+              ${headerTemplate} ${mainTemplate}
+            </div>`
+            : html ` ${headerTemplate} ${mainTemplate}`}
+
+        <cds-custom-button-set-base
+          class=${`${blockClass}__actions-container`}
+          ?hidden=${this._actionsCount === 0}
+          ?condensed=${condensedActions}
+          actions-multiple=${actionsMultiple}
+          size=${size}
+        >
+          <slot name="actions" @slotchange=${this._handleActionsChange}></slot>
+        </cds-custom-button-set-base>
+      </div>
+
+      ${includeOverlay
+            ? html `<div
+            ?slide-in=${slideIn}
+            class=${`${blockClass}__overlay`}
+            ?open=${this.open}
+            ?opening=${open && !this._isOpen}
+            ?closing=${!open && this._isOpen}
+            tabindex="-1"
+            @click=${this._handleClickOnOverlay}
+          ></div>`
+            : ''}
+    `;
+    }
+    async updated(changedProperties) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (changedProperties.has('condensedActions')) {
+            this._checkUpdateActionSizes();
+        }
+        if (changedProperties.has('currentStep')) {
+            this._handleCurrentStepUpdate();
+        }
+        if (changedProperties.has('_doAnimateTitle')) {
+            (_a = this === null || this === void 0 ? void 0 : this._animateScrollWrapper) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this._scrollObserver);
+            if (this._doAnimateTitle) {
+                (_b = this === null || this === void 0 ? void 0 : this._animateScrollWrapper) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', this._scrollObserver);
+            }
+            else {
+                (_d = (_c = this === null || this === void 0 ? void 0 : this._sidePanel) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.setProperty(`--${blockClass}--scroll-animation-progress`, '0');
+            }
+        }
+        if (changedProperties.has('_isOpen') ||
+            changedProperties.has('animateTitle')) {
+            /* @state property changed */
+            this._checkSetDoAnimateTitle();
+        }
+        if (changedProperties.has('slideIn') ||
+            changedProperties.has('open') ||
+            changedProperties.has('includeOverlay')) {
+            this._adjustPageContent();
+        }
+        if (changedProperties.has('open')) {
+            this._checkSetOpen();
+            this.disconnectObservers();
+            if (this.open) {
+                this.connectObservers();
+                this._launcher = this.ownerDocument.activeElement;
+                await this.constructor._delay();
+                if ((_f = (_e = this.selectorInitialFocus) === null || _e === void 0 ? void 0 : _e.trim()) === null || _f === void 0 ? void 0 : _f.length) {
+                    const focusNode = this.querySelector(this.selectorInitialFocus);
+                    focusNode === null || focusNode === void 0 ? void 0 : focusNode.focus();
+                }
+                else if (!this.slideIn) {
+                    const { first: _firstElement } = this.getFocusable();
+                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
+                }
+            }
+            else if (this._launcher &&
+                typeof ((_g = this._launcher) === null || _g === void 0 ? void 0 : _g.focus) === 'function') {
+                (_h = this._launcher) === null || _h === void 0 ? void 0 : _h.focus();
+                this._launcher = null;
+            }
+        }
+    }
+    /**
+     * @param ms The number of milliseconds.
+     * @returns A promise that is resolves after the given milliseconds.
+     */
+    static _delay(ms = 0) {
+        return new Promise((resolve) => {
+            setTimeout(resolve, ms);
+        });
+    }
+    /**
+     * A selector selecting tabbable nodes.
+     */
+    static get selectorTabbable() {
+        return selectorTabbable;
+    }
+    /**
+     * The name of the custom event fired before this side-panel is being closed upon a user gesture.
+     * Cancellation of this event stops the user-initiated action of closing this side-panel.
+     */
+    static get eventBeforeClose() {
+        return `${prefix}-side-panel-beingclosed`;
+    }
+    /**
+     * The name of the custom event fired after this side-panel is closed upon a user gesture.
+     */
+    static get eventClose() {
+        return `${prefix}-side-panel-closed`;
+    }
+    /**
+     * The name of the custom event fired on clicking the navigate back button
+     */
+    static get eventNavigateBack() {
+        return `${prefix}-side-panel-navigate-back`;
+    }
+};
+CDSSidePanel.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+__decorate([
+    query(`.${blockClass}`)
+], CDSSidePanel.prototype, "_sidePanel", void 0);
+__decorate([
+    query(`.${blockClass}__animated-scroll-wrapper`)
+], CDSSidePanel.prototype, "_animateScrollWrapper", void 0);
+__decorate([
+    query(`.${blockClass}__label-text`)
+], CDSSidePanel.prototype, "_label", void 0);
+__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([
+    queryAssignedElements({
+        slot: 'actions',
+        selector: `${carbonPrefix}-button`,
+    })
+], CDSSidePanel.prototype, "_actions", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_doAnimateTitle", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_isOpen", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_containerScrollTop", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_hasSubtitle", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_hasSlug", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_hasActionToolbar", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_actionsCount", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_slugCloseSize", void 0);
+__decorate([
+    state()
+], CDSSidePanel.prototype, "_customHeaderElements", void 0);
+__decorate([
+    HostListener('keydown')
+], CDSSidePanel.prototype, "_handleHostKeydown", void 0);
+__decorate([
+    HostListener('document:keydown')
+    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+], CDSSidePanel.prototype, "_handleKeydown", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'animate-title', type: Boolean })
+], CDSSidePanel.prototype, "animateTitle", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'close-icon-description',
+        type: String,
+    })
+], CDSSidePanel.prototype, "closeIconDescription", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'close-icon-tooltip-alignment',
+        type: String,
+    })
+], CDSSidePanel.prototype, "closeIconTooltipAlignment", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'condensed-actions' })
+], CDSSidePanel.prototype, "condensedActions", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'current-step', type: Number })
+], CDSSidePanel.prototype, "currentStep", void 0);
+__decorate([
+    property({ attribute: 'include-overlay', type: Boolean, reflect: true })
+], CDSSidePanel.prototype, "includeOverlay", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'label-text' })
+], CDSSidePanel.prototype, "labelText", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'navigation-back-icon-description' })
+], CDSSidePanel.prototype, "navigationBackIconDescription", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CDSSidePanel.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], CDSSidePanel.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })
+], CDSSidePanel.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'selector-initial-focus',
+        type: String,
+    })
+], CDSSidePanel.prototype, "selectorInitialFocus", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'selector-page-content' })
+], CDSSidePanel.prototype, "selectorPageContent", void 0);
+__decorate([
+    property({ attribute: 'hide-close-button', type: Boolean })
+], CDSSidePanel.prototype, "hideCloseButton", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], CDSSidePanel.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'slide-in', type: Boolean, reflect: true })
+], CDSSidePanel.prototype, "slideIn", void 0);
+__decorate([
+    property({ reflect: false, type: String })
+], CDSSidePanel.prototype, "title", void 0);
+CDSSidePanel = __decorate([
+    carbonElement(`${prefix}-side-panel`)
+], CDSSidePanel);
+var CDSSidePanel$1 = CDSSidePanel;
+
+export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, CDSSidePanel$1 as default };
+//# sourceMappingURL=side-panel.js.map