@nexterajs/ui 0.0.2 → 0.1.0

package/types/nexterajs-ui-overlay.d.ts

@@ -0,0 +1,703 @@
+import { ComponentType } from '@angular/cdk/portal';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Injector, ViewContainerRef, TemplateRef, OnDestroy } from '@angular/core';
+import { NxeButtonType, NxeButtonStylingMode } from '@nexterajs/ui/forms';
+import { DialogRef } from '@angular/cdk/dialog';
+import { Observable } from 'rxjs';
+import { NxeMenuCloseTarget } from '@nexterajs/ui/dropdowns';
+import { FocusableOption } from '@angular/cdk/a11y';
+import { NxeMessageService } from '@nexterajs/ui/core';
+
+/**
+ * Handle on an open dialog. Injectable in the content component (`inject(NxeDialogRef)`), and
+ * returned by `NxeDialogService.open`.
+ */
+declare class NxeDialogRef<R = unknown, C = unknown> {
+    /** Unique id; the dialog's DOM id. */
+    readonly id: string;
+    /** Id the dialog's title element takes, and the dialog's `aria-labelledby`. */
+    readonly titleId: string;
+    private cdkRef;
+    private outlet;
+    private pendingClose;
+    private titleClaimed;
+    private readonly closedSubject;
+    private readonly resultSignal;
+    private readonly closedSignal;
+    private dismissable;
+    /** The result the dialog closed with; `undefined` until it closes (and if it closed without one). */
+    readonly result: _angular_core.Signal<R | undefined>;
+    /** `true` once the dialog has closed. */
+    readonly isClosed: _angular_core.Signal<boolean>;
+    constructor(
+    /** Unique id; the dialog's DOM id. */
+    id: string, 
+    /** Id the dialog's title element takes, and the dialog's `aria-labelledby`. */
+    titleId: string);
+    /** Whether Esc and the backdrop may dismiss the dialog. Set `true` while the form is dirty. Explicit `close()` still works. */
+    get disableClose(): boolean;
+    set disableClose(value: boolean);
+    /** The content component instance; `null` for a template, or before it is created. */
+    get componentInstance(): C | null;
+    /** Close with a result. Safe to call more than once. */
+    close(result?: R): void;
+    /** Emits the result once, when the dialog closes, then completes. Late subscribers still get it. */
+    afterClosed(): Observable<R | undefined>;
+    /** The same as {@link afterClosed}, as a promise. */
+    whenClosed(): Promise<R | undefined>;
+    /** @internal Claimed by the first `nxe-dialog-title` in the dialog, which then carries {@link titleId}. */
+    _claimTitle(): string | null;
+    /** @internal */
+    _attach(cdkRef: DialogRef<R, unknown>): void;
+    /** @internal */
+    _setOutlet(outlet: () => C | null): void;
+}
+
+/** Dialog width. `sm` 400px, `md` 640px, `lg` 960px, `xl` 1200px, `fullscreen` fills the viewport. */
+type NxeDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+/** ARIA role of the dialog. `alertdialog` is for a message that needs a response (confirm). */
+type NxeDialogRole = 'dialog' | 'alertdialog';
+/** The data a dialog was opened with, injected into the content component. */
+declare const NXE_DIALOG_DATA: InjectionToken<unknown>;
+/** A button in the dialog's actions bar, declared in the config rather than in the content. */
+interface NxeDialogAction<R = unknown> {
+    /** Button label. */
+    text: string;
+    /** Closes the dialog with this value when the button is pressed. */
+    result?: R;
+    /** `nxe-button` type. `danger` for the destructive choice. Default `normal`. */
+    type?: NxeButtonType;
+    stylingMode?: NxeButtonStylingMode;
+    disabled?: boolean;
+    /** Receives initial focus when the dialog opens. */
+    autofocus?: boolean;
+    /** Runs before closing. Return `false` to keep the dialog open (for example a failed save). */
+    onClick?: (ref: NxeDialogRef<R>) => void | boolean;
+}
+interface NxeDialogConfig<D = unknown, R = unknown> {
+    /** Heading, rendered as the dialog's accessible name. Omit it if the content declares `nxe-dialog-title`. */
+    title?: string;
+    /** Default `md`. */
+    size?: NxeDialogSize;
+    /** Injected into the content as {@link NXE_DIALOG_DATA}. */
+    data?: D;
+    /** Buttons for the actions bar. The content can declare `nxe-dialog-actions` itself instead. */
+    actions?: readonly NxeDialogAction<R>[];
+    /** Blocks Esc and backdrop dismissal. Change it later through {@link NxeDialogRef.disableClose} (for example while dirty). */
+    disableClose?: boolean;
+    /** Whether a click on the backdrop dismisses the dialog. Default `true`; only applies while `disableClose` is off. */
+    backdropClose?: boolean;
+    /** Accessible name when there is no visible title. Replaces `aria-labelledby`. */
+    ariaLabel?: string;
+    /** Id of the element that describes the dialog. */
+    ariaDescribedBy?: string;
+    /** Default `dialog`. */
+    role?: NxeDialogRole;
+    /** Show the corner close button. Default `true`. */
+    showClose?: boolean;
+    /** What takes initial focus: `first-tabbable` (default), `first-heading`, `dialog` or a CSS selector. `[cdkFocusInitial]` always wins. */
+    autoFocus?: 'first-tabbable' | 'first-heading' | 'dialog' | string;
+    /** Extra class(es) for the overlay pane. */
+    panelClass?: string | string[];
+    /** Where dependency lookups of the content start. Default: the root injector. */
+    injector?: Injector;
+    viewContainerRef?: ViewContainerRef;
+}
+/** What `NxeDialogService.open` accepts as content. A template receives `{ $implicit: data, dialogRef }`. */
+type NxeDialogContent<T> = ComponentType<T> | TemplateRef<T>;
+
+/**
+ * Opens modal dialogs.
+ *
+ * ```ts
+ * const ref = this.dialog.open(RejectInvoiceDialogComponent, {
+ *     title: 'Tolak faktur',
+ *     size: 'sm',
+ *     data: { invoiceId },
+ *     actions: [
+ *         { text: 'Batal', stylingMode: 'outlined', result: false },
+ *         { text: 'Tolak', type: 'danger', result: true },
+ *     ],
+ * });
+ * ref.afterClosed().subscribe((rejected) => rejected && this.reload());
+ * ```
+ *
+ * The content is a component (it injects `NXE_DIALOG_DATA` and `NxeDialogRef`) or a template (it
+ * receives `{ $implicit: data, dialogRef }`). Focus is trapped, starts on the first tabbable
+ * element (or `[cdkFocusInitial]`) and returns to the opener when the dialog closes. Esc and a
+ * backdrop click dismiss it unless `disableClose` is set; with dialogs stacked, Esc closes only
+ * the top one. The page behind does not scroll.
+ */
+declare class NxeDialogService {
+    private readonly cdk;
+    private sequence;
+    open<R = unknown, D = unknown, T = unknown>(content: NxeDialogContent<T>, config?: NxeDialogConfig<D, R>): NxeDialogRef<R, T>;
+    /** Closes every open dialog, with no result. */
+    closeAll(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeDialogService>;
+}
+
+interface NxeConfirmOptions {
+    /** The question, as a heading: name the object ("Batalkan PO-HWG-2610-0042?"). */
+    title: string;
+    /** What happens, and whether it can be undone. Line breaks are kept. */
+    message?: string;
+    /** Default: the localized "Confirm". Prefer the verb ("Batalkan PO"). */
+    confirmText?: string;
+    /** Default: the localized "Cancel". */
+    cancelText?: string;
+    /** Styles the confirm button as destructive and starts focus on Cancel. */
+    danger?: boolean;
+    /** Default `sm`. */
+    size?: NxeDialogSize;
+}
+/**
+ * Asks the user to confirm before something destructive or irreversible. Resolves `true` on
+ * confirm, `false` on cancel or Esc.
+ *
+ * ```ts
+ * const go = await this.confirm.confirm({
+ *     title: 'Batalkan PO-0042?',
+ *     message: 'PO ini tidak dapat dibuka kembali.',
+ *     confirmText: 'Batalkan PO',
+ *     danger: true,
+ * });
+ * ```
+ *
+ * It is an `alertdialog` described by the message. A backdrop click does not dismiss it, so an
+ * answer is always deliberate.
+ */
+declare class NxeConfirmService {
+    private readonly dialog;
+    private readonly messages;
+    confirm(options: NxeConfirmOptions): Promise<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeConfirmService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeConfirmService>;
+}
+
+/**
+ * Marks the dialog's heading. It takes the dialog's title id, so the dialog is named by it
+ * (`aria-labelledby`). Use it in content that declares its own chrome instead of passing `title`.
+ *
+ * ```html
+ * <h2 nxe-dialog-title>Tolak faktur</h2>
+ * ```
+ *
+ * A dialog has one title: the first one claims the id. Outside a dialog it only adds the class.
+ */
+declare class NxeDialogTitleDirective {
+    protected readonly id: string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDialogTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeDialogTitleDirective, "[nxe-dialog-title], [nxeDialogTitle]", never, {}, {}, never, never, true, never>;
+}
+
+/** The dialog's body: padded, and the part that scrolls (the title and actions stay in view). */
+declare class NxeDialogContentDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDialogContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeDialogContentDirective, "[nxe-dialog-content], [nxeDialogContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The dialog's button row, pinned to the bottom of the dialog. `align` is where the buttons sit
+ * (`end` by default, the primary action last).
+ *
+ * ```html
+ * <div nxe-dialog-actions>
+ *     <nxe-button text="Batal" (onClick)="ref.close()" />
+ *     <nxe-button type="default" text="Simpan" (onClick)="save()" />
+ * </div>
+ * ```
+ */
+declare class NxeDialogActionsDirective {
+    readonly align: _angular_core.InputSignal<"start" | "end" | "between">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDialogActionsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeDialogActionsDirective, "[nxe-dialog-actions], [nxeDialogActions]", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Opens an `nxe-menu` from the element it sits on.
+ *
+ * ```html
+ * <nxe-button icon="more" aria-label="Aksi" [nxeMenuTriggerFor]="menu" />
+ * <nxe-menu #menu>…</nxe-menu>
+ * ```
+ *
+ * The element gets `aria-haspopup="menu"`, `aria-expanded` and `aria-controls`. Click toggles;
+ * ArrowDown opens on the first item and ArrowUp on the last; Enter and Space open from hosts that
+ * are not buttons (`nxe-button`). The panel opens below the element and flips above (or aligns to
+ * the other edge) when there is no room. On an `nxe-menu-item` it opens a submenu to the side.
+ * Closing with Esc or by choosing an item returns focus to the element; clicking away does not.
+ */
+declare class NxeMenuTriggerForDirective implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainer;
+    private readonly element;
+    /** @internal The menu this trigger sits in, when it opens a submenu. */
+    readonly parentMenu: NxeMenuCloseTarget | null;
+    /** The menu to open. */
+    readonly menu: _angular_core.InputSignal<NxeMenuComponent>;
+    /** @internal Id of the trigger; the panel is labelled by it. */
+    readonly id: string;
+    private readonly openState;
+    /** Whether the menu is showing. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    private overlayRef;
+    /** Opens the menu and moves focus to its first (or last) item. No-op while open. */
+    open(focus?: 'first' | 'last' | 'none'): void;
+    /** Closes the menu. `restoreFocus` returns focus to the trigger element (Esc, or an item was chosen). */
+    close(restoreFocus?: boolean): void;
+    toggle(): void;
+    ngOnDestroy(): void;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private createOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeMenuTriggerForDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeMenuTriggerForDirective, "[nxeMenuTriggerFor]", ["nxeMenuTrigger"], { "menu": { "alias": "nxeMenuTriggerFor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * One action in an `nxe-menu`. Use it as an element (recommended, and the only way for apps that ban
+ * native buttons and `(click)` on non-interactive elements), or as an attribute on a
+ * `<button type="button">` or an `<a>`.
+ *
+ * ```html
+ * <nxe-menu-item (itemClick)="signOut()" [danger]="true">Sign out</nxe-menu-item>
+ * <nxe-menu-item routerLink="/profile">Profile</nxe-menu-item>
+ * <nxe-menu-item [nxeMenuTriggerFor]="more">Lainnya</nxe-menu-item>
+ *
+ * <!-- attribute form -->
+ * <button type="button" nxe-menu-item (click)="edit()">
+ *     <svg nxeMenuItemIcon viewBox="0 0 16 16">…</svg>
+ *     Ubah
+ * </button>
+ * <button type="button" nxe-menu-item danger (click)="remove()">Hapus</button>
+ * <button type="button" nxe-menu-item [nxeMenuTriggerFor]="more">Lainnya</button>
+ * ```
+ *
+ * `disabled` keeps the item visible but unreachable by arrow keys and ignored by clicks. `danger`
+ * colours a destructive item. `[nxeMenuItemIcon]` projects an icon before the label. An item with
+ * `[nxeMenuTriggerFor]` opens a submenu instead of closing the menu.
+ *
+ * The element form has `role="menuitem"`, a roving `tabindex`, Enter and Space activation, and
+ * `aria-disabled` when disabled. `itemClick` fires on every activation (pointer, Enter, Space) of an
+ * enabled item, and never on a disabled one; the attribute form emits it too.
+ */
+declare class NxeMenuItemComponent implements FocusableOption {
+    private readonly element;
+    /** @internal The menu this item sits in. */
+    readonly menu: NxeMenuComponent | null;
+    /** @internal Set when the item opens a submenu. */
+    readonly trigger: NxeMenuTriggerForDirective | null;
+    protected readonly isButton: boolean;
+    /** Buttons and links turn Enter (and, for a button, Space) into a click themselves. */
+    private readonly isNative;
+    /** Shown but not actionable. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Destructive action: coloured with the danger status. */
+    readonly danger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits when an enabled item is activated, before the menu closes. */
+    readonly itemClick: _angular_core.OutputEmitterRef<void>;
+    /** `FocusableOption`: the key manager skips disabled items. */
+    get disabled(): boolean;
+    focus(): void;
+    /** Typeahead matches the start of this. */
+    getLabel(): string;
+    protected onClick(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeMenuItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeMenuItemComponent, "nxe-menu-item, [nxe-menu-item]", never, { "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "danger": { "alias": "danger"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[nxeMenuItemIcon]", "*"], true, never>;
+}
+
+/**
+ * `nxe-menu` is the list of actions a trigger opens. It draws nothing where it is declared; the
+ * panel appears in a CDK overlay when a `[nxeMenuTriggerFor]` element opens it.
+ *
+ * ```html
+ * <nxe-button icon="more" aria-label="Aksi baris" [nxeMenuTriggerFor]="rowMenu" />
+ *
+ * <nxe-menu #rowMenu>
+ *     <button type="button" nxe-menu-item (click)="edit(row)">Ubah</button>
+ *     <button type="button" nxe-menu-item [disabled]="!row.canCopy" (click)="copy(row)">Salin</button>
+ *     <nxe-menu-divider />
+ *     <button type="button" nxe-menu-item danger (click)="remove(row)">Hapus</button>
+ * </nxe-menu>
+ * ```
+ *
+ * It follows the ARIA menu pattern. The panel is `role="menu"` and each item `role="menuitem"`;
+ * ArrowUp, ArrowDown, Home, End and typing a letter move between items (skipping disabled ones),
+ * Enter and Space choose, Esc closes and returns focus to the trigger, and Tab closes and carries on
+ * to the next control. An item inside a menu that has its own `[nxeMenuTriggerFor]` opens a submenu
+ * with ArrowRight (ArrowLeft or Esc closes it).
+ *
+ * The menu provides `NXE_MENU`, so `nxe-list` rows and `nxe-menu-item`s close it when chosen.
+ */
+declare class NxeMenuComponent implements NxeMenuCloseTarget {
+    private readonly injector;
+    /** Accessible name. Defaults to the trigger's. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Extra class(es) for the overlay pane. */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    /** @internal Id of the panel; the trigger's `aria-controls`. */
+    readonly panelId: string;
+    /** @internal */
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    private readonly descendantItems;
+    /** Only this menu's own items: a submenu declared inside this one brings its own. */
+    private readonly items;
+    /** @internal The trigger currently showing this menu. */
+    trigger: NxeMenuTriggerForDirective | null;
+    private keyManager;
+    /** @internal `aria-labelledby` of the panel: the trigger, unless an explicit label is given. */
+    labelledBy(): string | null;
+    /** Closes the menu (and any menu it was opened from). Called by items and `nxe-list` when chosen. */
+    closeMenu(): void;
+    /** @internal Called by the trigger once the panel is attached. */
+    _opened(focus: 'first' | 'last' | 'none'): void;
+    /** @internal Called by the trigger when the panel is detached. */
+    _closed(): void;
+    /** @internal Moves the active item under the pointer, and closes a sibling's submenu. */
+    _hovered(item: NxeMenuItemComponent): void;
+    private closeSubmenus;
+    /** @internal */
+    protected onKeydown(event: KeyboardEvent): void;
+    private closeChain;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeMenuComponent, "nxe-menu", ["nxeMenu"], { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, {}, ["descendantItems"], ["*"], true, never>;
+}
+
+/** A rule between groups of items in an `nxe-menu`. */
+declare class NxeMenuDividerComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeMenuDividerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeMenuDividerComponent, "nxe-menu-divider", never, {}, {}, never, never, true, never>;
+}
+
+/** The side of the trigger an overlay prefers. `start` and `end` follow the writing direction. */
+type NxePlacement = 'top' | 'bottom' | 'start' | 'end';
+
+/**
+ * Opens an `nxe-popover` from the element it sits on.
+ *
+ * ```html
+ * <nxe-button icon="filter" text="Filter" [nxePopoverTriggerFor]="filters" />
+ * <nxe-popover #filters heading="Filter PO">…</nxe-popover>
+ * ```
+ *
+ * The element gets `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`. Click toggles;
+ * Enter and Space do from hosts that are not buttons (`nxe-button`). The panel opens on the
+ * popover's `position` (below by default) and flips when there is no room. Opening moves focus to
+ * the first focusable control in the content, else the close button; Esc closes and returns focus
+ * to the element; a click outside the panel and the element closes it and leaves focus where the
+ * click went.
+ */
+declare class NxePopoverTriggerForDirective implements OnDestroy {
+    private readonly overlay;
+    private readonly viewContainer;
+    private readonly injector;
+    private readonly element;
+    /** The popover to open. */
+    readonly popover: _angular_core.InputSignal<NxePopoverComponent>;
+    /** @internal Id of the trigger; the panel is labelled by it when it has no heading or label. */
+    readonly id: string;
+    private readonly openState;
+    /** Whether the popover is showing. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    private overlayRef;
+    /** Opens the popover and moves focus into it. No-op while open. */
+    open(): void;
+    /** Closes the popover. `restoreFocus` returns focus to the element (Esc, Tab off an end, the close button). */
+    close(restoreFocus?: boolean): void;
+    toggle(): void;
+    ngOnDestroy(): void;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    /** The first control in the content, else the close button; nothing when the panel has neither. */
+    private focusInto;
+    private createOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxePopoverTriggerForDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxePopoverTriggerForDirective, "[nxePopoverTriggerFor]", ["nxePopoverTrigger"], { "popover": { "alias": "nxePopoverTriggerFor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Which side of the trigger the popover prefers. It flips to the opposite side when there is no room. */
+type NxePopoverPosition = NxePlacement;
+/**
+ * `nxe-popover` is a small panel of content a trigger opens: a filter form, a help text, a few
+ * details. It draws nothing where it is declared; the panel appears in a CDK overlay when a
+ * `[nxePopoverTriggerFor]` element opens it.
+ *
+ * ```html
+ * <nxe-button icon="filter" text="Filter" [nxePopoverTriggerFor]="filters" />
+ *
+ * <nxe-popover #filters heading="Filter PO" closable>
+ *     <nxe-form-field label="Pemasok"><nxe-text-box /></nxe-form-field>
+ *     <nxe-button text="Terapkan" (onClick)="apply(); filters.close()" />
+ * </nxe-popover>
+ * ```
+ *
+ * It is a non-modal dialog: `role="dialog"` named by its heading (else `aria-label`, else the
+ * trigger), and the page behind it stays usable. Click on the trigger toggles it. Focus moves to the
+ * first focusable control in the content when there is one (else the close button, else it stays on
+ * the trigger). Esc closes and returns focus to the trigger; so does Tab off either end. Clicking
+ * outside closes it and leaves focus where the click went.
+ */
+declare class NxePopoverComponent {
+    protected readonly messages: NxeMessageService;
+    /** A title for the panel; it names the dialog. */
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    /** Draws a close button in the header. */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name when there is no `heading`. Without either, the trigger names the panel. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Preferred side of the trigger. */
+    readonly position: _angular_core.InputSignal<NxePlacement>;
+    /** Extra class(es) for the overlay pane. */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    /** Emits when the panel opens. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the panel closes, however it was closed. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly sequence;
+    /** @internal Id of the panel; the trigger's `aria-controls`. */
+    readonly panelId: string;
+    /** @internal */
+    protected readonly headingId: string;
+    /** @internal */
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    /** @internal The trigger currently showing this popover. */
+    trigger: NxePopoverTriggerForDirective | null;
+    /** Whether the panel is showing. */
+    isOpen(): boolean;
+    /** Closes the panel and returns focus to its trigger. No-op while closed. */
+    close(): void;
+    /** @internal `aria-labelledby` of the panel: the heading, else the trigger unless an explicit label is given. */
+    labelledBy(): string | null;
+    /** @internal Tab off either end closes the panel, as a menu does, so focus is never stranded in an overlay at the end of the page. */
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxePopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxePopoverComponent, "nxe-popover", ["nxePopover"], { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+/** Which side of the element the tooltip prefers. It flips to the opposite side when there is no room. */
+type NxeTooltipPosition = NxePlacement;
+/**
+ * Adds a short text tooltip to the element it sits on.
+ *
+ * ```html
+ * <nxe-button icon="edit" stylingMode="text" aria-label="Ubah" nxeTooltip="Ubah PO-0042" />
+ * <button type="button" nxeTooltip="Salin ke papan klip" nxeTooltipPosition="bottom">Salin</button>
+ * ```
+ *
+ * It shows after `nxeTooltipShowDelay` (500ms) when the pointer rests on the element, and at once when
+ * the element takes focus from the keyboard. It hides on Esc (first, before a dialog or menu under it
+ * sees the key), when focus leaves, when the pointer leaves for longer than `nxeTooltipHideDelay`
+ * (100ms, long enough to move onto the tooltip itself, so a reader can keep it open), and when the
+ * element is pressed. Touch does not show it: there is no long-press.
+ *
+ * The text is also the element's description. While hidden, it is a visually hidden description the
+ * element points at through `aria-describedby`, so a screen reader reads it on focus; while shown,
+ * `aria-describedby` points at the `role="tooltip"` element instead. The element's own name is never
+ * touched: an icon-only `nxe-button` keeps its `aria-label`, and the tooltip adds to it.
+ */
+declare class NxeTooltipDirective implements OnDestroy {
+    private readonly overlay;
+    private readonly element;
+    private readonly ariaDescriber;
+    private readonly renderer;
+    private readonly focusMonitor;
+    /** The tooltip text. Empty, or a `nxeTooltipDisabled` element, shows nothing. */
+    readonly text: _angular_core.InputSignal<string | null | undefined>;
+    /** Preferred side. `start` and `end` follow the writing direction. */
+    readonly position: _angular_core.InputSignal<NxePlacement>;
+    /** Milliseconds the pointer rests before the tooltip shows. Focus from the keyboard ignores it. */
+    readonly showDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Milliseconds between the pointer leaving and the tooltip hiding. */
+    readonly hideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly message;
+    private readonly visibleState;
+    /** Whether the tooltip is showing. */
+    readonly isVisible: _angular_core.Signal<boolean>;
+    /** Id of the `role="tooltip"` element while it exists. */
+    readonly id: string;
+    private overlayRef;
+    private panel;
+    private showTimer;
+    private hideTimer;
+    private described;
+    private readonly unlisten;
+    constructor();
+    /** Shows the tooltip after `delay` milliseconds. No-op without text. */
+    show(delay?: number): void;
+    /** Hides the tooltip after `delay` milliseconds. */
+    hide(delay?: number): void;
+    ngOnDestroy(): void;
+    protected onPointerEnter(event: PointerEvent): void;
+    protected onPointerLeave(event: PointerEvent): void;
+    private attach;
+    private detach;
+    private createOverlay;
+    private positionStrategy;
+    private messageChanged;
+    /** The hidden description a screen reader reads on focus while no tooltip is showing. */
+    private describe;
+    private addDescribedBy;
+    private removeDescribedBy;
+    private describedByIds;
+    private clearTimers;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NxeTooltipDirective, "[nxeTooltip]", ["nxeTooltip"], { "text": { "alias": "nxeTooltip"; "required": false; "isSignal": true; }; "position": { "alias": "nxeTooltipPosition"; "required": false; "isSignal": true; }; "showDelay": { "alias": "nxeTooltipShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "nxeTooltipHideDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "nxeTooltipDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Which edge the drawer sits on. `start` and `end` follow the writing direction: `end` is the right in LTR and the left in RTL. */
+type NxeDrawerSide = 'start' | 'end';
+/**
+ * `overlay`: a modal panel over the page, with a scrim, a focus trap and Esc. `push`: a non-modal panel in
+ * the page's own layout that takes its width from the content beside it.
+ */
+type NxeDrawerMode = 'overlay' | 'push';
+/** Drawer width. `sm` 320px, `md` 420px (default), `lg` 560px, `xl` 760px, `full` the viewport. Never wider than the viewport. */
+type NxeDrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** The data a drawer was opened with, injected into the content component. */
+declare const NXE_DRAWER_DATA: InjectionToken<unknown>;
+/**
+ * What `NxeDrawerService.open` takes. The dialog's options, minus its `size` and `role`, plus the edge. The drawer is
+ * modal: `title` names it, `actions` fill the footer, Esc and the scrim dismiss it unless `disableClose`.
+ */
+interface NxeDrawerConfig<D = unknown, R = unknown> extends Omit<NxeDialogConfig<D, R>, 'size' | 'role'> {
+    /** Edge of the screen. Default `end`. */
+    side?: NxeDrawerSide;
+    /** Default `md`. */
+    size?: NxeDrawerSize;
+}
+/** What `NxeDrawerService.open` accepts as content. A template receives `{ $implicit: data, dialogRef }`. */
+type NxeDrawerContent<T> = ComponentType<T> | TemplateRef<T>;
+
+/**
+ * Handle on an open drawer: the dialog's ref (`close(result)`, `afterClosed()`, `whenClosed()`, `result`,
+ * `isClosed`, `disableClose`, `componentInstance`), injectable in the content as `inject(NxeDrawerRef)` and
+ * returned by `NxeDrawerService.open`. It is also provided as `NxeDialogRef`, so the dialog directives
+ * (`nxe-dialog-title`, `nxe-dialog-content`, `nxe-dialog-actions`) work inside a drawer.
+ */
+declare class NxeDrawerRef<R = unknown, C = unknown> extends NxeDialogRef<R, C> {
+}
+
+/**
+ * Opens modal drawers: a panel that slides in from the screen edge over the page, for a filter panel or a
+ * quick look at a document that should not leave the list.
+ *
+ * ```ts
+ * const ref = this.drawer.open(PoQuickViewComponent, {
+ *     title: 'PO-2026-0412',
+ *     size: 'lg',
+ *     data: { id: 412 },
+ *     actions: [{ text: 'Buka halaman penuh', type: 'default', result: 'open' }],
+ * });
+ * ref.afterClosed().subscribe((result) => result === 'open' && this.router.navigate(['/pos', 412]));
+ * ```
+ *
+ * It is the dialog service with a different shape, and uses the same parts. The content is a component (it
+ * injects `NXE_DRAWER_DATA` and `NxeDrawerRef`, or the dialog's `NXE_DIALOG_DATA` and `NxeDialogRef`) or a
+ * template (it receives `{ $implicit: data, dialogRef }`). Focus is trapped, starts on the first tabbable
+ * element (or `[cdkFocusInitial]`) and returns to the opener on close; Esc and a click on the scrim dismiss it
+ * unless `disableClose` is set; the page behind does not scroll. `side` is `end` by default and follows the
+ * writing direction. It slides in over 0.22s, and not under `prefers-reduced-motion: reduce`.
+ *
+ * For a panel that is part of the page and does not block it, use `nxe-drawer` with `mode="push"`.
+ */
+declare class NxeDrawerService {
+    private readonly cdk;
+    private readonly overlay;
+    private sequence;
+    open<R = unknown, D = unknown, T = unknown>(content: NxeDrawerContent<T>, config?: NxeDrawerConfig<D, R>): NxeDrawerRef<R, T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDrawerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NxeDrawerService>;
+}
+
+/**
+ * `nxe-drawer` is a panel at the edge of the screen: a filter panel, the details of the row you clicked.
+ *
+ * ```html
+ * <nxe-button text="Filter" (onClick)="filters.set(true)" />
+ *
+ * <nxe-drawer [(opened)]="filters" heading="Filter pesanan" side="end" size="sm">
+ *     <nxe-form-field label="Pemasok"><nxe-text-box [formControl]="supplier" /></nxe-form-field>
+ *     <div nxeDrawerFooter>
+ *         <nxe-button text="Atur ulang" (onClick)="reset()" />
+ *         <nxe-button type="default" text="Terapkan" (onClick)="apply(); filters.set(false)" />
+ *     </div>
+ * </nxe-drawer>
+ * ```
+ *
+ * **Modes.** `overlay` (default) is modal: the panel opens in a CDK overlay over a scrim, `role="dialog"` with
+ * `aria-modal`, focus trapped and starting on the first tabbable element (`[cdkFocusInitial]` wins; `autoFocus`
+ * changes it), Esc and a click on the scrim close it, focus returns to the control that was focused when it
+ * opened, and the page behind does not scroll. `push` is not modal: the panel is an `<aside>` in the page's
+ * own layout, a flex item that opens by growing from no width, so the content beside it narrows instead of
+ * being covered. Put it inside a flex row. It takes focus when it opens and gives it back when it closes,
+ * and Esc inside it closes it. Changing `mode` while open (a panel that is a push drawer on a desktop and an
+ * overlay on a phone) moves the same content from one to the other.
+ *
+ * **Slots.** The heading is the `heading` input (the panel's accessible name; without one, set `aria-label`).
+ * The close button, named by `common.close`, shows with `closable` (default) unless `disableClose` is on. Everything else is the body,
+ * which scrolls, and `[nxeDrawerFooter]` is pinned under it.
+ *
+ * `opened` is a two-way model. `side` is `start` or `end` and follows the writing direction, `size` is `sm`,
+ * `md` (default), `lg`, `xl` or `full`. `disableClose` stops Esc and the scrim from closing it and hides the
+ * close button (a form that must be saved or discarded). For a drawer opened from code with a component, use
+ * `NxeDrawerService`.
+ */
+declare class NxeDrawerComponent {
+    private readonly dialog;
+    private readonly overlay;
+    private readonly viewContainer;
+    private readonly injector;
+    private readonly messages;
+    private readonly panel;
+    private readonly aside;
+    /** Whether the drawer is open. Two-way: `[(opened)]`. */
+    readonly opened: _angular_core.ModelSignal<boolean>;
+    /** `overlay` (default, modal) or `push` (in the page's layout). */
+    readonly mode: _angular_core.InputSignal<NxeDrawerMode>;
+    /** `start` or `end` (default). */
+    readonly side: _angular_core.InputSignal<NxeDrawerSide>;
+    /** `sm`, `md` (default), `lg`, `xl` or `full`. */
+    readonly size: _angular_core.InputSignal<NxeDrawerSize>;
+    /** The title, which also names the panel. */
+    readonly heading: _angular_core.InputSignal<string>;
+    /** Accessible name when there is no `heading`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Show the close button. Default `true`. */
+    readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Esc and the scrim do not close it, and the close button is hidden. */
+    readonly disableClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether a click on the scrim closes an overlay drawer. Default `true`; only applies while `disableClose` is off. */
+    readonly backdropClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** What takes initial focus in overlay mode: `first-tabbable` (default), `first-heading`, `dialog` or a CSS selector. */
+    readonly autoFocus: _angular_core.InputSignal<string>;
+    /** Extra class(es) for the overlay pane. */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    private readonly uid;
+    protected readonly titleId: string;
+    protected readonly closeLabel: _angular_core.Signal<string>;
+    protected readonly pushed: _angular_core.Signal<boolean>;
+    /** The close button is hidden, not disabled, while `disableClose` is on. */
+    protected readonly showClose: _angular_core.Signal<boolean>;
+    /** Modal and open: the part that lives in the CDK overlay. */
+    private readonly overlayShown;
+    private overlayRef;
+    private returnFocusTo;
+    constructor();
+    open(): void;
+    close(): void;
+    toggle(): void;
+    /** The close button and Esc go through here so `disableClose` is honoured in one place. */
+    protected requestClose(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private attachOverlay;
+    private detachOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NxeDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NxeDrawerComponent, "nxe-drawer", ["nxeDrawer"], { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "backdropClose": { "alias": "backdropClose"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; }, never, ["*", "[nxeDrawerFooter]"], true, never>;
+}
+
+export { NXE_DIALOG_DATA, NXE_DRAWER_DATA, NxeConfirmService, NxeDialogActionsDirective, NxeDialogContentDirective, NxeDialogRef, NxeDialogService, NxeDialogTitleDirective, NxeDrawerComponent, NxeDrawerRef, NxeDrawerService, NxeMenuComponent, NxeMenuDividerComponent, NxeMenuItemComponent, NxeMenuTriggerForDirective, NxePopoverComponent, NxePopoverTriggerForDirective, NxeTooltipDirective };
+export type { NxeConfirmOptions, NxeDialogAction, NxeDialogConfig, NxeDialogContent, NxeDialogRole, NxeDialogSize, NxeDrawerConfig, NxeDrawerContent, NxeDrawerMode, NxeDrawerSide, NxeDrawerSize, NxePopoverPosition, NxeTooltipPosition };