@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
140 lines • 5.69 kB
TypeScript
import { BaseNavigationContainer } from '../navigation/internal/base-navigation-container';
import { type IConnectedPromiseResolve } from '../../utils/behaviors/connected-promise-resolve';
import { NavigationRailCollapsedVariant, type INavigationRail } from './navigation-rail.interface';
import { type PropertyValues, type TemplateResult } from 'lit';
declare global {
interface HTMLElementTagNameMap {
'mdc-navigation-rail': NavigationRail;
}
}
type AnimationArgs = Parameters<Element['animate']>;
interface NavigationRailAnimation {
dialog: AnimationArgs[];
container?: AnimationArgs[];
destination?: AnimationArgs[];
}
declare const NavigationRail_base: Omit<typeof BaseNavigationContainer, "prototype"> & (new () => BaseNavigationContainer & IConnectedPromiseResolve & import("lit").LitElement & import("../../utils/xr/xr-options.mixin").TMixinXROptions);
/**
* @example
* ```html
* <mdc-navigation-rail expanded navigation-scope="main-nav-2">
* <mdc-navigation-tab name="dsjdvfq" value="/" checked label="Label Home" variant="rail-vertical">
* <mdc-icon slot="inactive-icon">send</mdc-icon>
* <mdc-icon slot="active-icon" filled>send</mdc-icon>
* </mdc-navigation-tab>
* <mdc-navigation-tab name="dsjdvfq" value="/page2" label="Label Home" variant="rail-vertical">
* <mdc-icon slot="inactive-icon">send</mdc-icon>
* <mdc-icon slot="active-icon" filled>send</mdc-icon>
* </mdc-navigation-tab>
* </mdc-navigation-rail>
* ```
*
* @emits expand
* @emits expanded
* @emits collapse
* @emits collapsed
*
* @version
* Material Design 3 - Expressive
*
* @implements
* Expanded: YES
* Collapsed: YES
* CollapsedXR
* Modal
*/
export declare class NavigationRail extends NavigationRail_base implements INavigationRail, IConnectedPromiseResolve {
static styles: import("lit").CSSResult[];
/**
* When `true`, skip all animations:
* - Standard mode: CSS `transition` is suppressed.
* - Modal mode: WAAPI entry/exit animations are skipped.
*/
quick: boolean;
/**
* Toggles between collapsed (narrow) and expanded (wide) visual states.
*
* - **Standard mode** (`modal=false`): in-flow rail; width changes via CSS transition.
* - **Modal mode** (`modal=true`): floating overlay; `true` shows the dialog,
* `false` closes it. Width within each state follows the same CSS transition.
*
* Setting this property calls {@link expand} or {@link collapse} via the
* `updated()` lifecycle, decoupled from the property accessor itself.
*/
expanded: boolean;
/**
* When `true`, renders as a floating modal overlay.
* When `false`, renders as an in-flow rail (standard).
*
* This property does NOT change at runtime after initial render — it
* determines the fundamental layout strategy. Changing it dynamically
* is not a supported flow.
*/
modal: boolean;
/**
* Determines the tab variant when the rail is collapsed.
* - `'vertical'`: tabs use `rail-vertical`
* - `'round'`: tabs use `rail-round`
*
* When expanded, tabs always use `rail-horizontal` regardless of this value.
*/
collapsedVariant: NavigationRailCollapsedVariant;
protected isAtScrollTop: boolean;
protected isAtScrollBottom: boolean;
protected readonly topAnchor: HTMLElement | null;
protected readonly bottomAnchor: HTMLElement | null;
protected readonly scroller: HTMLElement | null;
protected readonly destination: HTMLElement | null;
protected readonly dialog: HTMLDialogElement | null;
protected readonly container: HTMLDialogElement | null;
/**
* Guard to prevent `updated()` from re-entering expand/collapse when
* those methods internally revert the `expanded` property.
*/
private handleExpandedChange;
protected isExpanding: boolean;
returnValue: string;
protected nextClickIsFromContent: boolean;
protected intersectionObserver?: IntersectionObserver;
protected escapePressedWithoutCancel: boolean;
protected firstUpdated(): void;
/**
* Drives {@link expand}/{@link collapse} when the `expanded` property changes.
* The `handleExpandedChange` guard prevents re-entry when expand/collapse
* internally revert the property (e.g. on cancel).
*/
protected updated(changedProperties: PropertyValues<this>): void;
private handleAnchorIntersection;
private syncTabVariants;
private computeTargetVariant;
getRenderClasses(): {
xr: boolean;
modal: boolean;
standard: boolean;
expanded: boolean;
'collapsed-xr': boolean;
collapsed: boolean;
scrollable: boolean;
'show-top-divider': boolean;
'show-bottom-divider': boolean;
};
protected render(): TemplateResult;
protected renderBackground(): TemplateResult;
protected renderMenuSlot(): TemplateResult<1>;
protected renderFabSlot(): TemplateResult<1>;
protected renderEndSlot(): TemplateResult<1>;
protected getExpandingAnimation(): NavigationRailAnimation;
protected getCollapsingAnimation(): NavigationRailAnimation;
private cancelAnimations;
expand(): Promise<void>;
collapse(returnValue?: string): Promise<void>;
private animateHost;
protected handleDialogClick(): void;
protected handleContentClick(): void;
protected handleSubmit(event: SubmitEvent): void;
protected handleCancel(event: Event): void;
protected handleClose(): void;
protected handleKeydown(event: KeyboardEvent): void;
}
export {};
//# sourceMappingURL=navigation-rail.d.ts.map