@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-overlay.mjs

@@ -0,0 +1,1671 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, input, Directive, inject, viewChild, Injector, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, ViewContainerRef, ElementRef, booleanAttribute, output, contentChildren, computed, afterNextRender, Renderer2, numberAttribute, DestroyRef, model } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { nxePane } from '@nexterajs/ui/styling';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { NxeMessageService } from '@nexterajs/ui/core';
+import { NxeButtonComponent } from '@nexterajs/ui/forms';
+import { FocusKeyManager, AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
+import { NXE_MENU } from '@nexterajs/ui/dropdowns';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+
+/** The data a dialog was opened with, injected into the content component. */
+const NXE_DIALOG_DATA = new InjectionToken('NXE_DIALOG_DATA');
+
+/**
+ * Handle on an open dialog. Injectable in the content component (`inject(NxeDialogRef)`), and
+ * returned by `NxeDialogService.open`.
+ */
+class NxeDialogRef {
+    id;
+    titleId;
+    cdkRef = null;
+    outlet = null;
+    pendingClose = null;
+    titleClaimed = false;
+    closedSubject = new ReplaySubject(1);
+    resultSignal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultSignal" }] : /* istanbul ignore next */ []));
+    closedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closedSignal" }] : /* istanbul ignore next */ []));
+    dismissable = true;
+    /** The result the dialog closed with; `undefined` until it closes (and if it closed without one). */
+    result = this.resultSignal.asReadonly();
+    /** `true` once the dialog has closed. */
+    isClosed = this.closedSignal.asReadonly();
+    constructor(
+    /** Unique id; the dialog's DOM id. */
+    id, 
+    /** Id the dialog's title element takes, and the dialog's `aria-labelledby`. */
+    titleId) {
+        this.id = id;
+        this.titleId = titleId;
+    }
+    /** Whether Esc and the backdrop may dismiss the dialog. Set `true` while the form is dirty. Explicit `close()` still works. */
+    get disableClose() {
+        return !this.dismissable;
+    }
+    set disableClose(value) {
+        this.dismissable = !value;
+    }
+    /** The content component instance; `null` for a template, or before it is created. */
+    get componentInstance() {
+        return this.outlet?.() ?? null;
+    }
+    /** Close with a result. Safe to call more than once. */
+    close(result) {
+        if (this.closedSignal()) {
+            return;
+        }
+        if (!this.cdkRef) {
+            this.pendingClose = { result };
+            return;
+        }
+        this.cdkRef.close(result);
+    }
+    /** Emits the result once, when the dialog closes, then completes. Late subscribers still get it. */
+    afterClosed() {
+        return this.closedSubject.asObservable();
+    }
+    /** The same as {@link afterClosed}, as a promise. */
+    whenClosed() {
+        return new Promise((resolve) => this.closedSubject.subscribe({ next: resolve, complete: () => resolve(undefined) }));
+    }
+    /** @internal Claimed by the first `nxe-dialog-title` in the dialog, which then carries {@link titleId}. */
+    _claimTitle() {
+        if (this.titleClaimed) {
+            return null;
+        }
+        this.titleClaimed = true;
+        return this.titleId;
+    }
+    /** @internal */
+    _attach(cdkRef) {
+        this.cdkRef = cdkRef;
+        cdkRef.closed.subscribe((result) => {
+            this.resultSignal.set(result);
+            this.closedSignal.set(true);
+            this.closedSubject.next(result);
+            this.closedSubject.complete();
+        });
+        if (this.pendingClose) {
+            const { result } = this.pendingClose;
+            this.pendingClose = null;
+            cdkRef.close(result);
+        }
+    }
+    /** @internal */
+    _setOutlet(outlet) {
+        this.outlet = outlet;
+    }
+}
+
+/**
+ * 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>
+ * ```
+ */
+class NxeDialogActionsDirective {
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeDialogActionsDirective, isStandalone: true, selector: "[nxe-dialog-actions], [nxeDialogActions]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.nxe-dialog-actions-start": "align() === 'start'", "class.nxe-dialog-actions-between": "align() === 'between'" }, classAttribute: "nxe-dialog-actions" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxe-dialog-actions], [nxeDialogActions]',
+                    host: {
+                        class: 'nxe-dialog-actions',
+                        '[class.nxe-dialog-actions-start]': "align() === 'start'",
+                        '[class.nxe-dialog-actions-between]': "align() === 'between'",
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class NxeDialogTitleDirective {
+    id = inject(NxeDialogRef, { optional: true })?._claimTitle() ?? null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeDialogTitleDirective, isStandalone: true, selector: "[nxe-dialog-title], [nxeDialogTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "nxe-dialog-title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxe-dialog-title], [nxeDialogTitle]',
+                    host: {
+                        class: 'nxe-dialog-title',
+                        '[attr.id]': 'id',
+                    },
+                }]
+        }] });
+
+/**
+ * The inside of every dialog: optional title, the scrolling body that hosts the content, optional
+ * actions bar and the corner close button. @internal
+ */
+class NxeDialogFrameComponent {
+    frame = inject(DIALOG_DATA);
+    messages = inject(NxeMessageService);
+    outlet = viewChild(NgComponentOutlet, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outlet" }] : /* istanbul ignore next */ []));
+    /** Both kinds of content look up the ref and the data here. */
+    contentInjector = Injector.create({
+        providers: [
+            { provide: NxeDialogRef, useValue: this.frame.ref },
+            { provide: NXE_DIALOG_DATA, useValue: this.frame.data },
+            ...(this.frame.providers ?? []),
+        ],
+        parent: this.frame.injector ?? inject(Injector),
+    });
+    template = this.frame.content instanceof TemplateRef ? this.frame.content : null;
+    component = this.template ? null : this.frame.content;
+    templateContext = { $implicit: this.frame.data, dialogRef: this.frame.ref };
+    constructor() {
+        this.frame.ref._setOutlet(() => this.outlet()?.componentInstance ?? null);
+    }
+    run(action) {
+        if (action.disabled) {
+            return;
+        }
+        if (action.onClick?.(this.frame.ref) === false) {
+            return;
+        }
+        this.frame.ref.close(action.result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDialogFrameComponent, isStandalone: true, selector: "nxe-dialog-frame", host: { classAttribute: "nxe-dialog-frame nxe-widget" }, providers: [{ provide: NxeDialogRef, useFactory: () => inject(DIALOG_DATA).ref }], viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "@if (frame.title) {\r\n    <header class=\"nxe-dialog-header\">\r\n        <h2 nxe-dialog-title>{{ frame.title }}</h2>\r\n    </header>\r\n}\r\n<div class=\"nxe-dialog-body\">\r\n    @if (template) {\r\n        <ng-container *ngTemplateOutlet=\"template; context: templateContext; injector: contentInjector\" />\r\n    } @else {\r\n        <ng-container *ngComponentOutlet=\"component; injector: contentInjector\" />\r\n    }\r\n</div>\r\n@if (frame.actions.length) {\r\n    <div nxe-dialog-actions>\r\n        @for (action of frame.actions; track $index) {\r\n            <nxe-button\r\n                [text]=\"action.text\"\r\n                [type]=\"action.type ?? 'normal'\"\r\n                [stylingMode]=\"action.stylingMode ?? 'contained'\"\r\n                [disabled]=\"!!action.disabled\"\r\n                [attr.cdkFocusInitial]=\"action.autofocus ? '' : null\"\r\n                (onClick)=\"run(action)\" />\r\n        }\r\n    </div>\r\n}\r\n@if (frame.showClose) {\r\n    <button type=\"button\" class=\"nxe-dialog-close\" [attr.aria-label]=\"messages.t('common.close')\" (click)=\"frame.ref.close()\">\r\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n            <path d=\"M3.5 3.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\r\n        </svg>\r\n    </button>\r\n}\r\n", styles: [".cdk-overlay-pane.nxe-dialog-pane{box-sizing:border-box;max-width:calc(100vw - var(--nxe-ui-space-4) * 2);max-height:calc(100vh - var(--nxe-ui-space-4) * 2);max-height:calc(100dvh - var(--nxe-ui-space-4) * 2)}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-sm{width:400px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-md{width:640px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-lg{width:960px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-xl{width:1200px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-fullscreen .cdk-dialog-container{border-radius:0}.cdk-overlay-pane.nxe-dialog-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;max-height:inherit;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-lg);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-backdrop.nxe-dialog-backdrop{background:color-mix(in srgb,var(--nxe-ui-toast-bg) 45%,transparent)}nxe-dialog-frame.nxe-dialog-frame{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-header{flex:none;padding:var(--nxe-ui-space-4) var(--nxe-ui-space-8) var(--nxe-ui-space-2) var(--nxe-ui-space-4)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close{position:absolute;top:var(--nxe-ui-space-2);right:var(--nxe-ui-space-2);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-neutral-600);cursor:pointer}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close svg{width:14px;height:14px}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close:hover{background:var(--nxe-ui-surface-alt);color:var(--nxe-ui-text)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}.nxe-dialog-title{margin:0;font-size:var(--nxe-ui-font-size-xl);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xl);color:var(--nxe-ui-text)}.nxe-dialog-body>.nxe-dialog-title,.nxe-dialog-body .nxe-dialog-title:is(h1,h2,h3){padding:var(--nxe-ui-space-4) var(--nxe-ui-space-8) var(--nxe-ui-space-2) var(--nxe-ui-space-4)}.nxe-dialog-content{display:block;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4) var(--nxe-ui-space-4)}.nxe-dialog-actions{--nxe-ui-button-bg-danger: var(--nxe-ui-status-danger-fg);position:sticky;bottom:0;z-index:2;display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border-top:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface)}.nxe-dialog-actions.nxe-dialog-actions-start{justify-content:flex-start}.nxe-dialog-actions.nxe-dialog-actions-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxeButtonComponent, selector: "nxe-button", inputs: ["text", "type", "stylingMode", "size", "loading", "block", "disabled", "validationGroup", "focusStateEnabled", "icon", "height", "width"], outputs: ["onClick"] }, { kind: "directive", type: NxeDialogTitleDirective, selector: "[nxe-dialog-title], [nxeDialogTitle]" }, { kind: "directive", type: NxeDialogActionsDirective, selector: "[nxe-dialog-actions], [nxeDialogActions]", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-dialog-frame', imports: [NgComponentOutlet, NgTemplateOutlet, NxeButtonComponent, NxeDialogTitleDirective, NxeDialogActionsDirective], host: { class: 'nxe-dialog-frame nxe-widget' }, providers: [{ provide: NxeDialogRef, useFactory: () => inject(DIALOG_DATA).ref }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (frame.title) {\r\n    <header class=\"nxe-dialog-header\">\r\n        <h2 nxe-dialog-title>{{ frame.title }}</h2>\r\n    </header>\r\n}\r\n<div class=\"nxe-dialog-body\">\r\n    @if (template) {\r\n        <ng-container *ngTemplateOutlet=\"template; context: templateContext; injector: contentInjector\" />\r\n    } @else {\r\n        <ng-container *ngComponentOutlet=\"component; injector: contentInjector\" />\r\n    }\r\n</div>\r\n@if (frame.actions.length) {\r\n    <div nxe-dialog-actions>\r\n        @for (action of frame.actions; track $index) {\r\n            <nxe-button\r\n                [text]=\"action.text\"\r\n                [type]=\"action.type ?? 'normal'\"\r\n                [stylingMode]=\"action.stylingMode ?? 'contained'\"\r\n                [disabled]=\"!!action.disabled\"\r\n                [attr.cdkFocusInitial]=\"action.autofocus ? '' : null\"\r\n                (onClick)=\"run(action)\" />\r\n        }\r\n    </div>\r\n}\r\n@if (frame.showClose) {\r\n    <button type=\"button\" class=\"nxe-dialog-close\" [attr.aria-label]=\"messages.t('common.close')\" (click)=\"frame.ref.close()\">\r\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n            <path d=\"M3.5 3.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\r\n        </svg>\r\n    </button>\r\n}\r\n", styles: [".cdk-overlay-pane.nxe-dialog-pane{box-sizing:border-box;max-width:calc(100vw - var(--nxe-ui-space-4) * 2);max-height:calc(100vh - var(--nxe-ui-space-4) * 2);max-height:calc(100dvh - var(--nxe-ui-space-4) * 2)}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-sm{width:400px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-md{width:640px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-lg{width:960px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-xl{width:1200px}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh}.cdk-overlay-pane.nxe-dialog-pane.nxe-dialog-fullscreen .cdk-dialog-container{border-radius:0}.cdk-overlay-pane.nxe-dialog-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;max-height:inherit;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-lg);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-backdrop.nxe-dialog-backdrop{background:color-mix(in srgb,var(--nxe-ui-toast-bg) 45%,transparent)}nxe-dialog-frame.nxe-dialog-frame{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-header{flex:none;padding:var(--nxe-ui-space-4) var(--nxe-ui-space-8) var(--nxe-ui-space-2) var(--nxe-ui-space-4)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close{position:absolute;top:var(--nxe-ui-space-2);right:var(--nxe-ui-space-2);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-neutral-600);cursor:pointer}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close svg{width:14px;height:14px}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close:hover{background:var(--nxe-ui-surface-alt);color:var(--nxe-ui-text)}nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}.nxe-dialog-title{margin:0;font-size:var(--nxe-ui-font-size-xl);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xl);color:var(--nxe-ui-text)}.nxe-dialog-body>.nxe-dialog-title,.nxe-dialog-body .nxe-dialog-title:is(h1,h2,h3){padding:var(--nxe-ui-space-4) var(--nxe-ui-space-8) var(--nxe-ui-space-2) var(--nxe-ui-space-4)}.nxe-dialog-content{display:block;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4) var(--nxe-ui-space-4)}.nxe-dialog-actions{--nxe-ui-button-bg-danger: var(--nxe-ui-status-danger-fg);position:sticky;bottom:0;z-index:2;display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border-top:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface)}.nxe-dialog-actions.nxe-dialog-actions-start{justify-content:flex-start}.nxe-dialog-actions.nxe-dialog-actions-between{justify-content:space-between}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { outlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgComponentOutlet), { isSignal: true }] }] } });
+
+/**
+ * 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.
+ */
+class NxeDialogService {
+    cdk = inject(Dialog);
+    sequence = 0;
+    open(content, config = {}) {
+        const id = `nxe-dialog-${++this.sequence}`;
+        const ref = new NxeDialogRef(id, `${id}-title`);
+        ref.disableClose = !!config.disableClose;
+        const frame = {
+            ref: ref,
+            content: content,
+            data: config.data,
+            title: config.title,
+            actions: (config.actions ?? []),
+            showClose: config.showClose ?? true,
+            injector: config.injector,
+        };
+        const cdkRef = this.cdk.open(NxeDialogFrameComponent, {
+            id,
+            role: config.role ?? 'dialog',
+            ariaModal: true,
+            ariaLabel: config.ariaLabel ?? null,
+            ariaLabelledBy: config.ariaLabel ? null : ref.titleId,
+            ariaDescribedBy: config.ariaDescribedBy ?? null,
+            autoFocus: config.autoFocus ?? 'first-tabbable',
+            restoreFocus: true,
+            hasBackdrop: true,
+            backdropClass: 'nxe-dialog-backdrop',
+            panelClass: nxePane('nxe-dialog-pane', `nxe-dialog-${config.size ?? 'md'}`, ...[config.panelClass ?? []].flat()),
+            viewContainerRef: config.viewContainerRef,
+            // Dismissal is decided below, so Esc and the backdrop can follow different policies and
+            // `ref.disableClose` can change while the dialog is open.
+            disableClose: true,
+            data: frame,
+        });
+        ref._attach(cdkRef);
+        // The overlay keyboard dispatcher only delivers a key to the topmost overlay, so with dialogs
+        // stacked (or a menu open above one) Esc reaches exactly one of them.
+        cdkRef.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape' && !ref.disableClose && !hasModifierKey(event)) {
+                event.preventDefault();
+                ref.close();
+            }
+        });
+        cdkRef.backdropClick.subscribe(() => {
+            if (!ref.disableClose && config.backdropClose !== false) {
+                ref.close();
+            }
+        });
+        return ref;
+    }
+    /** Closes every open dialog, with no result. */
+    closeAll() {
+        this.cdk.closeAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** The dialog's body: padded, and the part that scrolls (the title and actions stay in view). */
+class NxeDialogContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.5", type: NxeDialogContentDirective, isStandalone: true, selector: "[nxe-dialog-content], [nxeDialogContent]", host: { classAttribute: "nxe-dialog-content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxe-dialog-content], [nxeDialogContent]',
+                    host: { class: 'nxe-dialog-content' },
+                }]
+        }] });
+
+/** The message of a confirm dialog. It is the dialog's accessible description. @internal */
+class NxeConfirmContentComponent {
+    data = inject(NXE_DIALOG_DATA);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeConfirmContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeConfirmContentComponent, isStandalone: true, selector: "nxe-confirm-content", host: { classAttribute: "nxe-confirm-content" }, ngImport: i0, template: "<p nxe-dialog-content class=\"nxe-confirm-message\" [id]=\"data.descriptionId\">{{ data.message }}</p>\r\n", styles: ["nxe-confirm-content.nxe-confirm-content{display:block}nxe-confirm-content.nxe-confirm-content .nxe-confirm-message{margin:0;color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NxeDialogContentDirective, selector: "[nxe-dialog-content], [nxeDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeConfirmContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-confirm-content', imports: [NxeDialogContentDirective], host: { class: 'nxe-confirm-content' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p nxe-dialog-content class=\"nxe-confirm-message\" [id]=\"data.descriptionId\">{{ data.message }}</p>\r\n", styles: ["nxe-confirm-content.nxe-confirm-content{display:block}nxe-confirm-content.nxe-confirm-content .nxe-confirm-message{margin:0;color:var(--nxe-ui-text);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);white-space:pre-line}\n"] }]
+        }] });
+
+let confirmSequence = 0;
+/**
+ * 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.
+ */
+class NxeConfirmService {
+    dialog = inject(NxeDialogService);
+    messages = inject(NxeMessageService);
+    async confirm(options) {
+        const descriptionId = `nxe-confirm-${++confirmSequence}-description`;
+        const data = { message: options.message ?? '', descriptionId };
+        const ref = this.dialog.open(NxeConfirmContentComponent, {
+            title: options.title,
+            size: options.size ?? 'sm',
+            role: 'alertdialog',
+            data,
+            ariaDescribedBy: options.message ? descriptionId : undefined,
+            backdropClose: false,
+            showClose: false,
+            actions: [
+                {
+                    text: options.cancelText ?? this.messages.t('common.cancel'),
+                    stylingMode: 'outlined',
+                    result: false,
+                    autofocus: !!options.danger,
+                },
+                {
+                    text: options.confirmText ?? this.messages.t('common.confirm'),
+                    type: options.danger ? 'danger' : 'default',
+                    result: true,
+                    autofocus: !options.danger,
+                },
+            ],
+        });
+        return (await ref.whenClosed()) === true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeConfirmService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeConfirmService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeConfirmService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let triggerSequence$1 = 0;
+/** Below the trigger, left edges aligned; flips above, then aligns right edges. */
+const ROOT_POSITIONS = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+];
+/** Beside the item, tops aligned; flips to the left. */
+const SUBMENU_POSITIONS = [
+    { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+    { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+    { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+];
+/** Hosts where Enter and Space already produce a click. */
+const NATIVELY_ACTIVATABLE$1 = new Set(['BUTTON', 'A', 'INPUT', 'SUMMARY']);
+/**
+ * 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.
+ */
+class NxeMenuTriggerForDirective {
+    overlay = inject(Overlay);
+    viewContainer = inject(ViewContainerRef);
+    element = inject(ElementRef).nativeElement;
+    /** @internal The menu this trigger sits in, when it opens a submenu. */
+    parentMenu = inject(NXE_MENU, { optional: true });
+    /** The menu to open. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'nxeMenuTriggerFor' });
+    /** @internal Id of the trigger; the panel is labelled by it. */
+    id = this.element.id || `nxe-menu-trigger-${++triggerSequence$1}`;
+    openState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
+    /** Whether the menu is showing. */
+    isOpen = this.openState.asReadonly();
+    overlayRef = null;
+    /** Opens the menu and moves focus to its first (or last) item. No-op while open. */
+    open(focus = 'first') {
+        if (this.openState()) {
+            return;
+        }
+        const menu = this.menu();
+        this.overlayRef ??= this.createOverlay(!!this.parentMenu);
+        menu.trigger = this;
+        this.overlayRef.attach(new TemplatePortal(menu.template(), this.viewContainer));
+        this.openState.set(true);
+        menu._opened(focus);
+    }
+    /** Closes the menu. `restoreFocus` returns focus to the trigger element (Esc, or an item was chosen). */
+    close(restoreFocus = false) {
+        if (!this.openState()) {
+            return;
+        }
+        const menu = this.menu();
+        this.openState.set(false);
+        menu._closed();
+        this.overlayRef?.detach();
+        if (menu.trigger === this) {
+            menu.trigger = null;
+        }
+        if (restoreFocus) {
+            this.element.focus();
+        }
+    }
+    toggle() {
+        if (this.openState()) {
+            this.close(true);
+        }
+        else {
+            this.open();
+        }
+    }
+    ngOnDestroy() {
+        if (this.openState()) {
+            const menu = this.menu();
+            menu._closed();
+            if (menu.trigger === this) {
+                menu.trigger = null;
+            }
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    onClick(event) {
+        // A disabled `nxe-menu-item` swallows its own click before it gets here.
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (this.parentMenu) {
+            // A submenu item opens its menu; the pointer is already on it, so a second click leaves it open.
+            this.open('first');
+        }
+        else {
+            this.toggle();
+        }
+    }
+    onKeydown(event) {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        // A submenu item is opened by ArrowRight, which its menu handles.
+        if (this.parentMenu) {
+            if (this.element.getAttribute('aria-disabled') !== 'true' &&
+                !NATIVELY_ACTIVATABLE$1.has(this.element.tagName) &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                event.preventDefault();
+                this.open('first');
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.open('first');
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.open('last');
+                break;
+            case 'Enter':
+            case ' ':
+                // nxe-button is a div: it reports Enter and Space through its onClick output, not a DOM click.
+                if (!NATIVELY_ACTIVATABLE$1.has(this.element.tagName)) {
+                    event.preventDefault();
+                    this.toggle();
+                }
+                break;
+        }
+    }
+    createOverlay(isSubmenu) {
+        const menu = this.menu();
+        const ref = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.element)
+                .withPositions(isSubmenu ? SUBMENU_POSITIONS : ROOT_POSITIONS)
+                .withFlexibleDimensions(false)
+                .withPush(true)
+                .withViewportMargin(8),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            // A transparent backdrop catches the click-away. A submenu rides on its parent's.
+            hasBackdrop: !isSubmenu,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: nxePane('nxe-menu-pane', ...[menu.panelClass()].flat()),
+        });
+        ref.backdropClick().subscribe(() => this.close(false));
+        // Esc is normally handled by the panel; this covers a menu opened without focus inside it.
+        ref.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close(true);
+            }
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeMenuTriggerForDirective, isStandalone: true, selector: "[nxeMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "nxeMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? menu().panelId : null" } }, exportAs: ["nxeMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeMenuTriggerFor]',
+                    exportAs: 'nxeMenuTrigger',
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.id]': 'id',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? menu().panelId : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeMenuTriggerFor", required: true }] }] } });
+
+/**
+ * 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.
+ */
+class NxeMenuItemComponent {
+    element = inject(ElementRef).nativeElement;
+    /** @internal The menu this item sits in. */
+    menu = inject(NXE_MENU, { optional: true });
+    /** @internal Set when the item opens a submenu. */
+    trigger = inject(NxeMenuTriggerForDirective, { optional: true, self: true });
+    isButton = this.element.tagName === 'BUTTON';
+    /** Buttons and links turn Enter (and, for a button, Space) into a click themselves. */
+    isNative = this.element.tagName === 'BUTTON' || this.element.tagName === 'A';
+    /** Shown but not actionable. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    /** Destructive action: coloured with the danger status. */
+    danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emits when an enabled item is activated, before the menu closes. */
+    itemClick = output();
+    /** `FocusableOption`: the key manager skips disabled items. */
+    get disabled() {
+        return this.disabledInput();
+    }
+    focus() {
+        this.element.focus();
+    }
+    /** Typeahead matches the start of this. */
+    getLabel() {
+        return (this.element.querySelector('.nxe-menu-item-label')?.textContent ?? '').trim();
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        this.itemClick.emit();
+        // A submenu trigger opens its menu; choosing a plain item closes the one it is in.
+        if (!this.trigger) {
+            this.menu?.closeMenu();
+        }
+    }
+    onKeydown(event) {
+        // Buttons and links already turn Enter into a click (and a button, Space); other hosts do not.
+        if (this.isNative || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.element.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeMenuItemComponent, isStandalone: true, selector: "nxe-menu-item, [nxe-menu-item]", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "menu?._hovered(this)" }, properties: { "attr.aria-disabled": "disabled ? true : null", "attr.disabled": "disabled && isButton ? '' : null", "class.nxe-menu-item-danger": "danger()", "class.nxe-menu-item-disabled": "disabled" }, classAttribute: "nxe-menu-item" }, ngImport: i0, template: "<span class=\"nxe-menu-item-icon\"><ng-content select=\"[nxeMenuItemIcon]\" /></span>\r\n<span class=\"nxe-menu-item-label\"><ng-content /></span>\r\n@if (trigger) {\r\n    <svg class=\"nxe-menu-item-chevron\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n        <path d=\"M6 3.5 10.5 8 6 12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n}\r\n", styles: [".nxe-menu-item{box-sizing:border-box;display:flex;flex:none;align-items:center;gap:var(--nxe-ui-space-2);width:100%;margin:0;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-3);border:0;border-radius:0;background:transparent;color:var(--nxe-ui-text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}.nxe-menu-item:hover,.nxe-menu-item:focus{background:var(--nxe-ui-surface-alt);outline:none}.nxe-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--nxe-ui-focus-ring-color)}.nxe-menu-item .nxe-menu-item-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--nxe-ui-space-4);height:var(--nxe-ui-space-4);color:var(--nxe-ui-neutral-600)}.nxe-menu-item .nxe-menu-item-icon:empty{display:none}.nxe-menu-item .nxe-menu-item-icon>svg,.nxe-menu-item .nxe-menu-item-icon>.nxe-icon{width:100%;height:100%;fill:currentColor}.nxe-menu-item .nxe-menu-item-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-menu-item .nxe-menu-item-chevron{flex:none;width:14px;height:14px;color:var(--nxe-ui-neutral-600)}.nxe-menu-item.nxe-menu-item-danger{color:var(--nxe-ui-status-danger-fg)}.nxe-menu-item.nxe-menu-item-danger .nxe-menu-item-icon{color:inherit}.nxe-menu-item.nxe-menu-item-disabled{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-menu-item.nxe-menu-item-disabled:hover{background:transparent}.nxe-menu-item.nxe-menu-item-disabled .nxe-menu-item-icon,.nxe-menu-item.nxe-menu-item-disabled .nxe-menu-item-chevron{color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-menu-item, [nxe-menu-item]', host: {
+                        class: 'nxe-menu-item',
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.aria-disabled]': 'disabled ? true : null',
+                        '[attr.disabled]': "disabled && isButton ? '' : null",
+                        '[class.nxe-menu-item-danger]': 'danger()',
+                        '[class.nxe-menu-item-disabled]': 'disabled',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mouseenter)': 'menu?._hovered(this)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span class=\"nxe-menu-item-icon\"><ng-content select=\"[nxeMenuItemIcon]\" /></span>\r\n<span class=\"nxe-menu-item-label\"><ng-content /></span>\r\n@if (trigger) {\r\n    <svg class=\"nxe-menu-item-chevron\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n        <path d=\"M6 3.5 10.5 8 6 12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n}\r\n", styles: [".nxe-menu-item{box-sizing:border-box;display:flex;flex:none;align-items:center;gap:var(--nxe-ui-space-2);width:100%;margin:0;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-3);border:0;border-radius:0;background:transparent;color:var(--nxe-ui-text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}.nxe-menu-item:hover,.nxe-menu-item:focus{background:var(--nxe-ui-surface-alt);outline:none}.nxe-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--nxe-ui-focus-ring-color)}.nxe-menu-item .nxe-menu-item-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--nxe-ui-space-4);height:var(--nxe-ui-space-4);color:var(--nxe-ui-neutral-600)}.nxe-menu-item .nxe-menu-item-icon:empty{display:none}.nxe-menu-item .nxe-menu-item-icon>svg,.nxe-menu-item .nxe-menu-item-icon>.nxe-icon{width:100%;height:100%;fill:currentColor}.nxe-menu-item .nxe-menu-item-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-menu-item .nxe-menu-item-chevron{flex:none;width:14px;height:14px;color:var(--nxe-ui-neutral-600)}.nxe-menu-item.nxe-menu-item-danger{color:var(--nxe-ui-status-danger-fg)}.nxe-menu-item.nxe-menu-item-danger .nxe-menu-item-icon{color:inherit}.nxe-menu-item.nxe-menu-item-disabled{color:var(--nxe-ui-text-disabled);cursor:default}.nxe-menu-item.nxe-menu-item-disabled:hover{background:transparent}.nxe-menu-item.nxe-menu-item-disabled .nxe-menu-item-icon,.nxe-menu-item.nxe-menu-item-disabled .nxe-menu-item-chevron{color:inherit}\n"] }]
+        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+let menuSequence = 0;
+/**
+ * `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.
+ */
+class NxeMenuComponent {
+    injector = inject(Injector);
+    /** Accessible name. Defaults to the trigger's. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Extra class(es) for the overlay pane. */
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** @internal Id of the panel; the trigger's `aria-controls`. */
+    panelId = `nxe-menu-${++menuSequence}`;
+    /** @internal */
+    template = viewChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    descendantItems = contentChildren(NxeMenuItemComponent, { ...(ngDevMode ? { debugName: "descendantItems" } : /* istanbul ignore next */ {}), descendants: true });
+    /** Only this menu's own items: a submenu declared inside this one brings its own. */
+    items = computed(() => this.descendantItems().filter((item) => item.menu === this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** @internal The trigger currently showing this menu. */
+    trigger = null;
+    keyManager = null;
+    /** @internal `aria-labelledby` of the panel: the trigger, unless an explicit label is given. */
+    labelledBy() {
+        return this.ariaLabel() ? null : (this.trigger?.id ?? null);
+    }
+    /** Closes the menu (and any menu it was opened from). Called by items and `nxe-list` when chosen. */
+    closeMenu() {
+        const trigger = this.trigger;
+        if (!trigger) {
+            return;
+        }
+        trigger.close(true);
+        trigger.parentMenu?.closeMenu();
+    }
+    /** @internal Called by the trigger once the panel is attached. */
+    _opened(focus) {
+        this.keyManager = new FocusKeyManager(this.items, this.injector)
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withWrap()
+            .withTypeAhead()
+            .skipPredicate((item) => item.disabled);
+        if (focus !== 'none') {
+            afterNextRender(() => (focus === 'first' ? this.keyManager?.setFirstItemActive() : this.keyManager?.setLastItemActive()), { injector: this.injector });
+        }
+    }
+    /** @internal Called by the trigger when the panel is detached. */
+    _closed() {
+        this.closeSubmenus();
+        this.keyManager = null;
+    }
+    /** @internal Moves the active item under the pointer, and closes a sibling's submenu. */
+    _hovered(item) {
+        if (item.disabled) {
+            return;
+        }
+        for (const other of this.items()) {
+            if (other !== item && other.trigger?.isOpen()) {
+                other.trigger.close(false);
+            }
+        }
+        this.keyManager?.setActiveItem(item);
+    }
+    closeSubmenus() {
+        for (const item of this.items()) {
+            if (item.trigger?.isOpen()) {
+                item.trigger.close(false);
+            }
+        }
+    }
+    /** @internal */
+    onKeydown(event) {
+        const manager = this.keyManager;
+        const trigger = this.trigger;
+        if (!manager || !trigger || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                // Handled here, not by the overlay dispatcher, so only this level closes.
+                event.preventDefault();
+                event.stopPropagation();
+                trigger.close(true);
+                return;
+            case 'Tab':
+                // No preventDefault: focus is back on the trigger, so Tab moves on from it.
+                this.closeChain();
+                return;
+            case 'ArrowRight':
+                if (manager.activeItem?.trigger) {
+                    event.preventDefault();
+                    manager.activeItem.trigger.open('first');
+                }
+                return;
+            case 'ArrowLeft':
+                if (trigger.parentMenu) {
+                    event.preventDefault();
+                    trigger.close(true);
+                }
+                return;
+            case 'Enter':
+            case ' ':
+                // The item handles it; typeahead must not eat the space as a character.
+                if (manager.activeItem) {
+                    return;
+                }
+        }
+        manager.onKeydown(event);
+    }
+    closeChain() {
+        const trigger = this.trigger;
+        trigger?.close(true);
+        trigger?.parentMenu?.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeMenuComponent, isStandalone: true, selector: "nxe-menu", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-menu-host" }, providers: [{ provide: NXE_MENU, useExisting: NxeMenuComponent }], queries: [{ propertyName: "descendantItems", predicate: NxeMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["nxeMenu"], ngImport: i0, template: "<ng-template>\r\n    <div\r\n        class=\"nxe-menu\"\r\n        role=\"menu\"\r\n        aria-orientation=\"vertical\"\r\n        tabindex=\"-1\"\r\n        [id]=\"panelId\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"labelledBy()\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        <ng-content />\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-menu.nxe-menu-host{display:none}.cdk-overlay-pane.nxe-menu-pane{margin:0}.nxe-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:180px;max-width:min(320px,100vw - var(--nxe-ui-space-4));max-height:min(480px,100vh - var(--nxe-ui-space-4) * 2);overflow-y:auto;padding:var(--nxe-ui-space-1) 0;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);outline:none}.nxe-menu .nxe-list{color:inherit}.nxe-menu-divider{display:block;flex:none;height:0;margin:var(--nxe-ui-space-1) 0;border:0;border-top:1px solid var(--nxe-ui-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-menu', exportAs: 'nxeMenu', providers: [{ provide: NXE_MENU, useExisting: NxeMenuComponent }], host: { class: 'nxe-menu-host' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template>\r\n    <div\r\n        class=\"nxe-menu\"\r\n        role=\"menu\"\r\n        aria-orientation=\"vertical\"\r\n        tabindex=\"-1\"\r\n        [id]=\"panelId\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"labelledBy()\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        <ng-content />\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-menu.nxe-menu-host{display:none}.cdk-overlay-pane.nxe-menu-pane{margin:0}.nxe-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:180px;max-width:min(320px,100vw - var(--nxe-ui-space-4));max-height:min(480px,100vh - var(--nxe-ui-space-4) * 2);overflow-y:auto;padding:var(--nxe-ui-space-1) 0;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);outline:none}.nxe-menu .nxe-list{color:inherit}.nxe-menu-divider{display:block;flex:none;height:0;margin:var(--nxe-ui-space-1) 0;border:0;border-top:1px solid var(--nxe-ui-border)}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], descendantItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeMenuItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/** A rule between groups of items in an `nxe-menu`. */
+class NxeMenuDividerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeMenuDividerComponent, isStandalone: true, selector: "nxe-menu-divider", host: { attributes: { "role": "separator" }, classAttribute: "nxe-menu-divider" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMenuDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-menu-divider',
+                    template: '',
+                    host: { class: 'nxe-menu-divider', role: 'separator' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+/** Controls a Tab can land on, as a selector. Callers still filter out the hidden ones. @internal */
+const NXE_TABBABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+let popoverSequence = 0;
+/**
+ * `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.
+ */
+class NxePopoverComponent {
+    messages = inject(NxeMessageService);
+    /** A title for the panel; it names the dialog. */
+    heading = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Draws a close button in the header. */
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name when there is no `heading`. Without either, the trigger names the panel. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Preferred side of the trigger. */
+    position = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) for the overlay pane. */
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Emits when the panel opens. */
+    opened = output();
+    /** Emits when the panel closes, however it was closed. */
+    closed = output();
+    sequence = ++popoverSequence;
+    /** @internal Id of the panel; the trigger's `aria-controls`. */
+    panelId = `nxe-popover-${this.sequence}`;
+    /** @internal */
+    headingId = `nxe-popover-${this.sequence}-heading`;
+    /** @internal */
+    template = viewChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    /** @internal The trigger currently showing this popover. */
+    trigger = null;
+    /** Whether the panel is showing. */
+    isOpen() {
+        return this.trigger?.isOpen() ?? false;
+    }
+    /** Closes the panel and returns focus to its trigger. No-op while closed. */
+    close() {
+        this.trigger?.close(true);
+    }
+    /** @internal `aria-labelledby` of the panel: the heading, else the trigger unless an explicit label is given. */
+    labelledBy() {
+        if (this.heading()) {
+            return this.headingId;
+        }
+        return this.ariaLabel() ? null : (this.trigger?.id ?? 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. */
+    onKeydown(event) {
+        if (event.key !== 'Tab' || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        const panel = event.currentTarget;
+        const tabbable = Array.from(panel.querySelectorAll(NXE_TABBABLE)).filter((el) => el.tabIndex >= 0 && !el.hasAttribute('hidden') && el.getClientRects().length > 0);
+        const active = document.activeElement;
+        const first = tabbable[0];
+        const last = tabbable[tabbable.length - 1];
+        if (event.shiftKey) {
+            if (!first || active === first || active === panel) {
+                event.preventDefault();
+                this.trigger?.close(true);
+            }
+        }
+        else if (!last || active === last) {
+            // No preventDefault: focus lands back on the trigger, so Tab moves on from it.
+            this.trigger?.close(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePopoverComponent, isStandalone: true, selector: "nxe-popover", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { classAttribute: "nxe-popover-host" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["nxePopover"], ngImport: i0, template: "<ng-template>\r\n    <div\r\n        class=\"nxe-popover\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [id]=\"panelId\"\r\n        [attr.aria-label]=\"heading() ? null : ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"labelledBy()\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        @if (heading() || closable()) {\r\n            <div class=\"nxe-popover-header\">\r\n                @if (heading()) {\r\n                    <div class=\"nxe-popover-heading\" [id]=\"headingId\">{{ heading() }}</div>\r\n                }\r\n                @if (closable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"nxe-popover-close\"\r\n                        [attr.aria-label]=\"messages.t('common.close')\"\r\n                        (click)=\"close()\">\r\n                        <svg viewBox=\"0 0 16 16\" focusable=\"false\" aria-hidden=\"true\">\r\n                            <path d=\"M3.2 2 8 6.8 12.8 2 14 3.2 9.2 8l4.8 4.8-1.2 1.2L8 9.2 3.2 14 2 12.8 6.8 8 2 3.2z\" />\r\n                        </svg>\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n        <div class=\"nxe-popover-body\">\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-popover.nxe-popover-host{display:none}.cdk-overlay-pane.nxe-popover-pane{box-sizing:border-box;padding:var(--nxe-ui-space-1)}.nxe-popover{box-sizing:border-box;min-width:200px;max-width:min(420px,100vw - var(--nxe-ui-space-4));max-height:min(520px,100vh - var(--nxe-ui-space-4) * 2);overflow:auto;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);outline:none}.nxe-popover-header{display:flex;align-items:center;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2) var(--nxe-ui-space-2) 0 var(--nxe-ui-space-3)}.nxe-popover-heading{flex:1;min-width:0;font-weight:600}.nxe-popover-close{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;margin-inline-start:auto;padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:inherit;cursor:pointer}.nxe-popover-close svg{width:14px;height:14px;fill:currentColor}.nxe-popover-close:hover{background:var(--nxe-ui-hover-bg)}.nxe-popover-close:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-popover-body{padding:var(--nxe-ui-space-3)}.nxe-popover-header+.nxe-popover-body{padding-top:var(--nxe-ui-space-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-popover', exportAs: 'nxePopover', host: { class: 'nxe-popover-host' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template>\r\n    <div\r\n        class=\"nxe-popover\"\r\n        role=\"dialog\"\r\n        tabindex=\"-1\"\r\n        [id]=\"panelId\"\r\n        [attr.aria-label]=\"heading() ? null : ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"labelledBy()\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        @if (heading() || closable()) {\r\n            <div class=\"nxe-popover-header\">\r\n                @if (heading()) {\r\n                    <div class=\"nxe-popover-heading\" [id]=\"headingId\">{{ heading() }}</div>\r\n                }\r\n                @if (closable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"nxe-popover-close\"\r\n                        [attr.aria-label]=\"messages.t('common.close')\"\r\n                        (click)=\"close()\">\r\n                        <svg viewBox=\"0 0 16 16\" focusable=\"false\" aria-hidden=\"true\">\r\n                            <path d=\"M3.2 2 8 6.8 12.8 2 14 3.2 9.2 8l4.8 4.8-1.2 1.2L8 9.2 3.2 14 2 12.8 6.8 8 2 3.2z\" />\r\n                        </svg>\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n        <div class=\"nxe-popover-body\">\r\n            <ng-content />\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-popover.nxe-popover-host{display:none}.cdk-overlay-pane.nxe-popover-pane{box-sizing:border-box;padding:var(--nxe-ui-space-1)}.nxe-popover{box-sizing:border-box;min-width:200px;max-width:min(420px,100vw - var(--nxe-ui-space-4));max-height:min(520px,100vh - var(--nxe-ui-space-4) * 2);overflow:auto;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-popup-radius);box-shadow:var(--nxe-ui-popup-shadow);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);outline:none}.nxe-popover-header{display:flex;align-items:center;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-2) var(--nxe-ui-space-2) 0 var(--nxe-ui-space-3)}.nxe-popover-heading{flex:1;min-width:0;font-weight:600}.nxe-popover-close{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;margin-inline-start:auto;padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:inherit;cursor:pointer}.nxe-popover-close svg{width:14px;height:14px;fill:currentColor}.nxe-popover-close:hover{background:var(--nxe-ui-hover-bg)}.nxe-popover-close:focus-visible{outline:2px solid var(--nxe-ui-accent);outline-offset:-2px}.nxe-popover-body{padding:var(--nxe-ui-space-3)}.nxe-popover-header+.nxe-popover-body{padding-top:var(--nxe-ui-space-2)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+const OPPOSITE = { top: 'bottom', bottom: 'top', start: 'end', end: 'start' };
+function side(placement, align) {
+    switch (placement) {
+        case 'top':
+            return align === 'center'
+                ? { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }
+                : { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' };
+        case 'bottom':
+            return align === 'center'
+                ? { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' }
+                : { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' };
+        case 'start':
+            return align === 'center'
+                ? { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' }
+                : { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' };
+        case 'end':
+            return align === 'center'
+                ? { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }
+                : { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' };
+    }
+}
+/**
+ * Connected positions for a placement: the preferred side, then the opposite one (the flip), then
+ * the two sides across. No offsets: the gap to the trigger is padding on the overlay pane, which
+ * keeps it right for either writing direction and keeps the pointer over the pane while crossing it.
+ *
+ * `center` centres the overlay on the trigger (a tooltip); `start` aligns the edges (a popover).
+ * @internal
+ */
+function nxePlacementPositions(placement, align) {
+    const across = placement === 'top' || placement === 'bottom' ? ['end', 'start'] : ['bottom', 'top'];
+    return [placement, OPPOSITE[placement], ...across].map((p) => side(p, align));
+}
+
+let triggerSequence = 0;
+/** Hosts where Enter and Space already produce a click. */
+const NATIVELY_ACTIVATABLE = new Set(['BUTTON', 'A', 'INPUT', 'SUMMARY']);
+/**
+ * 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.
+ */
+class NxePopoverTriggerForDirective {
+    overlay = inject(Overlay);
+    viewContainer = inject(ViewContainerRef);
+    injector = inject(Injector);
+    element = inject(ElementRef).nativeElement;
+    /** The popover to open. */
+    popover = input.required({ ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), alias: 'nxePopoverTriggerFor' });
+    /** @internal Id of the trigger; the panel is labelled by it when it has no heading or label. */
+    id = this.element.id || `nxe-popover-trigger-${++triggerSequence}`;
+    openState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
+    /** Whether the popover is showing. */
+    isOpen = this.openState.asReadonly();
+    overlayRef = null;
+    /** Opens the popover and moves focus into it. No-op while open. */
+    open() {
+        if (this.openState()) {
+            return;
+        }
+        const popover = this.popover();
+        this.overlayRef?.dispose();
+        this.overlayRef = this.createOverlay(popover);
+        popover.trigger = this;
+        this.overlayRef.attach(new TemplatePortal(popover.template(), this.viewContainer));
+        this.openState.set(true);
+        popover.opened.emit();
+        afterNextRender(() => this.focusInto(), { injector: this.injector });
+    }
+    /** Closes the popover. `restoreFocus` returns focus to the element (Esc, Tab off an end, the close button). */
+    close(restoreFocus = false) {
+        if (!this.openState()) {
+            return;
+        }
+        const popover = this.popover();
+        this.openState.set(false);
+        this.overlayRef?.detach();
+        if (popover.trigger === this) {
+            popover.trigger = null;
+        }
+        popover.closed.emit();
+        if (restoreFocus) {
+            this.element.focus();
+        }
+    }
+    toggle() {
+        if (this.openState()) {
+            this.close(true);
+        }
+        else {
+            this.open();
+        }
+    }
+    ngOnDestroy() {
+        if (this.openState()) {
+            const popover = this.popover();
+            if (popover.trigger === this) {
+                popover.trigger = null;
+            }
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    onClick(event) {
+        if (!event.defaultPrevented) {
+            this.toggle();
+        }
+    }
+    onKeydown(event) {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        // nxe-button is a div: it reports Enter and Space through its onClick output, not a DOM click.
+        if ((event.key === 'Enter' || event.key === ' ') && !NATIVELY_ACTIVATABLE.has(this.element.tagName)) {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    /** The first control in the content, else the close button; nothing when the panel has neither. */
+    focusInto() {
+        const panel = this.overlayRef?.overlayElement.querySelector('.nxe-popover');
+        if (!panel) {
+            return;
+        }
+        const visible = (el) => el.tabIndex >= 0 && el.getClientRects().length > 0;
+        const target = Array.from(panel.querySelectorAll('.nxe-popover-body')).flatMap((body) => Array.from(body.querySelectorAll(NXE_TABBABLE))).find(visible) ?? panel.querySelector('.nxe-popover-close');
+        target?.focus();
+    }
+    createOverlay(popover) {
+        const ref = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.element)
+                .withPositions(nxePlacementPositions(popover.position(), 'start'))
+                .withFlexibleDimensions(false)
+                .withPush(true)
+                .withViewportMargin(8),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: nxePane('nxe-popover-pane', ...[popover.panelClass()].flat()),
+        });
+        // Esc closes this popover; an overlay opened from inside it (a drop-down) is above it and takes the key first.
+        ref.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                event.preventDefault();
+                this.close(true);
+            }
+        });
+        ref.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            // The trigger's own click toggles; a drop-down or calendar opened from inside the popover is not "outside" it.
+            if (!target || this.element.contains(target) || target.closest('.cdk-overlay-pane, .cdk-overlay-backdrop')) {
+                return;
+            }
+            this.close(false);
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePopoverTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxePopoverTriggerForDirective, isStandalone: true, selector: "[nxePopoverTriggerFor]", inputs: { popover: { classPropertyName: "popover", publicName: "nxePopoverTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.id": "id", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? popover().panelId : null" } }, exportAs: ["nxePopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePopoverTriggerForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxePopoverTriggerFor]',
+                    exportAs: 'nxePopoverTrigger',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        '[attr.id]': 'id',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? popover().panelId : null',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxePopoverTriggerFor", required: true }] }] } });
+
+/**
+ * The chip a `[nxeTooltip]` shows. Internal: it is created by the directive, not declared in a
+ * template.
+ * @internal
+ */
+class NxeTooltipPanelComponent {
+    text = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    tooltipId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeTooltipPanelComponent, isStandalone: true, selector: "nxe-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "tooltipId()" }, classAttribute: "nxe-tooltip" }, ngImport: i0, template: '{{ text() }}', isInline: true, styles: [".cdk-overlay-pane.nxe-tooltip-pane{box-sizing:border-box;padding:6px;pointer-events:auto}.nxe-tooltip{display:block;box-sizing:border-box;max-width:240px;padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border-radius:var(--nxe-ui-radius-sm);background:var(--nxe-ui-tooltip-bg);color:var(--nxe-ui-tooltip-fg);box-shadow:var(--nxe-ui-shadow-sm);font-size:var(--nxe-ui-font-size-sm);line-height:var(--nxe-ui-line-height-sm);overflow-wrap:anywhere;white-space:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-tooltip-panel', template: '{{ text() }}', host: {
+                        class: 'nxe-tooltip',
+                        role: 'tooltip',
+                        '[attr.id]': 'tooltipId()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".cdk-overlay-pane.nxe-tooltip-pane{box-sizing:border-box;padding:6px;pointer-events:auto}.nxe-tooltip{display:block;box-sizing:border-box;max-width:240px;padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border-radius:var(--nxe-ui-radius-sm);background:var(--nxe-ui-tooltip-bg);color:var(--nxe-ui-tooltip-fg);box-shadow:var(--nxe-ui-shadow-sm);font-size:var(--nxe-ui-font-size-sm);line-height:var(--nxe-ui-line-height-sm);overflow-wrap:anywhere;white-space:normal}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: false }] }] } });
+
+let tooltipSequence = 0;
+/**
+ * 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.
+ */
+class NxeTooltipDirective {
+    overlay = inject(Overlay);
+    element = inject(ElementRef).nativeElement;
+    ariaDescriber = inject(AriaDescriber);
+    renderer = inject(Renderer2);
+    focusMonitor = inject(FocusMonitor);
+    /** The tooltip text. Empty, or a `nxeTooltipDisabled` element, shows nothing. */
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'nxeTooltip' });
+    /** Preferred side. `start` and `end` follow the writing direction. */
+    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'nxeTooltipPosition' });
+    /** Milliseconds the pointer rests before the tooltip shows. Focus from the keyboard ignores it. */
+    showDelay = input(500, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'nxeTooltipShowDelay', transform: numberAttribute });
+    /** Milliseconds between the pointer leaving and the tooltip hiding. */
+    hideDelay = input(100, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'nxeTooltipHideDelay', transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'nxeTooltipDisabled', transform: booleanAttribute });
+    message = computed(() => (this.disabled() ? '' : (this.text() ?? '').trim()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    visibleState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleState" }] : /* istanbul ignore next */ []));
+    /** Whether the tooltip is showing. */
+    isVisible = this.visibleState.asReadonly();
+    /** Id of the `role="tooltip"` element while it exists. */
+    id = `nxe-tooltip-${++tooltipSequence}`;
+    overlayRef = null;
+    panel = null;
+    showTimer = null;
+    hideTimer = null;
+    described = '';
+    unlisten = [];
+    constructor() {
+        this.focusMonitor
+            .monitor(this.element)
+            .pipe(takeUntilDestroyed(inject(DestroyRef)))
+            .subscribe((origin) => {
+            if (origin === 'keyboard') {
+                this.show(0);
+            }
+            else if (origin === null) {
+                this.hide(0);
+            }
+        });
+        toObservable(this.message)
+            .pipe(takeUntilDestroyed())
+            .subscribe((message) => this.messageChanged(message));
+    }
+    /** Shows the tooltip after `delay` milliseconds. No-op without text. */
+    show(delay = this.showDelay()) {
+        this.clearTimers();
+        if (!this.message() || this.visibleState()) {
+            return;
+        }
+        if (delay > 0) {
+            this.showTimer = setTimeout(() => this.attach(), delay);
+        }
+        else {
+            this.attach();
+        }
+    }
+    /** Hides the tooltip after `delay` milliseconds. */
+    hide(delay = this.hideDelay()) {
+        this.clearTimers();
+        if (!this.visibleState()) {
+            return;
+        }
+        if (delay > 0) {
+            this.hideTimer = setTimeout(() => this.detach(), delay);
+        }
+        else {
+            this.detach();
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimers();
+        this.unlisten.forEach((fn) => fn());
+        if (this.visibleState()) {
+            this.removeDescribedBy();
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.ariaDescriber.removeDescription(this.element, this.described);
+        this.described = '';
+        this.focusMonitor.stopMonitoring(this.element);
+    }
+    onPointerEnter(event) {
+        // A touch is followed by emulated mouse events; a tooltip there is a stuck tooltip.
+        if (event.pointerType !== 'touch') {
+            this.show();
+        }
+    }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'touch') {
+            this.hide();
+        }
+    }
+    attach() {
+        this.showTimer = null;
+        const message = this.message();
+        if (!message || this.visibleState()) {
+            return;
+        }
+        const ref = (this.overlayRef ??= this.createOverlay());
+        ref.updatePositionStrategy(this.positionStrategy());
+        const panel = (this.panel = ref.attach(new ComponentPortal(NxeTooltipPanelComponent)));
+        panel.setInput('text', message);
+        panel.setInput('tooltipId', this.id);
+        this.visibleState.set(true);
+        // The hidden description gives way to the tooltip itself; the text is the same.
+        this.ariaDescriber.removeDescription(this.element, this.described);
+        this.addDescribedBy();
+    }
+    detach() {
+        this.hideTimer = null;
+        if (!this.visibleState()) {
+            return;
+        }
+        this.overlayRef?.detach();
+        this.panel = null;
+        this.visibleState.set(false);
+        this.removeDescribedBy();
+        this.describe(this.message());
+    }
+    createOverlay() {
+        const ref = this.overlay.create({
+            positionStrategy: this.positionStrategy(),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: nxePane('nxe-tooltip-pane'),
+        });
+        // Esc dismisses the tooltip alone: a dialog or menu under it is not closed by the same key.
+        ref.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && !event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.hide(0);
+            }
+        });
+        // Hoverable: reaching the tooltip keeps it, leaving it hides it.
+        this.unlisten.push(this.renderer.listen(ref.overlayElement, 'pointerenter', () => this.clearTimers()), this.renderer.listen(ref.overlayElement, 'pointerleave', () => this.hide()));
+        return ref;
+    }
+    positionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.element)
+            .withPositions(nxePlacementPositions(this.position(), 'center'))
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(4);
+    }
+    messageChanged(message) {
+        if (this.visibleState()) {
+            if (message) {
+                this.panel?.setInput('text', message);
+            }
+            else {
+                this.detach();
+            }
+            this.described = message;
+            return;
+        }
+        this.describe(message);
+    }
+    /** The hidden description a screen reader reads on focus while no tooltip is showing. */
+    describe(message) {
+        if (message === this.described) {
+            if (message) {
+                this.ariaDescriber.describe(this.element, message);
+            }
+            return;
+        }
+        this.ariaDescriber.removeDescription(this.element, this.described);
+        this.described = message;
+        if (message) {
+            this.ariaDescriber.describe(this.element, message);
+        }
+    }
+    addDescribedBy() {
+        const ids = this.describedByIds();
+        if (!ids.includes(this.id)) {
+            this.element.setAttribute('aria-describedby', [...ids, this.id].join(' '));
+        }
+    }
+    removeDescribedBy() {
+        const ids = this.describedByIds().filter((id) => id !== this.id);
+        if (ids.length) {
+            this.element.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this.element.removeAttribute('aria-describedby');
+        }
+    }
+    describedByIds() {
+        return (this.element.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+    }
+    clearTimers() {
+        if (this.showTimer !== null) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeTooltipDirective, isStandalone: true, selector: "[nxeTooltip]", inputs: { text: { classPropertyName: "text", publicName: "nxeTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "nxeTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "nxeTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "nxeTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "nxeTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "hide(0)", "click": "hide(0)", "keydown.enter": "hide(0)", "keydown.space": "hide(0)" } }, exportAs: ["nxeTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeTooltip]',
+                    exportAs: 'nxeTooltip',
+                    host: {
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointerdown)': 'hide(0)',
+                        '(click)': 'hide(0)',
+                        '(keydown.enter)': 'hide(0)',
+                        '(keydown.space)': 'hide(0)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeTooltip", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeTooltipPosition", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeTooltipShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeTooltipHideDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeTooltipDisabled", required: false }] }] } });
+
+/** The data a drawer was opened with, injected into the content component. */
+const NXE_DRAWER_DATA = new InjectionToken('NXE_DRAWER_DATA');
+
+/**
+ * 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.
+ */
+class NxeDrawerRef extends NxeDialogRef {
+}
+
+/**
+ * What `NxeDrawerService` opens in the CDK dialog container: the dialog's own frame (title, scrolling body,
+ * actions bar, close button, all injecting the same ref and data), wrapped so the drawer's pane styles load
+ * with it. @internal
+ */
+class NxeDrawerFrameComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeDrawerFrameComponent, isStandalone: true, selector: "nxe-drawer-frame", host: { classAttribute: "nxe-drawer-frame-host" }, ngImport: i0, template: '<nxe-dialog-frame />', isInline: true, styles: ["nxe-drawer-frame.nxe-drawer-frame-host{display:contents}.cdk-overlay-pane.nxe-drawer-pane{--nxe-drawer-from: 100%;box-sizing:border-box;height:100%;max-width:100vw}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-sm{width:320px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-md{width:420px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-lg{width:560px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-xl{width:760px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-full{width:100vw}.cdk-overlay-pane.nxe-drawer-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end .cdk-dialog-container{border-inline-start:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start .cdk-dialog-container{border-inline-end:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start,[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end{--nxe-drawer-from: -100%}[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start{--nxe-drawer-from: 100%}.cdk-overlay-backdrop.nxe-drawer-backdrop{background:var(--nxe-ui-shell-scrim)}@media(prefers-reduced-motion:no-preference){.cdk-overlay-pane.nxe-drawer-pane{animation:nxe-drawer-in .22s ease-out}}@keyframes nxe-drawer-in{0%{transform:translate(var(--nxe-drawer-from))}to{transform:none}}.cdk-overlay-pane.nxe-drawer-pane nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-header{padding-inline:var(--nxe-ui-space-4) var(--nxe-ui-space-8)}.cdk-overlay-pane.nxe-drawer-pane nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close{right:auto;inset-inline-end:var(--nxe-ui-space-2)}\n"], dependencies: [{ kind: "component", type: NxeDialogFrameComponent, selector: "nxe-dialog-frame" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-drawer-frame', imports: [NxeDialogFrameComponent], template: '<nxe-dialog-frame />', host: { class: 'nxe-drawer-frame-host' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-drawer-frame.nxe-drawer-frame-host{display:contents}.cdk-overlay-pane.nxe-drawer-pane{--nxe-drawer-from: 100%;box-sizing:border-box;height:100%;max-width:100vw}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-sm{width:320px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-md{width:420px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-lg{width:560px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-xl{width:760px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-full{width:100vw}.cdk-overlay-pane.nxe-drawer-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end .cdk-dialog-container{border-inline-start:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start .cdk-dialog-container{border-inline-end:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start,[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end{--nxe-drawer-from: -100%}[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start{--nxe-drawer-from: 100%}.cdk-overlay-backdrop.nxe-drawer-backdrop{background:var(--nxe-ui-shell-scrim)}@media(prefers-reduced-motion:no-preference){.cdk-overlay-pane.nxe-drawer-pane{animation:nxe-drawer-in .22s ease-out}}@keyframes nxe-drawer-in{0%{transform:translate(var(--nxe-drawer-from))}to{transform:none}}.cdk-overlay-pane.nxe-drawer-pane nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-header{padding-inline:var(--nxe-ui-space-4) var(--nxe-ui-space-8)}.cdk-overlay-pane.nxe-drawer-pane nxe-dialog-frame.nxe-dialog-frame .nxe-dialog-close{right:auto;inset-inline-end:var(--nxe-ui-space-2)}\n"] }]
+        }] });
+
+/**
+ * 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"`.
+ */
+class NxeDrawerService {
+    cdk = inject(Dialog);
+    overlay = inject(Overlay);
+    sequence = 0;
+    open(content, config = {}) {
+        const id = `nxe-drawer-${++this.sequence}`;
+        const ref = new NxeDrawerRef(id, `${id}-title`);
+        ref.disableClose = !!config.disableClose;
+        const side = config.side ?? 'end';
+        const frame = {
+            ref: ref,
+            content: content,
+            data: config.data,
+            title: config.title,
+            actions: (config.actions ?? []),
+            showClose: config.showClose ?? true,
+            injector: config.injector,
+            providers: [
+                { provide: NxeDrawerRef, useValue: ref },
+                { provide: NXE_DRAWER_DATA, useValue: config.data },
+            ],
+        };
+        const position = this.overlay.position().global().top('0');
+        const cdkRef = this.cdk.open(NxeDrawerFrameComponent, {
+            id,
+            role: 'dialog',
+            ariaModal: true,
+            ariaLabel: config.ariaLabel ?? null,
+            ariaLabelledBy: config.ariaLabel ? null : ref.titleId,
+            ariaDescribedBy: config.ariaDescribedBy ?? null,
+            autoFocus: config.autoFocus ?? 'first-tabbable',
+            restoreFocus: true,
+            hasBackdrop: true,
+            backdropClass: 'nxe-drawer-backdrop',
+            panelClass: nxePane('nxe-drawer-pane', `nxe-drawer-${config.size ?? 'md'}`, `nxe-drawer-side-${side}`, ...[config.panelClass ?? []].flat()),
+            positionStrategy: side === 'start' ? position.start('0') : position.end('0'),
+            height: '100%',
+            viewContainerRef: config.viewContainerRef,
+            // Dismissal is decided below, as the dialog does, so `ref.disableClose` can change while it is open.
+            disableClose: true,
+            data: frame,
+        });
+        ref._attach(cdkRef);
+        cdkRef.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape' && !ref.disableClose && !hasModifierKey(event)) {
+                event.preventDefault();
+                ref.close();
+            }
+        });
+        cdkRef.backdropClick.subscribe(() => {
+            if (!ref.disableClose && config.backdropClose !== false) {
+                ref.close();
+            }
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let drawerSequence = 0;
+/**
+ * `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`.
+ */
+class NxeDrawerComponent {
+    dialog = inject(Dialog);
+    overlay = inject(Overlay);
+    viewContainer = inject(ViewContainerRef);
+    injector = inject(Injector);
+    messages = inject(NxeMessageService);
+    panel = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    aside = viewChild('aside', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aside" }] : /* istanbul ignore next */ []));
+    /** Whether the drawer is open. Two-way: `[(opened)]`. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** `overlay` (default, modal) or `push` (in the page's layout). */
+    mode = input('overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** `start` or `end` (default). */
+    side = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** `sm`, `md` (default), `lg`, `xl` or `full`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** The title, which also names the panel. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Accessible name when there is no `heading`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Show the close button. Default `true`. */
+    closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Esc and the scrim do not close it, and the close button is hidden. */
+    disableClose = input(false, { ...(ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether a click on the scrim closes an overlay drawer. Default `true`; only applies while `disableClose` is off. */
+    backdropClose = input(true, { ...(ngDevMode ? { debugName: "backdropClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** What takes initial focus in overlay mode: `first-tabbable` (default), `first-heading`, `dialog` or a CSS selector. */
+    autoFocus = input('first-tabbable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) for the overlay pane. */
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    uid = `nxe-drawer-${++drawerSequence}`;
+    titleId = `${this.uid}-title`;
+    closeLabel = computed(() => this.messages.t('common.close'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    pushed = computed(() => this.mode() === 'push', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pushed" }] : /* istanbul ignore next */ []));
+    /** The close button is hidden, not disabled, while `disableClose` is on. */
+    showClose = computed(() => this.closable() && !this.disableClose(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    /** Modal and open: the part that lives in the CDK overlay. */
+    overlayShown = computed(() => this.opened() && this.mode() === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayShown" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    returnFocusTo = null;
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        toObservable(this.overlayShown)
+            .pipe(takeUntilDestroyed())
+            .subscribe((shown) => (shown ? this.attachOverlay() : this.detachOverlay()));
+        // A push drawer takes focus when it opens and returns it when it closes; the first value (open at load) is left alone.
+        let first = true;
+        toObservable(computed(() => this.opened() && this.pushed()))
+            .pipe(takeUntilDestroyed())
+            .subscribe((shown) => {
+            if (first) {
+                first = false;
+                return;
+            }
+            if (shown) {
+                this.returnFocusTo = document.activeElement;
+                afterNextRender(() => this.aside()?.nativeElement.focus({ preventScroll: true }), { injector: this.injector });
+            }
+            else {
+                const aside = this.aside()?.nativeElement;
+                const target = this.returnFocusTo;
+                this.returnFocusTo = null;
+                // Only take focus back if it was in the panel (or lost with it): a click elsewhere keeps its own focus.
+                const active = document.activeElement;
+                if (target?.isConnected && (!active || active === document.body || aside?.contains(active))) {
+                    target.focus({ preventScroll: true });
+                }
+            }
+        });
+        destroyRef.onDestroy(() => this.detachOverlay());
+    }
+    open() {
+        this.opened.set(true);
+    }
+    close() {
+        this.opened.set(false);
+    }
+    toggle() {
+        this.opened.update((open) => !open);
+    }
+    /** The close button and Esc go through here so `disableClose` is honoured in one place. */
+    requestClose() {
+        if (!this.disableClose()) {
+            this.close();
+        }
+    }
+    onKeydown(event) {
+        if (this.pushed() && event.key === 'Escape' && !event.defaultPrevented && !hasModifierKey(event)) {
+            event.preventDefault();
+            this.requestClose();
+        }
+    }
+    attachOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const side = this.side();
+        const position = this.overlay.position().global().top('0');
+        const ref = this.dialog.open(this.panel(), {
+            id: this.uid,
+            role: 'dialog',
+            ariaModal: true,
+            ariaLabel: this.heading() ? null : (this.ariaLabel() ?? null),
+            ariaLabelledBy: this.heading() ? this.titleId : null,
+            autoFocus: this.autoFocus(),
+            restoreFocus: true,
+            hasBackdrop: true,
+            backdropClass: 'nxe-drawer-backdrop',
+            panelClass: nxePane('nxe-drawer-pane', `nxe-drawer-${this.size()}`, `nxe-drawer-side-${side}`, ...[this.panelClass()].flat()),
+            positionStrategy: side === 'start' ? position.start('0') : position.end('0'),
+            height: '100%',
+            viewContainerRef: this.viewContainer,
+            // Dismissal is decided here so `disableClose` can change while it is open.
+            disableClose: true,
+        });
+        this.overlayRef = ref;
+        ref.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape' && !this.disableClose() && !hasModifierKey(event)) {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        ref.backdropClick.subscribe(() => {
+            if (!this.disableClose() && this.backdropClose()) {
+                this.close();
+            }
+        });
+        // Something else closed it (`Dialog.closeAll()`): the model follows.
+        ref.closed.subscribe(() => {
+            if (this.overlayRef === ref) {
+                this.overlayRef = null;
+                this.opened.set(false);
+            }
+        });
+    }
+    detachOverlay() {
+        const ref = this.overlayRef;
+        this.overlayRef = null;
+        ref?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDrawerComponent, isStandalone: true, selector: "nxe-drawer", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "class.nxe-drawer-push": "mode() === 'push'" }, classAttribute: "nxe-drawer" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "aside", first: true, predicate: ["aside"], descendants: true, isSignal: true }], exportAs: ["nxeDrawer"], ngImport: i0, template: "<ng-template #panel>\r\n    <div class=\"nxe-drawer-frame\">\r\n        @if (heading() || showClose()) {\r\n            <header class=\"nxe-drawer-header\">\r\n                @if (heading()) {\r\n                    <h2 class=\"nxe-drawer-title\" [id]=\"titleId\">{{ heading() }}</h2>\r\n                }\r\n                @if (showClose()) {\r\n                    <button type=\"button\" class=\"nxe-drawer-close\" [attr.aria-label]=\"closeLabel()\" (click)=\"requestClose()\">\r\n                        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n                            <path d=\"M3.5 3.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\r\n                        </svg>\r\n                    </button>\r\n                }\r\n            </header>\r\n        }\r\n        <div class=\"nxe-drawer-body\"><ng-content /></div>\r\n        <div class=\"nxe-drawer-footer\"><ng-content select=\"[nxeDrawerFooter]\" /></div>\r\n    </div>\r\n</ng-template>\r\n\r\n@if (pushed()) {\r\n    <aside\r\n        #aside\r\n        class=\"nxe-drawer-aside nxe-drawer-{{ size() }} nxe-drawer-side-{{ side() }}\"\r\n        [class.nxe-drawer-open]=\"opened()\"\r\n        [attr.inert]=\"opened() ? null : ''\"\r\n        [attr.aria-labelledby]=\"heading() ? titleId : null\"\r\n        [attr.aria-label]=\"heading() ? null : (ariaLabel() ?? null)\"\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        <ng-container *ngTemplateOutlet=\"panel\" />\r\n    </aside>\r\n}\r\n", styles: [".cdk-overlay-pane.nxe-drawer-pane{--nxe-drawer-from: 100%;box-sizing:border-box;height:100%;max-width:100vw}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-sm{width:320px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-md{width:420px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-lg{width:560px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-xl{width:760px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-full{width:100vw}.cdk-overlay-pane.nxe-drawer-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end .cdk-dialog-container{border-inline-start:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start .cdk-dialog-container{border-inline-end:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start,[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end{--nxe-drawer-from: -100%}[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start{--nxe-drawer-from: 100%}.cdk-overlay-backdrop.nxe-drawer-backdrop{background:var(--nxe-ui-shell-scrim)}@media(prefers-reduced-motion:no-preference){.cdk-overlay-pane.nxe-drawer-pane{animation:nxe-drawer-in .22s ease-out}}@keyframes nxe-drawer-in{0%{transform:translate(var(--nxe-drawer-from))}to{transform:none}}.nxe-drawer-frame{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);color:var(--nxe-ui-text)}.nxe-drawer-frame .nxe-drawer-header{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:var(--nxe-ui-space-3);padding-block:var(--nxe-ui-space-4) var(--nxe-ui-space-2);padding-inline:var(--nxe-ui-space-4) var(--nxe-ui-space-3)}.nxe-drawer-frame .nxe-drawer-title{margin:0;font-size:var(--nxe-ui-font-size-xl);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xl);overflow-wrap:anywhere}.nxe-drawer-frame .nxe-drawer-close{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);margin-inline-start:auto;padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-neutral-600);cursor:pointer}.nxe-drawer-frame .nxe-drawer-close svg{width:14px;height:14px}.nxe-drawer-frame .nxe-drawer-close:hover{background:var(--nxe-ui-surface-alt);color:var(--nxe-ui-text)}.nxe-drawer-frame .nxe-drawer-close:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}.nxe-drawer-frame .nxe-drawer-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4) var(--nxe-ui-space-4)}.nxe-drawer-frame .nxe-drawer-footer{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border-top:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface)}.nxe-drawer-frame .nxe-drawer-footer:empty{display:none}nxe-drawer.nxe-drawer{display:none}nxe-drawer.nxe-drawer.nxe-drawer-push{display:contents}.nxe-drawer-aside{--nxe-drawer-width: 420px;box-sizing:border-box;display:flex;flex:none;flex-direction:column;align-self:stretch;width:0;max-width:100%;overflow:hidden;visibility:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);outline:none}.nxe-drawer-aside.nxe-drawer-sm{--nxe-drawer-width: 320px}.nxe-drawer-aside.nxe-drawer-md{--nxe-drawer-width: 420px}.nxe-drawer-aside.nxe-drawer-lg{--nxe-drawer-width: 560px}.nxe-drawer-aside.nxe-drawer-xl{--nxe-drawer-width: 760px}.nxe-drawer-aside.nxe-drawer-full{--nxe-drawer-width: 100%}.nxe-drawer-aside.nxe-drawer-open{width:var(--nxe-drawer-width);visibility:visible}.nxe-drawer-aside.nxe-drawer-open.nxe-drawer-side-start{border-inline-end:1px solid var(--nxe-ui-border)}.nxe-drawer-aside.nxe-drawer-open.nxe-drawer-side-end{border-inline-start:1px solid var(--nxe-ui-border)}.nxe-drawer-aside>.nxe-drawer-frame{width:calc(var(--nxe-drawer-width) - 1px);max-width:100vw;min-width:0}@media(prefers-reduced-motion:no-preference){.nxe-drawer-aside{transition:width .22s ease,visibility 0s linear .22s}.nxe-drawer-aside.nxe-drawer-open{transition:width .22s ease,visibility 0s linear 0s}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-drawer', exportAs: 'nxeDrawer', imports: [NgTemplateOutlet], host: {
+                        class: 'nxe-drawer',
+                        '[class.nxe-drawer-push]': "mode() === 'push'",
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #panel>\r\n    <div class=\"nxe-drawer-frame\">\r\n        @if (heading() || showClose()) {\r\n            <header class=\"nxe-drawer-header\">\r\n                @if (heading()) {\r\n                    <h2 class=\"nxe-drawer-title\" [id]=\"titleId\">{{ heading() }}</h2>\r\n                }\r\n                @if (showClose()) {\r\n                    <button type=\"button\" class=\"nxe-drawer-close\" [attr.aria-label]=\"closeLabel()\" (click)=\"requestClose()\">\r\n                        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\">\r\n                            <path d=\"M3.5 3.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" />\r\n                        </svg>\r\n                    </button>\r\n                }\r\n            </header>\r\n        }\r\n        <div class=\"nxe-drawer-body\"><ng-content /></div>\r\n        <div class=\"nxe-drawer-footer\"><ng-content select=\"[nxeDrawerFooter]\" /></div>\r\n    </div>\r\n</ng-template>\r\n\r\n@if (pushed()) {\r\n    <aside\r\n        #aside\r\n        class=\"nxe-drawer-aside nxe-drawer-{{ size() }} nxe-drawer-side-{{ side() }}\"\r\n        [class.nxe-drawer-open]=\"opened()\"\r\n        [attr.inert]=\"opened() ? null : ''\"\r\n        [attr.aria-labelledby]=\"heading() ? titleId : null\"\r\n        [attr.aria-label]=\"heading() ? null : (ariaLabel() ?? null)\"\r\n        tabindex=\"-1\"\r\n        (keydown)=\"onKeydown($event)\">\r\n        <ng-container *ngTemplateOutlet=\"panel\" />\r\n    </aside>\r\n}\r\n", styles: [".cdk-overlay-pane.nxe-drawer-pane{--nxe-drawer-from: 100%;box-sizing:border-box;height:100%;max-width:100vw}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-sm{width:320px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-md{width:420px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-lg{width:560px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-xl{width:760px}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-full{width:100vw}.cdk-overlay-pane.nxe-drawer-pane .cdk-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);box-shadow:var(--nxe-ui-shadow-lg);outline:none}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end .cdk-dialog-container{border-inline-start:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start .cdk-dialog-container{border-inline-end:1px solid var(--nxe-ui-border)}.cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start,[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-end{--nxe-drawer-from: -100%}[dir=rtl] .cdk-overlay-pane.nxe-drawer-pane.nxe-drawer-side-start{--nxe-drawer-from: 100%}.cdk-overlay-backdrop.nxe-drawer-backdrop{background:var(--nxe-ui-shell-scrim)}@media(prefers-reduced-motion:no-preference){.cdk-overlay-pane.nxe-drawer-pane{animation:nxe-drawer-in .22s ease-out}}@keyframes nxe-drawer-in{0%{transform:translate(var(--nxe-drawer-from))}to{transform:none}}.nxe-drawer-frame{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size-md);line-height:var(--nxe-ui-line-height-md);color:var(--nxe-ui-text)}.nxe-drawer-frame .nxe-drawer-header{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:var(--nxe-ui-space-3);padding-block:var(--nxe-ui-space-4) var(--nxe-ui-space-2);padding-inline:var(--nxe-ui-space-4) var(--nxe-ui-space-3)}.nxe-drawer-frame .nxe-drawer-title{margin:0;font-size:var(--nxe-ui-font-size-xl);font-weight:var(--nxe-ui-font-weight-semibold);line-height:var(--nxe-ui-line-height-xl);overflow-wrap:anywhere}.nxe-drawer-frame .nxe-drawer-close{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--nxe-ui-space-6);height:var(--nxe-ui-space-6);margin-inline-start:auto;padding:0;border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-neutral-600);cursor:pointer}.nxe-drawer-frame .nxe-drawer-close svg{width:14px;height:14px}.nxe-drawer-frame .nxe-drawer-close:hover{background:var(--nxe-ui-surface-alt);color:var(--nxe-ui-text)}.nxe-drawer-frame .nxe-drawer-close:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring)}.nxe-drawer-frame .nxe-drawer-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--nxe-ui-space-2) var(--nxe-ui-space-4) var(--nxe-ui-space-4)}.nxe-drawer-frame .nxe-drawer-footer{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:var(--nxe-ui-space-2);padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border-top:1px solid var(--nxe-ui-border);background:var(--nxe-ui-surface)}.nxe-drawer-frame .nxe-drawer-footer:empty{display:none}nxe-drawer.nxe-drawer{display:none}nxe-drawer.nxe-drawer.nxe-drawer-push{display:contents}.nxe-drawer-aside{--nxe-drawer-width: 420px;box-sizing:border-box;display:flex;flex:none;flex-direction:column;align-self:stretch;width:0;max-width:100%;overflow:hidden;visibility:hidden;background:var(--nxe-ui-surface);color:var(--nxe-ui-text);outline:none}.nxe-drawer-aside.nxe-drawer-sm{--nxe-drawer-width: 320px}.nxe-drawer-aside.nxe-drawer-md{--nxe-drawer-width: 420px}.nxe-drawer-aside.nxe-drawer-lg{--nxe-drawer-width: 560px}.nxe-drawer-aside.nxe-drawer-xl{--nxe-drawer-width: 760px}.nxe-drawer-aside.nxe-drawer-full{--nxe-drawer-width: 100%}.nxe-drawer-aside.nxe-drawer-open{width:var(--nxe-drawer-width);visibility:visible}.nxe-drawer-aside.nxe-drawer-open.nxe-drawer-side-start{border-inline-end:1px solid var(--nxe-ui-border)}.nxe-drawer-aside.nxe-drawer-open.nxe-drawer-side-end{border-inline-start:1px solid var(--nxe-ui-border)}.nxe-drawer-aside>.nxe-drawer-frame{width:calc(var(--nxe-drawer-width) - 1px);max-width:100vw;min-width:0}@media(prefers-reduced-motion:no-preference){.nxe-drawer-aside{transition:width .22s ease,visibility 0s linear .22s}.nxe-drawer-aside.nxe-drawer-open{transition:width .22s ease,visibility 0s linear 0s}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], aside: [{ type: i0.ViewChild, args: ['aside', { isSignal: true }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], backdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClose", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }] } });
+
+// @nexterajs/ui/overlay — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_DIALOG_DATA, NXE_DRAWER_DATA, NxeConfirmService, NxeDialogActionsDirective, NxeDialogContentDirective, NxeDialogRef, NxeDialogService, NxeDialogTitleDirective, NxeDrawerComponent, NxeDrawerRef, NxeDrawerService, NxeMenuComponent, NxeMenuDividerComponent, NxeMenuItemComponent, NxeMenuTriggerForDirective, NxePopoverComponent, NxePopoverTriggerForDirective, NxeTooltipDirective };
+//# sourceMappingURL=nexterajs-ui-overlay.mjs.map