import { IAnimatable } from '../../../Behaviors/Animatable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { DrawerMode } from '../../../Types/DrawerMode'; import { DrawerPosition } from '../../../Types/DrawerPosition'; import { OverlayElement } from '../Abstracts/OverlayElement'; import type { IDrawerElementProps } from './IDrawerElementProps'; declare const DrawerElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Drawer - A hidden side panel that slides in from the edge of the viewport. * * @description * A side-navigation or off-canvas panel that supports `over` and `side` modes, * multiple positions (left/right/top/bottom), fullscreen mode, and optional shadow. * * @name Drawer * @element mosaik-drawer * @category Overlays * * @slot - The default content slot. * @slot actions - The actions content slot. * @slot footer - The footer content slot. * @slot header - The header content slot. * * @csspart actions - The actions part. * @csspart backdrop - The backdrop element. * @csspart elevation - The elevation element. * @csspart footer - The footer element. * @csspart header - The header container element. * @csspart main - The main part. * @csspart root - The root container element. * * @cssprop {String} --drawer-background-color - The background color CSS custom property. * @cssprop {String} --drawer-border-color - The border color CSS custom property. * @cssprop {String} --drawer-border-radius - The border radius CSS custom property. * @cssprop {String} --drawer-border-style - The border style CSS custom property. * @cssprop {String} --drawer-border-width - The border width CSS custom property. * @cssprop {String} --drawer-divider-height - The divider height CSS custom property. * @cssprop {String} --drawer-font-family - The font family CSS custom property. * @cssprop {String} --drawer-font-letter-spacing - The font letter spacing CSS custom property. * @cssprop {String} --drawer-font-line-height - The font line height CSS custom property. * @cssprop {String} --drawer-font-size - The font size CSS custom property. * @cssprop {String} --drawer-font-text-decoration - The font text decoration CSS custom property. * @cssprop {String} --drawer-font-text-transform - The font text transform CSS custom property. * @cssprop {String} --drawer-font-weight - The font weight CSS custom property. * @cssprop {String} --drawer-foreground-color - The foreground color CSS custom property. * @cssprop {String} --drawer-gap - The gap CSS custom property. * @cssprop {String} --drawer-height - The height CSS custom property. * @cssprop {String} --drawer-line-thickness - The line thickness CSS custom property. * @cssprop {String} --drawer-padding-bottom - The padding bottom CSS custom property. * @cssprop {String} --drawer-padding-left - The padding left CSS custom property. * @cssprop {String} --drawer-padding-right - The padding right CSS custom property. * @cssprop {String} --drawer-padding-top - The padding top CSS custom property. * @cssprop {String} --drawer-shadow - The shadow CSS custom property. * @cssprop {String} --drawer-shadow-blur - The shadow blur CSS custom property. * @cssprop {String} --drawer-shadow-color - The shadow color CSS custom property. * @cssprop {String} --drawer-shadow-offset-x - The shadow offset x CSS custom property. * @cssprop {String} --drawer-shadow-offset-y - The shadow offset y CSS custom property. * @cssprop {String} --drawer-shadow-spread - The shadow spread CSS custom property. * @cssprop {String} --drawer-transition-duration - The transition duration CSS custom property. * @cssprop {String} --drawer-transition-mode - The transition mode CSS custom property. * @cssprop {String} --drawer-transition-property - The transition property CSS custom property. * @cssprop {String} --drawer-translate - The translate CSS custom property. * @cssprop {String} --drawer-width - The width CSS custom property. * * @fires closed {ClosedEvent} - Dispatched when the drawer is closed. * @fires opened {OpenedEvent} - Dispatched when the drawer is opened. * * @dependency mosaik-backdrop - The Backdrop element. * @dependency mosaik-dismiss - The Dismiss element. * @dependency mosaik-drawer-header - The Drawer Header element. * @dependency mosaik-drawer-header-sub-text - The Drawer Header Sub Text element. * @dependency mosaik-drawer-header-text - The Drawer Header Text element. * @dependency mosaik-elevation - The Elevation element. * * @example * Basic left drawer in over mode: * ```html * * ``` * * @example * Persistent side drawer with shadow: * ```html * * ``` * * @example * Fullscreen drawer from the right: * ```html * * ``` * * @public */ export declare class DrawerElement extends DrawerElement_base implements IDrawerElementProps, ISlottable, IAnimatable { private readonly _provider; private _isComposed; private _header; private _subHeader; private _position; private _mode; private _hasShadow; private _isFullScreen; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `header` property. * * @public * @attr */ get header(): string; set header(value: string); /** * Gets or sets the `subHeader` property. * * @public * @attr */ get subHeader(): string; set subHeader(value: string); /** * Gets or sets the `isFullScreen` property. * * @public * @attr */ get isFullScreen(): boolean; set isFullScreen(value: boolean); /** * Gets or sets the `position` property. * * @public * @attr */ get position(): DrawerPosition; set position(value: DrawerPosition); /** * Gets or sets the `mode` property. * * @public * @attr */ get mode(): DrawerMode; set mode(value: DrawerMode); /** * Gets or sets the `isComposed` property. * * @public * @readonly * @attr */ get isComposed(): boolean; private set isComposed(value); /** * Gets or sets the `hasShadow` property. * * @public * @attr */ get hasShadow(): boolean; set hasShadow(value: boolean); /** * Gets the animation target element. * For the drawer, animations are applied to the root template part instead of the host element. * * @public * @override * @readonly */ get animationTarget(): HTMLElement; /** * Opens the drawer. * * @public * @override */ open(): Promise; /** * Closes the drawer. * * @public * @override */ close(): Promise; /** * Toggles the drawer between open and closed states. * * @public */ toggle(): Promise; /** * Returns the inner offset width of the drawer. * * @public */ innerOffsetWidth(): number; /** * Handles the backdrop click event. * Only closes the drawer if `clickOutsideToClose` is enabled. * * @private * @template */ onBackdrop(): void; /** * @protected * @override */ protected onApplyTemplate(): void; } /** * @public */ export declare namespace DrawerElement { type Props = IDrawerElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-drawer': DrawerElement; } } export {}; //# sourceMappingURL=DrawerElement.d.ts.map