@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
185 lines • 6.09 kB
TypeScript
/**
* @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 '@carbon/web-components/es/components/button/index.js';
import '@carbon/web-components/es/components/layer/index.js';
import '@carbon/web-components/es/components/button/button-set-base.js';
import '@carbon/web-components/es/components/modal/index.js';
import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH } from './defs';
export { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH, };
declare const CDSTearsheet_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;
/**
* Tearsheet.
*
* @element c4p-tearsheet
* @csspart dialog The dialog.
* @fires c4p-tearsheet-beingclosed
* The custom event fired before this tearsheet is being closed upon a user gesture.
* Cancellation of this event stops the user-initiated action of closing this tearsheet.
* @fires c4p-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.
*/
declare class CDSTearsheet extends CDSTearsheet_base {
/**
* The element that had focus before this tearsheet gets open.
*/
private _launcher;
/**
* Node to track tearsheet.
*/
private _tearsheet;
private _actions;
_actionsCount: number;
_hasHeaderActions: boolean;
_hasLabel: boolean;
_hasSlug: boolean;
_hasDecorator: boolean;
_hasAILabel: boolean;
_hasTitle: boolean;
_hasDescription: boolean;
_hasInfluencerLeft: boolean;
_hasInfluencerRight: boolean;
_isOpen: boolean;
_hasHeaderNavigation: boolean;
/**
* Handles `click` event on this element.
*
* @param event The event.
*/
private _handleClick;
/**
* Get focusable elements.
*
* Querying all tabbable items.
*
* @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
*/
private getFocusable;
private _handleKeydown;
/**
* 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 _checkSetHasSlot;
/**
* Handles `click` event on the modal container.
*
* @param event The event.
*/
private _handleClickContainer;
/**
* Handles user-initiated close request of this tearsheet.
*
* @param triggeredBy The element that triggered this close request.
*/
private _handleUserInitiatedClose;
private _handleSlugChange;
private _handleDecoratorChange;
/**
* Optional aria label for the tearsheet
*/
ariaLabel: string;
/**
* Sets the close button icon description
*/
closeIconDescription: string;
/**
* Enable a close icon ('x') in the header area of the tearsheet. By default,
* (when this prop is omitted, or undefined or null) a tearsheet does not
* display a close icon if there are navigation actions ("transactional
* tearsheet") and displays one if there are no navigation actions ("passive
* tearsheet"), and that behavior can be overridden if required by setting
* this prop to either true or false.
*/
hasCloseIcon: boolean;
/**
* The placement of the influencer section, 'left' or 'right'.
*/
influencerPlacement: TEARSHEET_INFLUENCER_PLACEMENT;
/**
* The width of the influencer section, 'narrow' or 'wide'.
*/
influencerWidth: TEARSHEET_INFLUENCER_WIDTH;
/**
* `true` if the tearsheet should be open.
*/
open: boolean;
/**
* Prevent closing on click outside of tearsheet
*/
preventCloseOnClickOutside: boolean;
/**
* The initial location of focus in the side panel
*/
selectorInitialFocus: any;
/**
* The width of the influencer section, 'narrow' or 'wide'.
*/
width: TEARSHEET_WIDTH;
private _checkUpdateActionSizes;
private _maxActions;
private _handleActionsChange;
_stackDepth: number;
_stackPosition: number;
private _topOfStack;
private static _stack;
private _notifyStack;
private _handleStackChange;
private _updateStack;
actionsMultiple: string;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit-html").TemplateResult<1> | null;
_checkSetOpen: () => void;
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 buttons that should close this modal.
*/
static get selectorCloseButton(): string;
/**
* A selector selecting tabbable nodes.
*/
static get selectorTabbable(): string;
/**
* The name of the custom event fired before this tearsheet is being closed upon a user gesture.
* Cancellation of this event stops the user-initiated action of closing this tearsheet.
*/
static get eventBeforeClose(): string;
/**
* The name of the custom event fired after this tearsheet 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 CDSTearsheet;
//# sourceMappingURL=tearsheet.d.ts.map