@carbon/ibm-products-web-components

/** * @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. */ import { LitElement } from 'lit'; import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs'; import '@carbon/web-components/es/components/button/index.js'; import '@carbon/web-components/es/components/icon-button/index.js'; import '@carbon/web-components/es/components/layer/index.js'; import '../action-set/index.js'; import '@carbon-labs/wc-resizer/es/index.js'; export { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT }; declare const CDSSidePanel_base: { new (...args: any[]): { _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>; connectedCallback(): void; disconnectedCallback(): void; }; _hostListeners: { [listenerName: string]: { [type: string]: { options?: boolean | AddEventListenerOptions; }; }; }; } & typeof LitElement; /** * 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) */ declare class CDSSidePanel extends CDSSidePanel_base { /** * The handle for observing resize of the parent element of this element. */ private _hObserveResize; /** * The element that had focus before this side-panel gets open. */ private _launcher; /** * Node to track side panel. */ private _sidePanel; private _animateScrollWrapper?; private _label; private _title; private _subtitle; private _innerContent; /** * Reference to the resizer handle element */ private _resizerHandle?; _doAnimateTitle: boolean; _isOpen: boolean; _containerScrollTop: number; _hasSubtitle: boolean; _hasSlug: boolean; _hasActionToolbar: boolean; _actionsCount: number; _actionsMultiple: 'single' | 'double' | 'triple' | ''; _slugCloseSize: string; _customHeaderElements: Element[]; _sidePanelWidth?: number; _accumulatedDelta: number; /** * Get focusable elements. * * Querying all tabbable items. * * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements. */ private getFocusable; /** * Handle the keydown event. * Trap the focus inside the side-panel by tracking keydown.key == `Tab` * * @param {KeyboardEvent} event The keyboard event object. */ protected _handleHostKeydown: (event: KeyboardEvent) => void; private _handleKeydown; private _reducedMotion; /** * Handles `click` event on the side-panel container. * * @param event The event. */ private _handleClickOnOverlay; /** * Handles `click` event on the side-panel container. * * @param event The event. */ private _handleCloseClick; /** * Handles user-initiated close request of this side-panel. * * @param triggeredBy The element that triggered this close request. */ private _handleUserInitiatedClose; private _handleNavigateBack; private _adjustPageContent; private _checkSetOpen; private _checkUpdateIconButtonSizes; private _handleSlugChange; private _handleSubtitleChange; private _handleCustomHeaderSlotChange; private _handleActionToolbarChange; private _handleActionsChange; private _checkSetDoAnimateTitle; /** * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position. */ private _resizeObserver; private _getScrollAnimationDistance; private _scrollObserver; /** * Handles resize start event from the resizer handle */ private _handleResizeStart; /** * Handles resize drag event from the resizer handle */ private _handleResizeDrag; /** * Handles resize end event from the resizer handle */ private _handleResizeEnd; /** * Handles double-click/double-tap on resizer to reset size */ private _handleResizeReset; /** * Get the percentage of screen width the panel is covering */ private _getPanelWidthPercent; private _handleCurrentStepUpdate; /** * Determines if the title will animate on scroll */ animateTitle: boolean; /** * Sets the close button icon description */ closeIconDescription: string; /** * Sets the close button tooltip alignment */ closeIconTooltipAlignment: string; /** * Determines whether the side panel should render the condensed version (affects action buttons primarily) */ condensedActions: boolean; /** * Sets the current step of the side panel */ currentStep: any; /** * Determines whether the side panel should render with an overlay */ includeOverlay: boolean; /** * Sets the label text which will display above the title text */ labelText: any; /** * Sets the icon description for the navigation back icon button */ navigationBackIconDescription: string; /** * `true` if the side-panel should be open. */ open: boolean; /** * SidePanel placement. */ placement: SIDE_PANEL_PLACEMENT; /** * Prevent closing on click outside of side-panel */ preventCloseOnClickOutside: boolean; /** * The initial location of focus in the side panel */ selectorInitialFocus: any; /** * Selector for page content, used to push content to side except */ selectorPageContent: string; /** * Show/hide the "X" close button */ hideCloseButton: boolean; /** * SidePanel size. */ size: SIDE_PANEL_SIZE; /** * Determines if this panel slides in */ slideIn: boolean; /** * Determines if the side panel is resizable */ resizable: boolean; /** * Sets the title text */ title: any; connectObservers(): Promise<void>; disconnectObservers(): void; connectedCallback(): void; disconnectedCallback(): void; render(): import("lit-html").TemplateResult<1>; updated(changedProperties: any): Promise<void>; /** * @param ms The number of milliseconds. * @returns A promise that is resolves after the given milliseconds. */ private static _delay; /** * A selector selecting tabbable nodes. */ static get selectorTabbable(): string; /** * 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(): string; /** * The name of the custom event fired after this side-panel is closed upon a user gesture. */ static get eventClose(): string; /** * The name of the custom event fired on clicking the navigate back button */ static get eventNavigateBack(): string; static styles: any; } export default CDSSidePanel; //# sourceMappingURL=side-panel.d.ts.map