@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
749 lines (738 loc) • 30.2 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 "../../globals/settings.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE } from "./defs.js";
import side_panel_default$1 from "./side-panel.scss.js";
import "../action-set/index.js";
import { LitElement, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import "@carbon/web-components/es/components/button/index.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 { 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 Close 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/components/icon-button/index.js";
import "@carbon/web-components/es/components/layer/index.js";
import "@carbon-labs/wc-resizer/es/index.js";
//#region src/components/side-panel/side-panel.ts
/**
* @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 = `c4p--side-panel`;
/**
* 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(..._args) {
super(..._args);
this._hObserveResize = null;
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._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();
if (event.shiftKey && (this.shadowRoot?.activeElement === _firstElement || document.activeElement === _firstElement)) {
event.preventDefault();
_lastElement?.focus();
} else if (!event.shiftKey && document.activeElement === _lastElement) {
event.preventDefault();
_firstElement?.focus();
}
}
};
this._handleKeydown = ({ key, target }) => {
if (key === "Esc" || key === "Escape") this._handleUserInitiatedClose(target);
};
this._reducedMotion = typeof window !== "undefined" && window?.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)") : { matches: true };
this._adjustPageContent = () => {
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 = `${this?._sidePanel?.offsetWidth}px`;
else newValues.marginInlineEnd = `${this?._sidePanel?.offsetWidth}px`;
}
if (this.slideIn) Object.keys(newValues).forEach((key) => {
pageContentEl.style[key] = newValues[key];
});
}
}
};
this._checkSetOpen = () => {
const { _sidePanel: sidePanel } = this;
if (sidePanel && this._isOpen) if (this._reducedMotion?.matches) this._isOpen = false;
else sidePanel.addEventListener("transitionend", () => {
this._isOpen = false;
});
else if (this.open) requestAnimationFrame(() => {
this._isOpen = this.open;
});
else this._isOpen = false;
};
this._checkUpdateIconButtonSizes = () => {
const slug = this.querySelector(`c4p-slug`);
const otherButtons = this?.shadowRoot?.querySelectorAll("#nav-back-button, #close-button");
let iconButtonSize = "sm";
if (slug || otherButtons?.length) {
if ((this?.querySelectorAll?.(`c4p-button[slot='actions']`))?.length && /l/.test(this.size)) iconButtonSize = "md";
}
if (slug) slug?.setAttribute("size", iconButtonSize);
if (otherButtons) [...otherButtons].forEach((btn) => {
btn.setAttribute("size", iconButtonSize);
});
};
this._checkSetDoAnimateTitle = () => {
let canDoAnimateTitle = false;
if (this._sidePanel && this.open && this.animateTitle && this?.title?.length && !this._reducedMotion.matches) {
const scrollAnimationDistance = this._getScrollAnimationDistance();
this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-distance`, `${scrollAnimationDistance}`);
let scrollEl = this._animateScrollWrapper;
if (!scrollEl && this.animateTitle && !this._doAnimateTitle) scrollEl = this._innerContent;
if (scrollEl) {
const innerComputed = window?.getComputedStyle(this._innerContent);
const innerPaddingHeight = innerComputed ? parseFloat(innerComputed?.paddingTop) + parseFloat(innerComputed?.paddingBottom) : 0;
canDoAnimateTitle = (!!this.labelText || !!this._hasActionToolbar || this._hasSubtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= scrollAnimationDistance + innerPaddingHeight;
}
}
this._doAnimateTitle = canDoAnimateTitle;
};
this._resizeObserver = new ResizeObserver(() => {
if (this._sidePanel) this._checkSetDoAnimateTitle();
});
this._getScrollAnimationDistance = () => {
const labelHeight = this?._label?.offsetHeight ?? 0;
const subtitleHeight = this?._subtitle?.offsetHeight ?? 0;
const titleVerticalBorder = this._hasActionToolbar ? this._title.offsetHeight - this._title.clientHeight : 0;
return labelHeight + subtitleHeight + titleVerticalBorder;
};
this._scrollObserver = () => {
const scrollTop = this._animateScrollWrapper?.scrollTop ?? 0;
const scrollAnimationDistance = this._getScrollAnimationDistance();
const animationProgress = Math.min(scrollTop, scrollAnimationDistance) / scrollAnimationDistance;
this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, `${animationProgress}`);
if (animationProgress === 1) this._customHeaderElements.forEach((el) => {
el.classList.add(`cds--visually-hidden`);
});
else this._customHeaderElements.forEach((el) => {
el.classList.remove(`cds--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;
};
this.animateTitle = true;
this.closeIconDescription = "Close";
this.closeIconTooltipAlignment = "left";
this.condensedActions = false;
this.includeOverlay = false;
this.navigationBackIconDescription = "Back";
this.open = false;
this.placement = "right";
this.preventCloseOnClickOutside = false;
this.selectorPageContent = "";
this.hideCloseButton = false;
this.size = "md";
this.slideIn = false;
this.resizable = false;
}
/**
* Get focusable elements.
*
* Querying all tabbable items.
*
* @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
*/
getFocusable() {
const elements = [];
if (this.currentStep > 0) {
const backButton = this.shadowRoot?.querySelector(`.${blockClass}__navigation-back-button`);
if (backButton) elements.push(backButton);
}
const aboveTitleSlot = this.shadowRoot?.querySelector("slot[name=\"above-title\"]");
if (aboveTitleSlot) {
const aboveTitleElements = aboveTitleSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
elements.push(...aboveTitleElements);
}
const labelText = this.shadowRoot?.querySelector(`.${blockClass}__label-text`);
if (labelText) elements.push(labelText);
const titleText = this.shadowRoot?.querySelector(`.${blockClass}__title-text`);
if (titleText) elements.push(titleText);
if (this._hasSlug) {
const slugElements = Array.from(this.querySelectorAll(`cds-slug`));
elements.push(...slugElements);
}
if (!this.hideCloseButton) {
const closeButton = this.shadowRoot?.querySelector(`.${blockClass}__close-button`);
if (closeButton) elements.push(closeButton);
}
const subtitleText = this.shadowRoot?.querySelector(`.${blockClass}__subtitle-text`);
if (subtitleText && !subtitleText.hidden) elements.push(subtitleText);
const belowTitleSlot = this.shadowRoot?.querySelector("slot[name=\"below-title\"]");
if (belowTitleSlot) {
const belowTitleElements = belowTitleSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
elements.push(...belowTitleElements);
}
const actionToolbarSlot = this.shadowRoot?.querySelector("slot[name=\"action-toolbar\"]");
if (actionToolbarSlot) {
const actionToolbarElements = actionToolbarSlot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement && typeof el.focus === "function");
elements.push(...actionToolbarElements);
}
const defaultSlot = this.shadowRoot?.querySelector("slot:not([name])");
if (defaultSlot) {
const bodyElements = defaultSlot.assignedElements({ flatten: true }).flatMap((el) => Array.from(el.querySelectorAll(selectorTabbable)));
elements.push(...bodyElements);
}
const actionsSlot = this.shadowRoot?.querySelector("slot[name=\"actions\"]");
if (actionsSlot) {
const actionElements = actionsSlot.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement && typeof el.focus === "function");
elements.push(...actionElements);
}
const all = elements.filter((el) => typeof 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 subtitle = e.target?.assignedElements();
this._hasSubtitle = subtitle.length > 0;
}
_handleCustomHeaderSlotChange(e) {
(e.target?.assignedElements()).forEach((el) => {
if (el instanceof HTMLElement) {
el.style.opacity = `calc(1 - var(--${blockClass}--scroll-animation-progress))`;
this._customHeaderElements.push(el);
}
});
}
_handleActionToolbarChange(e) {
const toolbarActions = e.target?.assignedElements();
this._hasActionToolbar = toolbarActions && toolbarActions.length > 0;
if (this._hasActionToolbar) for (let i = 0; i < toolbarActions.length; i++) {
const toolbarAction = toolbarActions[i];
toolbarAction.setAttribute("size", "sm");
if (i === 0) toolbarAction.classList.add(`${blockClass}__action-toolbar-leading-button`);
else toolbarAction.classList.remove(`${blockClass}__action-toolbar-leading-button`);
}
}
_handleActionsChange(e) {
const actions = e.target?.assignedElements();
this._checkUpdateIconButtonSizes();
const actionsCount = actions?.length ?? 0;
this._actionsCount = actionsCount;
if (actionsCount === 1) this._actionsMultiple = "single";
else if (actionsCount === 2) this._actionsMultiple = "double";
else if (actionsCount === 3) this._actionsMultiple = "triple";
else this._actionsMultiple = "";
}
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();
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;
if (!open && !this._isOpen) return html``;
const titleTemplate = html` <div
class=${`${blockClass}__title`}
?no-label=${!!labelText}
>
<h2 class=${title ? `${blockClass}__title-text` : ""} tabindex="0">
${title}
</h2>
${this._doAnimateTitle ? html`<h2
class=${`${blockClass}__collapsed-title-text`}
aria-hidden="true"
>
${title}
</h2>` : ""}
</div>`;
const headerTemplate = html`
<div
class=${`${blockClass}__header${this.title ? ` ${blockClass}__header--has-title ` : ""}`}
?detail-step=${currentStep > 0}
?no-title-animation=${!this._doAnimateTitle}
?reduced-motion=${this._reducedMotion.matches}
>
<!-- render back button -->
${currentStep > 0 ? html`<cds-icon-button
align="bottom-left"
aria-label=${navigationBackIconDescription}
kind="ghost"
size="sm"
class=${`c4p--btn ${blockClass}__navigation-back-button`}
=${this._handleNavigateBack}
>
${iconLoader(ArrowLeft16, { slot: "icon" })}
<span slot="tooltip-content">
${navigationBackIconDescription}
</span>
</cds-icon-button>` : ""}
<!-- slot for custom header components -->
<slot
name="above-title"
=${this._handleCustomHeaderSlotChange}
></slot>
<!-- render title label -->
${title?.length && labelText?.length ? html` <p class=${`${blockClass}__label-text`} tabindex="0">
${labelText}
</p>` : ""}
<!-- title -->
${title ? titleTemplate : ""}
<!-- render slug and close button area -->
<div class=${`${blockClass}__slug-and-close`}>
<slot name="slug" =${this._handleSlugChange}></slot>
<!-- {normalizedSlug} -->
${!hideCloseButton ? html`<cds-icon-button
align=${closeIconTooltipAlignment}
aria-label=${closeIconDescription}
kind="ghost"
size="sm"
class=${`${blockClass}__close-button`}
=${this._handleCloseClick}
>
${iconLoader(Close, { slot: "icon" })}
<span slot="tooltip-content"> ${closeIconDescription} </span>
</cds-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}
tabindex="0"
>
<slot
name="subtitle"
=${this._handleSubtitleChange}
></slot>
</p>
<!-- slot for custom header components -->
<slot
name="below-title"
=${this._handleCustomHeaderSlotChange}
></slot>
<div
class=${this._hasActionToolbar ? `${blockClass}__action-toolbar` : ""}
?hidden=${!this._hasActionToolbar}
?no-title-animation=${!this._doAnimateTitle}
>
<slot
name="action-toolbar"
=${this._handleActionToolbarChange}
></slot>
</div>
</div>
`;
const mainTemplate = html`<div
class=${`${blockClass}__inner-content`}
?scrolls=${!this._doAnimateTitle}
>
<cds-layer level="1">
<slot></slot>
</cds-layer>
</div> `;
return html`
<div
class=${`${blockClass}${this._doAnimateTitle ? ` ${blockClass}--animated-title` : ""}`}
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}
?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"
-start=${this._handleResizeStart}
-drag=${this._handleResizeDrag}
-end=${this._handleResizeEnd}
-reset=${this._handleResizeReset}
></clabs-resizer-handle>` : ""}
${this._doAnimateTitle ? html`<div class=${`${blockClass}__animated-scroll-wrapper`} scrolls>
${headerTemplate} ${mainTemplate}
</div>` : html` ${headerTemplate} ${mainTemplate}`}
<c4p-action-set
class=${`${blockClass}__actions-container`}
?hidden=${this._actionsCount === 0}
size="md"
button-size=${condensedActions ? "md" : "lg"}
actions-multiple=${this._actionsMultiple}
>
<slot name="actions" =${this._handleActionsChange}></slot>
</c4p-action-set>
</div>
${includeOverlay ? html`<div
?slide-in=${slideIn}
class=${`${blockClass}__overlay`}
?open=${this.open}
?opening=${open && !this._isOpen}
?closing=${!open && this._isOpen}
tabindex="-1"
=${this._handleClickOnOverlay}
></div>` : ""}
`;
}
async updated(changedProperties) {
if (changedProperties.has("currentStep")) this._handleCurrentStepUpdate();
if (changedProperties.has("_doAnimateTitle")) {
this?._animateScrollWrapper?.removeEventListener("scroll", this._scrollObserver);
if (this._doAnimateTitle) this?._animateScrollWrapper?.addEventListener("scroll", this._scrollObserver);
else this?._sidePanel?.style?.setProperty(`--${blockClass}--scroll-animation-progress`, "0");
}
if (changedProperties.has("_isOpen") || changedProperties.has("animateTitle")) 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 (this.selectorInitialFocus?.trim()?.length) this.querySelector(this.selectorInitialFocus)?.focus();
else if (!this.slideIn) {
const { first: _firstElement } = this.getFocusable();
_firstElement?.focus();
}
} else if (this._launcher && typeof this._launcher?.focus === "function") {
this._launcher?.focus();
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.
* @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 `c4p-side-panel-beingclosed`;
}
/**
* The name of the custom event fired after this side-panel is closed upon a user gesture.
*/
static get eventClose() {
return `c4p-side-panel-closed`;
}
/**
* The name of the custom event fired on clicking the navigate back button
*/
static get eventNavigateBack() {
return `c4p-side-panel-navigate-back`;
}
static {
this.styles = side_panel_default$1;
}
};
__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([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);
__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, "_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({
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({
type: Boolean,
reflect: true
})], CDSSidePanel.prototype, "resizable", void 0);
__decorate([property({
reflect: false,
type: String
})], CDSSidePanel.prototype, "title", void 0);
CDSSidePanel = __decorate([carbonElement(`c4p-side-panel`)], CDSSidePanel);
var side_panel_default = CDSSidePanel;
//#endregion
export { SIDE_PANEL_PLACEMENT, SIDE_PANEL_SIZE, side_panel_default as default };
//# sourceMappingURL=side-panel.js.map