@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
187 lines • 6.28 kB
TypeScript
/**
* @license
*
* Copyright IBM Corp. 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 { LitElement, PropertyValues } from 'lit';
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 & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
/**
* Tearsheet component - A slide-out panel for displaying detailed content.
*
* @element c4p-preview-tearsheet
* @slot header - The header content of the tearsheet
* @slot influencer - Optional left sidebar content (wide variant only)
* @slot body - Main body content
* @slot footer - Footer content with actions
* @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
* @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
* @fires c4p-preview-tearsheet-collapse-change - Fired when the header collapse state changes.
* `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
*/
declare class CDSTearsheet extends CDSTearsheet_base {
/**
* Specifies whether the tearsheet is currently open.
*/
open: boolean;
/**
* User can pass any class names that will be added to the modal container
*/
containerClassName: string;
/**
* Default influencer takes 256px, this allows override eg: 300px, 20rem
*/
influencerWidth: string;
/**
* Default summary content takes 256px, this allows override eg: 300px, 20rem
*/
summaryContentWidth: string;
/**
* Defines the gap from top of the viewport. Defaulted to 3rem
*/
verticalGap: string;
/**
* Default to wide variant. Pass in narrow for narrow tearsheet
*/
variant: 'wide' | 'narrow';
/**
* Specify the CSS selectors that match the floating menus (comma-separated)
*/
selectorsFloatingMenus: string;
/**
* Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
*/
selectorPrimaryFocus: string;
/**
* Prevents the modal from closing when clicking outside
*/
preventCloseOnClickOutside: boolean;
/**
* Optional ref to the trigger button that opened the tearsheet. Focus will return here when tearsheet closes.
*/
launcherButtonRef?: HTMLElement;
/**
* Unique ID for this tearsheet instance
*/
private uniqueId;
/**
* Internal flag to track if stacking is enabled (via wrapper)
*/
private _stackingEnabled;
/**
* Internal state for tracking if the tearsheet is in small screen mode
*/
private isSm;
/**
* Query the modal body element
*/
private modalBodyElement?;
private _trapFocusAPI;
private _wasOpen;
/**
* Query the header content element to get its titleId
*/
private headerContentElement?;
private smMediaQuery;
private isSmallDevice;
/**
* Checks if the tearsheet has a decorator (AI label or other)
*/
private get hasDecorator();
/**
* Checks if the tearsheet has an AI label decorator
*/
private get hasAILabel();
connectedCallback(): void;
protected firstUpdated(_changedProperties: PropertyValues): void;
/** Read close-button props from the slotted c4p-tearsheet-header element */
private _readHeaderProps;
protected updated(_changedProperties: PropertyValues): void;
private updateIsSmState;
private handleOpenPropertyChange;
private updateCSSPropertiesIfNeeded;
private updateStackPropertiesIfNeeded;
/**
* Update CSS custom properties for stacking
*/
private updateStackProperties;
/**
* Delegates to `c4p-tearsheet-header-content.getFirstFocusable()`.
* All priority logic lives in the component that owns the relevant DOM.
*/
private _getFirstFocusable;
disconnectedCallback(): void;
/**
* Update CSS custom properties for dynamic styling
*/
private updateCSSCustomProperties;
/**
* Update influencer visibility based on slot content and screen size
* Handles both slot changes and screen size changes
*/
private updateInfluencerVisibility;
/**
* Check if this tearsheet is wrapped in a stack provider
*/
private _checkForStackWrapper;
/**
* Handle stack wrapper connected event
*/
private handleStackConnected;
/**
* Handle stack step size changed event
*/
private handleStackStepSizeChanged;
/**
* Handle influencer slot change
*/
private handleInfluencerSlotChange;
/**
* Common method to handle tearsheet close with proper event dispatching
* @param originalEvent - The original event that triggered the close (optional)
* @param useAsync - Whether to dispatch closed event asynchronously
*/
private closeTearsheet;
/**
* Handle close button click from the header
* This is an internal event that triggers the tearsheet to close
*/
private handleHeaderCloseButtonClick;
/**
* Intercepts the internal collapse-change event from the header and
* re-dispatches it as the public `c4p-preview-tearsheet-collapse-change` event.
*/
private handleHeaderCollapseChange;
/**
* Handle close event from the modal (ESC key, click outside, etc.)
*/
private handleClose;
/**
* Parse floating menu selectors from comma-separated string
*/
private getFloatingMenuSelectors;
render(): import("lit-html").TemplateResult<1>;
static styles: any;
/**
* Public event fired when the header collapse state changes.
* `event.detail.collapsed` is `true` when collapsing, `false` when expanding.
*/
static get eventCollapseChange(): string;
}
export default CDSTearsheet;
//# sourceMappingURL=tearsheet.d.ts.map