igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
122 lines (121 loc) • 4.85 kB
TypeScript
import { LitElement, type PropertyValues } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import type { NavDrawerPosition } from '../types.js';
export interface IgcNavDrawerComponentEventMap {
igcClosing: CustomEvent<void>;
igcClosed: CustomEvent<void>;
}
declare const IgcNavDrawerComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcNavDrawerComponentEventMap>> & Constructor<LitElement>;
/**
* A side navigation container that provides
* quick access between views within an application.
*
* For non-relative positions (`start`, `end`, `top`, `bottom`) the drawer is
* rendered as a native `<dialog>` element, providing modal semantics, automatic
* focus trapping, and a backdrop. For the `relative` position it is rendered
* inline as a `<nav>` landmark.
*
* When content is provided in the `mini` slot, a compact icon-only variant is
* always displayed alongside the main drawer (hidden only while the full drawer
* is open).
*
* The component integrates with the
* [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
* an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` / `"--toggle"`
* and `commandfor` pointing to this element will call the corresponding method
* declaratively without any JavaScript.
*
* @element igc-nav-drawer
*
* @fires igcClosing - Emitted just before the drawer is closed by a user interaction. Cancelable —
* call `event.preventDefault()` to abort the closing sequence.
* @fires igcClosed - Emitted just after the drawer is closed by a user interaction.
*
* @slot - Renders the main navigation content of the drawer.
* @slot mini - Renders the compact mini variant of the drawer.
*
* @csspart base - The base wrapper of the drawer.
* @csspart main - The main content container of the drawer.
* @csspart mini - The mini variant container of the drawer.
*/
export default class IgcNavDrawerComponent extends IgcNavDrawerComponent_base {
static readonly tagName = "igc-nav-drawer";
static styles: import("lit").CSSResult[];
static register(): void;
private readonly _dialogRef;
private readonly _miniRef;
private readonly _slots;
private get _dialog();
private get _mini();
private get _hasMiniContent();
private get _isRelative();
/**
* Sets the position of the drawer.
*
* - `start` — anchored to the inline-start edge (default).
* - `end` — anchored to the inline-end edge.
* - `top` — anchored to the block-start edge.
* - `bottom` — anchored to the block-end edge.
* - `relative` — rendered inline within the page flow; no modal backdrop.
*
* @attr position
* @default 'start'
*/
position: NavDrawerPosition;
/**
* Whether the drawer is open.
*
* @attr open
* @default false
*/
open: boolean;
/**
* Determines whether the drawer should remain open when the Escape key is pressed.
*
* This attribute is only applicable when the drawer is in a non-relative position,
* as the Escape key does not trigger the closing of relative drawers.
*
* @attr keep-open-on-escape
* @default false
*/
keepOpenOnEscape: boolean;
/**
* Sets an accessible label for the drawer.
*
* In non-relative positions this label is applied to the modal `<dialog>` element.
* In `relative` position it labels the `<nav>` landmark.
*
* When multiple navigation landmarks exist on the page each should receive a
* distinct label so screen-reader users can differentiate between them.
*
* @attr label
*/
label?: string;
constructor();
protected update(properties: PropertyValues<this>): void;
protected updated(properties: PropertyValues<this>): void;
private _handleOpenState;
private _handleMiniState;
private _handleCancel;
private _handleClose;
private _handleClick;
private _emitClosing;
private _closeWithEvent;
/** Opens the drawer. Returns `true` if the operation was successful, `false` if the drawer was already open. */
show(): Promise<boolean>;
/** Closes the drawer. Returns `true` if the operation was successful, `false` if the drawer was already closed. */
hide(): Promise<boolean>;
/** Toggles the open state of the drawer. Delegates to `show()` or `hide()` depending on the current state. */
toggle(): Promise<boolean>;
private _renderMiniVariant;
private _renderContent;
private _renderDialog;
private _renderRelative;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-nav-drawer': IgcNavDrawerComponent;
}
}
export {};