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

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

@@ -1,859 +0,0 @@
-/**
- * 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