@memberjunction/ng-ui-components 5.44.0 → 5.45.0

package/dist/lib/confirm-dialog/confirm-dialog.component.d.ts

@@ -0,0 +1,102 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Visual intent of an `<mj-confirm-dialog>`. Drives the header icon and the
+ * confirm button's color, so callers rarely restate either.
+ *
+ * - `default` — a neutral question (e.g. "Discard unsaved changes?"). Blue confirm button.
+ * - `danger`  — a destructive / irreversible action (delete). Red confirm button.
+ * - `warning` — a non-destructive but consequential action. Blue confirm button, caution icon.
+ * - `info`    — an informational confirmation. Blue confirm button, info icon.
+ */
+export type MJConfirmDialogType = 'default' | 'danger' | 'warning' | 'info';
+/**
+ * mj-confirm-dialog — Canonical confirmation prompt. The shared replacement for
+ * native `window.confirm()` and the many hand-rolled "Are you sure?" modals
+ * (`@if (showDeleteConfirm) { … backdrop + centered dialog }`) scattered across
+ * the app, plus the duplicate local `mj-confirm-dialog` / `mj-ev-confirm-dialog`
+ * components.
+ *
+ * Built on `<mj-dialog>` (so it inherits the backdrop, animations, mobile
+ * full-screen behavior, and Esc/backdrop handling) and uses `role="alertdialog"`
+ * for screen readers. Buttons follow the MJ convention: the affirmative action
+ * is **leftmost**, Cancel on the right.
+ *
+ * Visibility is two-way bindable. Cancelling (Cancel button, backdrop, Esc, or
+ * the ✕) auto-closes and emits `Cancelled`. Confirming emits `Confirmed` and
+ * **leaves the dialog open** so the handler can run async work — set `Visible`
+ * to `false` (or update your bound property) when done. Bind `[Processing]` to a
+ * loading flag during that async work to show a spinner, disable both buttons,
+ * and block dismissal until it completes.
+ *
+ * Usage:
+ * ```html
+ * <!-- Simple destructive confirm -->
+ * <mj-confirm-dialog
+ *   [(Visible)]="showDeleteConfirm"
+ *   Type="danger"
+ *   Title="Delete view"
+ *   Message="Are you sure you want to delete this view?"
+ *   DetailMessage="This action cannot be undone."
+ *   ConfirmText="Delete"
+ *   (Confirmed)="onDeleteConfirmed()">
+ * </mj-confirm-dialog>
+ *
+ * <!-- Async confirm with a spinner while the work runs -->
+ * <mj-confirm-dialog
+ *   [(Visible)]="confirmOpen"
+ *   [Processing]="isDeleting"
+ *   Type="danger" Title="Delete user" Message="Remove this user permanently?"
+ *   ConfirmText="Delete" (Confirmed)="deleteUser()">
+ * </mj-confirm-dialog>
+ * ```
+ */
+export declare class MJConfirmDialogComponent {
+    /** Whether the dialog is shown. Two-way bindable: `[(Visible)]`. */
+    Visible: boolean;
+    /** Two-way `Visible` change channel — fires when the dialog auto-closes on cancel. */
+    VisibleChange: EventEmitter<boolean>;
+    /** Heading shown in the dialog title bar. */
+    Title: string;
+    /** Primary prompt text. For rich content, project default `<ng-content>` instead. */
+    Message: string;
+    /** Optional secondary line, rendered smaller/muted beneath the message. */
+    DetailMessage: string;
+    /** Visual intent — drives the header icon + confirm button color. Defaults to 'default'. */
+    Type: MJConfirmDialogType;
+    /** Affirmative button label. */
+    ConfirmText: string;
+    /** Dismiss button label. */
+    CancelText: string;
+    /**
+     * Font Awesome icon class (e.g. "fa-solid fa-trash") for the header. When
+     * omitted, a sensible default is chosen from `Type`. Set to `''` for no icon.
+     */
+    Icon: string | null;
+    /**
+     * When true, shows a spinner on the confirm button, disables both buttons, and
+     * blocks dismissal (Esc / backdrop / ✕) — bind this to your loading flag while
+     * the `Confirmed` handler runs async work.
+     */
+    Processing: boolean;
+    /** Fired when the user confirms. The dialog stays open; close it when ready. */
+    Confirmed: EventEmitter<void>;
+    /** Fired when the user cancels (button, backdrop, Esc, or ✕). The dialog auto-closes. */
+    Cancelled: EventEmitter<void>;
+    /** mjButton variant for the confirm button — red for `danger`, blue otherwise. */
+    get ConfirmVariant(): 'primary' | 'danger';
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including `""`
+     * to suppress it), otherwise the per-type default.
+     */
+    get ResolvedIcon(): string;
+    onConfirm(): void;
+    onCancel(): void;
+    /** Backdrop / Esc / ✕ from the underlying dialog — ignored while Processing. */
+    onDismiss(): void;
+    private close;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJConfirmDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJConfirmDialogComponent, "mj-confirm-dialog", never, { "Visible": { "alias": "Visible"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "DetailMessage": { "alias": "DetailMessage"; "required": false; }; "Type": { "alias": "Type"; "required": false; }; "ConfirmText": { "alias": "ConfirmText"; "required": false; }; "CancelText": { "alias": "CancelText"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "Processing": { "alias": "Processing"; "required": false; }; }, { "VisibleChange": "VisibleChange"; "Confirmed": "Confirmed"; "Cancelled": "Cancelled"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_Processing: unknown;
+}
+//# sourceMappingURL=confirm-dialog.component.d.ts.map

package/dist/lib/confirm-dialog/confirm-dialog.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.component.d.ts","sourceRoot":"","sources":["../../../src/lib/confirm-dialog/confirm-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAmC,MAAM,eAAe,CAAC;;AAIzF;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAS5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBA+Ea,wBAAwB;IACnC,oEAAoE;IAC3D,OAAO,UAAS;IACzB,sFAAsF;IAC5E,aAAa,wBAA+B;IAEtD,6CAA6C;IACpC,KAAK,SAAa;IAE3B,qFAAqF;IAC5E,OAAO,SAAmB;IAEnC,2EAA2E;IAClE,aAAa,SAAM;IAE5B,4FAA4F;IACnF,IAAI,EAAE,mBAAmB,CAAa;IAE/C,gCAAgC;IACvB,WAAW,SAAa;IAEjC,4BAA4B;IACnB,UAAU,SAAY;IAE/B;;;OAGG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC;;;;OAIG;IACqC,UAAU,UAAS;IAE3D,gFAAgF;IACtE,SAAS,qBAA4B;IAE/C,yFAAyF;IAC/E,SAAS,qBAA4B;IAE/C,kFAAkF;IAClF,IAAI,cAAc,IAAI,SAAS,GAAG,QAAQ,CAEzC;IAED;;;OAGG;IACH,IAAI,YAAY,IAAI,MAAM,CAKzB;IAED,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;IAKhB,gFAAgF;IAChF,SAAS,IAAI,IAAI;IAOjB,OAAO,CAAC,KAAK;yCA5EF,wBAAwB;2CAAxB,wBAAwB;yCAiFms7L,OAAQ;CAD/u7L"}

package/dist/lib/confirm-dialog/confirm-dialog.component.js

@@ -0,0 +1,259 @@
+import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';
+import { MJDialogComponent, MJDialogActionsComponent } from '../dialog/dialog.component';
+import { MJButtonDirective } from '../button/button.directive';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function MJConfirmDialogComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 9);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(i0.ɵɵinterpolate2("mj-confirm__icon mj-confirm__icon--", ctx_r0.Type, " ", ctx_r0.ResolvedIcon));
+} }
+function MJConfirmDialogComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Message);
+} }
+function MJConfirmDialogComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.DetailMessage);
+} }
+function MJConfirmDialogComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 7);
+} }
+const DEFAULT_ICONS = {
+    default: 'fa-solid fa-circle-question',
+    danger: 'fa-solid fa-triangle-exclamation',
+    warning: 'fa-solid fa-triangle-exclamation',
+    info: 'fa-solid fa-circle-info',
+};
+/**
+ * mj-confirm-dialog — Canonical confirmation prompt. The shared replacement for
+ * native `window.confirm()` and the many hand-rolled "Are you sure?" modals
+ * (`@if (showDeleteConfirm) { … backdrop + centered dialog }`) scattered across
+ * the app, plus the duplicate local `mj-confirm-dialog` / `mj-ev-confirm-dialog`
+ * components.
+ *
+ * Built on `<mj-dialog>` (so it inherits the backdrop, animations, mobile
+ * full-screen behavior, and Esc/backdrop handling) and uses `role="alertdialog"`
+ * for screen readers. Buttons follow the MJ convention: the affirmative action
+ * is **leftmost**, Cancel on the right.
+ *
+ * Visibility is two-way bindable. Cancelling (Cancel button, backdrop, Esc, or
+ * the ✕) auto-closes and emits `Cancelled`. Confirming emits `Confirmed` and
+ * **leaves the dialog open** so the handler can run async work — set `Visible`
+ * to `false` (or update your bound property) when done. Bind `[Processing]` to a
+ * loading flag during that async work to show a spinner, disable both buttons,
+ * and block dismissal until it completes.
+ *
+ * Usage:
+ * ```html
+ * <!-- Simple destructive confirm -->
+ * <mj-confirm-dialog
+ *   [(Visible)]="showDeleteConfirm"
+ *   Type="danger"
+ *   Title="Delete view"
+ *   Message="Are you sure you want to delete this view?"
+ *   DetailMessage="This action cannot be undone."
+ *   ConfirmText="Delete"
+ *   (Confirmed)="onDeleteConfirmed()">
+ * </mj-confirm-dialog>
+ *
+ * <!-- Async confirm with a spinner while the work runs -->
+ * <mj-confirm-dialog
+ *   [(Visible)]="confirmOpen"
+ *   [Processing]="isDeleting"
+ *   Type="danger" Title="Delete user" Message="Remove this user permanently?"
+ *   ConfirmText="Delete" (Confirmed)="deleteUser()">
+ * </mj-confirm-dialog>
+ * ```
+ */
+export class MJConfirmDialogComponent {
+    /** Whether the dialog is shown. Two-way bindable: `[(Visible)]`. */
+    Visible = false;
+    /** Two-way `Visible` change channel — fires when the dialog auto-closes on cancel. */
+    VisibleChange = new EventEmitter();
+    /** Heading shown in the dialog title bar. */
+    Title = 'Confirm';
+    /** Primary prompt text. For rich content, project default `<ng-content>` instead. */
+    Message = 'Are you sure?';
+    /** Optional secondary line, rendered smaller/muted beneath the message. */
+    DetailMessage = '';
+    /** Visual intent — drives the header icon + confirm button color. Defaults to 'default'. */
+    Type = 'default';
+    /** Affirmative button label. */
+    ConfirmText = 'Confirm';
+    /** Dismiss button label. */
+    CancelText = 'Cancel';
+    /**
+     * Font Awesome icon class (e.g. "fa-solid fa-trash") for the header. When
+     * omitted, a sensible default is chosen from `Type`. Set to `''` for no icon.
+     */
+    Icon = null;
+    /**
+     * When true, shows a spinner on the confirm button, disables both buttons, and
+     * blocks dismissal (Esc / backdrop / ✕) — bind this to your loading flag while
+     * the `Confirmed` handler runs async work.
+     */
+    Processing = false;
+    /** Fired when the user confirms. The dialog stays open; close it when ready. */
+    Confirmed = new EventEmitter();
+    /** Fired when the user cancels (button, backdrop, Esc, or ✕). The dialog auto-closes. */
+    Cancelled = new EventEmitter();
+    /** mjButton variant for the confirm button — red for `danger`, blue otherwise. */
+    get ConfirmVariant() {
+        return this.Type === 'danger' ? 'danger' : 'primary';
+    }
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including `""`
+     * to suppress it), otherwise the per-type default.
+     */
+    get ResolvedIcon() {
+        if (this.Icon != null) {
+            return this.Icon;
+        }
+        return DEFAULT_ICONS[this.Type] ?? DEFAULT_ICONS.default;
+    }
+    onConfirm() {
+        this.Confirmed.emit();
+    }
+    onCancel() {
+        this.close();
+        this.Cancelled.emit();
+    }
+    /** Backdrop / Esc / ✕ from the underlying dialog — ignored while Processing. */
+    onDismiss() {
+        if (this.Processing) {
+            return;
+        }
+        this.onCancel();
+    }
+    close() {
+        this.Visible = false;
+        this.VisibleChange.emit(false);
+    }
+    static ɵfac = function MJConfirmDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJConfirmDialogComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJConfirmDialogComponent, selectors: [["mj-confirm-dialog"]], inputs: { Visible: "Visible", Title: "Title", Message: "Message", DetailMessage: "DetailMessage", Type: "Type", ConfirmText: "ConfirmText", CancelText: "CancelText", Icon: "Icon", Processing: [2, "Processing", "Processing", booleanAttribute] }, outputs: { VisibleChange: "VisibleChange", Confirmed: "Confirmed", Cancelled: "Cancelled" }, ngContentSelectors: _c0, decls: 13, vars: 12, consts: [["Size", "sm", "Role", "alertdialog", 3, "Close", "Visible", "Title", "Closeable"], [1, "mj-confirm"], ["aria-hidden", "true", 3, "class"], [1, "mj-confirm__body"], [1, "mj-confirm__message"], [1, "mj-confirm__detail"], ["mjButton", "", 3, "click", "variant", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["mjButton", "", "variant", "secondary", 3, "click", "disabled"], ["aria-hidden", "true"]], template: function MJConfirmDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "mj-dialog", 0);
+            i0.ɵɵlistener("Close", function MJConfirmDialogComponent_Template_mj_dialog_Close_0_listener() { return ctx.onDismiss(); });
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵconditionalCreate(2, MJConfirmDialogComponent_Conditional_2_Template, 1, 4, "i", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵconditionalCreate(4, MJConfirmDialogComponent_Conditional_4_Template, 2, 1, "p", 4);
+            i0.ɵɵconditionalCreate(5, MJConfirmDialogComponent_Conditional_5_Template, 2, 1, "p", 5);
+            i0.ɵɵprojection(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "mj-dialog-actions")(8, "button", 6);
+            i0.ɵɵlistener("click", function MJConfirmDialogComponent_Template_button_click_8_listener() { return ctx.onConfirm(); });
+            i0.ɵɵconditionalCreate(9, MJConfirmDialogComponent_Conditional_9_Template, 1, 0, "i", 7);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 8);
+            i0.ɵɵlistener("click", function MJConfirmDialogComponent_Template_button_click_11_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(12);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("Visible", ctx.Visible)("Title", ctx.Title)("Closeable", !ctx.Processing);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.ResolvedIcon ? 2 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Message ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.DetailMessage ? 5 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("variant", ctx.ConfirmVariant)("disabled", ctx.Processing);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Processing ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.ConfirmText, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("disabled", ctx.Processing);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.CancelText, " ");
+        } }, dependencies: [MJDialogComponent, MJDialogActionsComponent, MJButtonDirective], styles: [".mj-confirm[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--mj-space-3);\n    }\n    .mj-confirm__icon[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      font-size: 1.5rem;\n      margin-top: 0.05em;\n      color: var(--mj-text-muted);\n    }\n    .mj-confirm__icon--danger[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .mj-confirm__icon--warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .mj-confirm__icon--info[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n\n    .mj-confirm__body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .mj-confirm__message[_ngcontent-%COMP%] {\n      margin: 0;\n      color: var(--mj-text-primary);\n      line-height: 1.5;\n    }\n    .mj-confirm__detail[_ngcontent-%COMP%] {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-secondary);\n      line-height: 1.45;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJConfirmDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-confirm-dialog', standalone: true, imports: [MJDialogComponent, MJDialogActionsComponent, MJButtonDirective], template: `
+    <mj-dialog
+      [Visible]="Visible"
+      [Title]="Title"
+      Size="sm"
+      Role="alertdialog"
+      [Closeable]="!Processing"
+      (Close)="onDismiss()">
+
+      <div class="mj-confirm">
+        @if (ResolvedIcon) {
+          <i class="mj-confirm__icon mj-confirm__icon--{{ Type }} {{ ResolvedIcon }}" aria-hidden="true"></i>
+        }
+        <div class="mj-confirm__body">
+          @if (Message) {
+            <p class="mj-confirm__message">{{ Message }}</p>
+          }
+          @if (DetailMessage) {
+            <p class="mj-confirm__detail">{{ DetailMessage }}</p>
+          }
+          <ng-content></ng-content>
+        </div>
+      </div>
+
+      <mj-dialog-actions>
+        <button
+          mjButton
+          [variant]="ConfirmVariant"
+          [disabled]="Processing"
+          (click)="onConfirm()">
+          @if (Processing) {
+            <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i>
+          }
+          {{ ConfirmText }}
+        </button>
+        <button
+          mjButton
+          variant="secondary"
+          [disabled]="Processing"
+          (click)="onCancel()">
+          {{ CancelText }}
+        </button>
+      </mj-dialog-actions>
+    </mj-dialog>
+  `, styles: ["\n    .mj-confirm {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--mj-space-3);\n    }\n    .mj-confirm__icon {\n      flex-shrink: 0;\n      font-size: 1.5rem;\n      margin-top: 0.05em;\n      color: var(--mj-text-muted);\n    }\n    .mj-confirm__icon--danger { color: var(--mj-status-error); }\n    .mj-confirm__icon--warning { color: var(--mj-status-warning); }\n    .mj-confirm__icon--info { color: var(--mj-status-info); }\n\n    .mj-confirm__body { flex: 1; min-width: 0; }\n    .mj-confirm__message {\n      margin: 0;\n      color: var(--mj-text-primary);\n      line-height: 1.5;\n    }\n    .mj-confirm__detail {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-secondary);\n      line-height: 1.45;\n    }\n  "] }]
+    }], null, { Visible: [{
+            type: Input
+        }], VisibleChange: [{
+            type: Output
+        }], Title: [{
+            type: Input
+        }], Message: [{
+            type: Input
+        }], DetailMessage: [{
+            type: Input
+        }], Type: [{
+            type: Input
+        }], ConfirmText: [{
+            type: Input
+        }], CancelText: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], Processing: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
+        }], Confirmed: [{
+            type: Output
+        }], Cancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJConfirmDialogComponent, { className: "MJConfirmDialogComponent", filePath: "lib/confirm-dialog/confirm-dialog.component.ts", lineNumber: 143 }); })();
+//# sourceMappingURL=confirm-dialog.component.js.map

package/dist/lib/confirm-dialog/confirm-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.component.js","sourceRoot":"","sources":["../../../src/lib/confirm-dialog/confirm-dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';\nimport { MJDialogComponent, MJDialogActionsComponent } from '../dialog/dialog.component';\nimport { MJButtonDirective } from '../button/button.directive';\n\n/**\n * Visual intent of an `<mj-confirm-dialog>`. Drives the header icon and the\n * confirm button's color, so callers rarely restate either.\n *\n * - `default` — a neutral question (e.g. \"Discard unsaved changes?\"). Blue confirm button.\n * - `danger`  — a destructive / irreversible action (delete). Red confirm button.\n * - `warning` — a non-destructive but consequential action. Blue confirm button, caution icon.\n * - `info`    — an informational confirmation. Blue confirm button, info icon.\n */\nexport type MJConfirmDialogType = 'default' | 'danger' | 'warning' | 'info';\n\nconst DEFAULT_ICONS: Record<MJConfirmDialogType, string> = {\n  default: 'fa-solid fa-circle-question',\n  danger: 'fa-solid fa-triangle-exclamation',\n  warning: 'fa-solid fa-triangle-exclamation',\n  info: 'fa-solid fa-circle-info',\n};\n\n/**\n * mj-confirm-dialog — Canonical confirmation prompt. The shared replacement for\n * native `window.confirm()` and the many hand-rolled \"Are you sure?\" modals\n * (`@if (showDeleteConfirm) { … backdrop + centered dialog }`) scattered across\n * the app, plus the duplicate local `mj-confirm-dialog` / `mj-ev-confirm-dialog`\n * components.\n *\n * Built on `<mj-dialog>` (so it inherits the backdrop, animations, mobile\n * full-screen behavior, and Esc/backdrop handling) and uses `role=\"alertdialog\"`\n * for screen readers. Buttons follow the MJ convention: the affirmative action\n * is **leftmost**, Cancel on the right.\n *\n * Visibility is two-way bindable. Cancelling (Cancel button, backdrop, Esc, or\n * the ✕) auto-closes and emits `Cancelled`. Confirming emits `Confirmed` and\n * **leaves the dialog open** so the handler can run async work — set `Visible`\n * to `false` (or update your bound property) when done. Bind `[Processing]` to a\n * loading flag during that async work to show a spinner, disable both buttons,\n * and block dismissal until it completes.\n *\n * Usage:\n * ```html\n * <!-- Simple destructive confirm -->\n * <mj-confirm-dialog\n *   [(Visible)]=\"showDeleteConfirm\"\n *   Type=\"danger\"\n *   Title=\"Delete view\"\n *   Message=\"Are you sure you want to delete this view?\"\n *   DetailMessage=\"This action cannot be undone.\"\n *   ConfirmText=\"Delete\"\n *   (Confirmed)=\"onDeleteConfirmed()\">\n * </mj-confirm-dialog>\n *\n * <!-- Async confirm with a spinner while the work runs -->\n * <mj-confirm-dialog\n *   [(Visible)]=\"confirmOpen\"\n *   [Processing]=\"isDeleting\"\n *   Type=\"danger\" Title=\"Delete user\" Message=\"Remove this user permanently?\"\n *   ConfirmText=\"Delete\" (Confirmed)=\"deleteUser()\">\n * </mj-confirm-dialog>\n * ```\n */\n@Component({\n  selector: 'mj-confirm-dialog',\n  standalone: true,\n  imports: [MJDialogComponent, MJDialogActionsComponent, MJButtonDirective],\n  template: `\n    <mj-dialog\n      [Visible]=\"Visible\"\n      [Title]=\"Title\"\n      Size=\"sm\"\n      Role=\"alertdialog\"\n      [Closeable]=\"!Processing\"\n      (Close)=\"onDismiss()\">\n\n      <div class=\"mj-confirm\">\n        @if (ResolvedIcon) {\n          <i class=\"mj-confirm__icon mj-confirm__icon--{{ Type }} {{ ResolvedIcon }}\" aria-hidden=\"true\"></i>\n        }\n        <div class=\"mj-confirm__body\">\n          @if (Message) {\n            <p class=\"mj-confirm__message\">{{ Message }}</p>\n          }\n          @if (DetailMessage) {\n            <p class=\"mj-confirm__detail\">{{ DetailMessage }}</p>\n          }\n          <ng-content></ng-content>\n        </div>\n      </div>\n\n      <mj-dialog-actions>\n        <button\n          mjButton\n          [variant]=\"ConfirmVariant\"\n          [disabled]=\"Processing\"\n          (click)=\"onConfirm()\">\n          @if (Processing) {\n            <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n          }\n          {{ ConfirmText }}\n        </button>\n        <button\n          mjButton\n          variant=\"secondary\"\n          [disabled]=\"Processing\"\n          (click)=\"onCancel()\">\n          {{ CancelText }}\n        </button>\n      </mj-dialog-actions>\n    </mj-dialog>\n  `,\n  styles: [`\n    .mj-confirm {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--mj-space-3);\n    }\n    .mj-confirm__icon {\n      flex-shrink: 0;\n      font-size: 1.5rem;\n      margin-top: 0.05em;\n      color: var(--mj-text-muted);\n    }\n    .mj-confirm__icon--danger { color: var(--mj-status-error); }\n    .mj-confirm__icon--warning { color: var(--mj-status-warning); }\n    .mj-confirm__icon--info { color: var(--mj-status-info); }\n\n    .mj-confirm__body { flex: 1; min-width: 0; }\n    .mj-confirm__message {\n      margin: 0;\n      color: var(--mj-text-primary);\n      line-height: 1.5;\n    }\n    .mj-confirm__detail {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-secondary);\n      line-height: 1.45;\n    }\n  `]\n})\nexport class MJConfirmDialogComponent {\n  /** Whether the dialog is shown. Two-way bindable: `[(Visible)]`. */\n  @Input() Visible = false;\n  /** Two-way `Visible` change channel — fires when the dialog auto-closes on cancel. */\n  @Output() VisibleChange = new EventEmitter<boolean>();\n\n  /** Heading shown in the dialog title bar. */\n  @Input() Title = 'Confirm';\n\n  /** Primary prompt text. For rich content, project default `<ng-content>` instead. */\n  @Input() Message = 'Are you sure?';\n\n  /** Optional secondary line, rendered smaller/muted beneath the message. */\n  @Input() DetailMessage = '';\n\n  /** Visual intent — drives the header icon + confirm button color. Defaults to 'default'. */\n  @Input() Type: MJConfirmDialogType = 'default';\n\n  /** Affirmative button label. */\n  @Input() ConfirmText = 'Confirm';\n\n  /** Dismiss button label. */\n  @Input() CancelText = 'Cancel';\n\n  /**\n   * Font Awesome icon class (e.g. \"fa-solid fa-trash\") for the header. When\n   * omitted, a sensible default is chosen from `Type`. Set to `''` for no icon.\n   */\n  @Input() Icon: string | null = null;\n\n  /**\n   * When true, shows a spinner on the confirm button, disables both buttons, and\n   * blocks dismissal (Esc / backdrop / ✕) — bind this to your loading flag while\n   * the `Confirmed` handler runs async work.\n   */\n  @Input({ transform: booleanAttribute }) Processing = false;\n\n  /** Fired when the user confirms. The dialog stays open; close it when ready. */\n  @Output() Confirmed = new EventEmitter<void>();\n\n  /** Fired when the user cancels (button, backdrop, Esc, or ✕). The dialog auto-closes. */\n  @Output() Cancelled = new EventEmitter<void>();\n\n  /** mjButton variant for the confirm button — red for `danger`, blue otherwise. */\n  get ConfirmVariant(): 'primary' | 'danger' {\n    return this.Type === 'danger' ? 'danger' : 'primary';\n  }\n\n  /**\n   * Icon actually rendered: the explicit `Icon` when provided (including `\"\"`\n   * to suppress it), otherwise the per-type default.\n   */\n  get ResolvedIcon(): string {\n    if (this.Icon != null) {\n      return this.Icon;\n    }\n    return DEFAULT_ICONS[this.Type] ?? DEFAULT_ICONS.default;\n  }\n\n  onConfirm(): void {\n    this.Confirmed.emit();\n  }\n\n  onCancel(): void {\n    this.close();\n    this.Cancelled.emit();\n  }\n\n  /** Backdrop / Esc / ✕ from the underlying dialog — ignored while Processing. */\n  onDismiss(): void {\n    if (this.Processing) {\n      return;\n    }\n    this.onCancel();\n  }\n\n  private close(): void {\n    this.Visible = false;\n    this.VisibleChange.emit(false);\n  }\n}\n"]}

package/dist/lib/confirm-dialog/confirm-dialog.service.d.ts

@@ -0,0 +1,78 @@
+import { MJConfirmDialogType } from './confirm-dialog.component';
+import * as i0 from "@angular/core";
+/**
+ * Options for {@link MJConfirmService.Confirm}. Mirror the `<mj-confirm-dialog>`
+ * inputs, but in a flat options bag suited to an imperative call.
+ */
+export interface MJConfirmOptions {
+    /** Primary prompt text. */
+    message: string;
+    /** Title-bar heading. Defaults to 'Confirm'. */
+    title?: string;
+    /** Optional secondary line, rendered smaller/muted beneath the message. */
+    detail?: string;
+    /** Visual intent — drives the header icon + confirm button color. Defaults to 'default'. */
+    type?: MJConfirmDialogType;
+    /** Affirmative button label. Defaults to 'Confirm'. */
+    confirmText?: string;
+    /** Dismiss button label. Defaults to 'Cancel'. */
+    cancelText?: string;
+    /** Font Awesome icon override (e.g. "fa-solid fa-trash"). `''` suppresses the icon. */
+    icon?: string;
+}
+/**
+ * MJConfirmService — Imperative, Promise-based confirmation prompts.
+ *
+ * The one-liner replacement for native `window.confirm()` (an anti-pattern this
+ * codebase bans) and for the boilerplate of wiring `<mj-confirm-dialog>` into a
+ * template just to ask a yes/no question. It dynamically mounts an
+ * `MJConfirmDialogComponent` to `document.body`, shows it, and resolves a
+ * `Promise<boolean>` — `true` on confirm, `false` on cancel/backdrop/Esc — then
+ * tears the component down.
+ *
+ * @example
+ * ```typescript
+ * private confirm = inject(MJConfirmService);
+ *
+ * // Simplest — replaces `if (window.confirm('Discard changes?')) { ... }`
+ * if (await this.confirm.Confirm('Discard unsaved changes?')) {
+ *   this.discard();
+ * }
+ *
+ * // Destructive delete with a detail line
+ * if (await this.confirm.ConfirmDelete({
+ *   message: 'Delete this user?',
+ *   detail: 'This action cannot be undone.',
+ * })) {
+ *   await this.deleteUser();
+ * }
+ * ```
+ *
+ * **Async work after confirm:** because this resolves a boolean, the dialog has
+ * already closed by the time your `await` continues — there's no in-dialog
+ * spinner. When you need a "keep open + spinner while I save" UX, use the
+ * `<mj-confirm-dialog>` component directly with its `Processing` input instead.
+ *
+ * **Synchronous guards:** `window.confirm` blocks the thread; a synchronous
+ * `CanClose`/`beforeunload` guard that must return a boolean *immediately*
+ * cannot use this async service. Those rare cases stay on `window.confirm` as a
+ * documented exception.
+ */
+export declare class MJConfirmService {
+    private appRef;
+    /**
+     * Ask the user to confirm. Pass a bare string for the simplest case, or an
+     * options bag for control over title/type/labels/detail.
+     * @returns a Promise resolving `true` if confirmed, `false` otherwise.
+     */
+    Confirm(options: MJConfirmOptions | string): Promise<boolean>;
+    /**
+     * Convenience for destructive deletes — `type: 'danger'` and a 'Delete'
+     * confirm label by default (both overridable via `options`).
+     */
+    ConfirmDelete(options: Omit<MJConfirmOptions, 'type'>): Promise<boolean>;
+    private applyInputs;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJConfirmService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MJConfirmService>;
+}
+//# sourceMappingURL=confirm-dialog.service.d.ts.map

package/dist/lib/confirm-dialog/confirm-dialog.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.service.d.ts","sourceRoot":"","sources":["../../../src/lib/confirm-dialog/confirm-dialog.service.ts"],"names":[],"mappings":"AACA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;;AAE3F;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAA0B;IAExC;;;;OAIG;IACH,OAAO,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IA6C7D;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAIxE,OAAO,CAAC,WAAW;yCA7DR,gBAAgB;6CAAhB,gBAAgB;CAmF5B"}

package/dist/lib/confirm-dialog/confirm-dialog.service.js

@@ -0,0 +1,125 @@
+import { ApplicationRef, Injectable, createComponent, inject } from '@angular/core';
+import { MJConfirmDialogComponent } from './confirm-dialog.component';
+import * as i0 from "@angular/core";
+/**
+ * MJConfirmService — Imperative, Promise-based confirmation prompts.
+ *
+ * The one-liner replacement for native `window.confirm()` (an anti-pattern this
+ * codebase bans) and for the boilerplate of wiring `<mj-confirm-dialog>` into a
+ * template just to ask a yes/no question. It dynamically mounts an
+ * `MJConfirmDialogComponent` to `document.body`, shows it, and resolves a
+ * `Promise<boolean>` — `true` on confirm, `false` on cancel/backdrop/Esc — then
+ * tears the component down.
+ *
+ * @example
+ * ```typescript
+ * private confirm = inject(MJConfirmService);
+ *
+ * // Simplest — replaces `if (window.confirm('Discard changes?')) { ... }`
+ * if (await this.confirm.Confirm('Discard unsaved changes?')) {
+ *   this.discard();
+ * }
+ *
+ * // Destructive delete with a detail line
+ * if (await this.confirm.ConfirmDelete({
+ *   message: 'Delete this user?',
+ *   detail: 'This action cannot be undone.',
+ * })) {
+ *   await this.deleteUser();
+ * }
+ * ```
+ *
+ * **Async work after confirm:** because this resolves a boolean, the dialog has
+ * already closed by the time your `await` continues — there's no in-dialog
+ * spinner. When you need a "keep open + spinner while I save" UX, use the
+ * `<mj-confirm-dialog>` component directly with its `Processing` input instead.
+ *
+ * **Synchronous guards:** `window.confirm` blocks the thread; a synchronous
+ * `CanClose`/`beforeunload` guard that must return a boolean *immediately*
+ * cannot use this async service. Those rare cases stay on `window.confirm` as a
+ * documented exception.
+ */
+export class MJConfirmService {
+    appRef = inject(ApplicationRef);
+    /**
+     * Ask the user to confirm. Pass a bare string for the simplest case, or an
+     * options bag for control over title/type/labels/detail.
+     * @returns a Promise resolving `true` if confirmed, `false` otherwise.
+     */
+    Confirm(options) {
+        const opts = typeof options === 'string' ? { message: options } : options;
+        return new Promise((resolve) => {
+            const ref = createComponent(MJConfirmDialogComponent, {
+                environmentInjector: this.appRef.injector,
+            });
+            this.applyInputs(ref, opts);
+            // An imperative confirm must layer above whatever surface launched it —
+            // bespoke drawers/panels go up to ~1101 and mj-window sits at 10000,
+            // all above the shared mj-dialog backdrop (1000). Without this, a
+            // confirm opened from such an overlay renders UNDER its backdrop:
+            // unclickable, and each swallowed click can re-trigger the caller and
+            // stack another dialog. position:relative + z-index forms a stacking
+            // context on the host that lifts the fixed backdrop/dialog inside it
+            // to this level (20000 — above mj-window, below toasts at 100000)
+            // without touching the fixed element's viewport-relative geometry.
+            const host = ref.location.nativeElement;
+            host.style.position = 'relative';
+            host.style.zIndex = '20000';
+            document.body.appendChild(host);
+            this.appRef.attachView(ref.hostView);
+            let settled = false;
+            const finish = (result) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                confirmedSub.unsubscribe();
+                cancelledSub.unsubscribe();
+                this.appRef.detachView(ref.hostView);
+                ref.location.nativeElement.remove();
+                ref.destroy();
+                resolve(result);
+            };
+            const confirmedSub = ref.instance.Confirmed.subscribe(() => finish(true));
+            const cancelledSub = ref.instance.Cancelled.subscribe(() => finish(false));
+            ref.instance.Visible = true;
+            ref.changeDetectorRef.detectChanges();
+        });
+    }
+    /**
+     * Convenience for destructive deletes — `type: 'danger'` and a 'Delete'
+     * confirm label by default (both overridable via `options`).
+     */
+    ConfirmDelete(options) {
+        return this.Confirm({ confirmText: 'Delete', ...options, type: 'danger' });
+    }
+    applyInputs(ref, opts) {
+        const i = ref.instance;
+        i.Message = opts.message;
+        if (opts.title != null) {
+            i.Title = opts.title;
+        }
+        if (opts.detail != null) {
+            i.DetailMessage = opts.detail;
+        }
+        if (opts.type != null) {
+            i.Type = opts.type;
+        }
+        if (opts.confirmText != null) {
+            i.ConfirmText = opts.confirmText;
+        }
+        if (opts.cancelText != null) {
+            i.CancelText = opts.cancelText;
+        }
+        if (opts.icon != null) {
+            i.Icon = opts.icon;
+        }
+    }
+    static ɵfac = function MJConfirmService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJConfirmService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MJConfirmService, factory: MJConfirmService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJConfirmService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+//# sourceMappingURL=confirm-dialog.service.js.map

package/dist/lib/confirm-dialog/confirm-dialog.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.service.js","sourceRoot":"","sources":["../../../src/lib/confirm-dialog/confirm-dialog.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { ApplicationRef, ComponentRef, Injectable, createComponent, inject } from '@angular/core';\nimport { MJConfirmDialogComponent, MJConfirmDialogType } from './confirm-dialog.component';\n\n/**\n * Options for {@link MJConfirmService.Confirm}. Mirror the `<mj-confirm-dialog>`\n * inputs, but in a flat options bag suited to an imperative call.\n */\nexport interface MJConfirmOptions {\n  /** Primary prompt text. */\n  message: string;\n  /** Title-bar heading. Defaults to 'Confirm'. */\n  title?: string;\n  /** Optional secondary line, rendered smaller/muted beneath the message. */\n  detail?: string;\n  /** Visual intent — drives the header icon + confirm button color. Defaults to 'default'. */\n  type?: MJConfirmDialogType;\n  /** Affirmative button label. Defaults to 'Confirm'. */\n  confirmText?: string;\n  /** Dismiss button label. Defaults to 'Cancel'. */\n  cancelText?: string;\n  /** Font Awesome icon override (e.g. \"fa-solid fa-trash\"). `''` suppresses the icon. */\n  icon?: string;\n}\n\n/**\n * MJConfirmService — Imperative, Promise-based confirmation prompts.\n *\n * The one-liner replacement for native `window.confirm()` (an anti-pattern this\n * codebase bans) and for the boilerplate of wiring `<mj-confirm-dialog>` into a\n * template just to ask a yes/no question. It dynamically mounts an\n * `MJConfirmDialogComponent` to `document.body`, shows it, and resolves a\n * `Promise<boolean>` — `true` on confirm, `false` on cancel/backdrop/Esc — then\n * tears the component down.\n *\n * @example\n * ```typescript\n * private confirm = inject(MJConfirmService);\n *\n * // Simplest — replaces `if (window.confirm('Discard changes?')) { ... }`\n * if (await this.confirm.Confirm('Discard unsaved changes?')) {\n *   this.discard();\n * }\n *\n * // Destructive delete with a detail line\n * if (await this.confirm.ConfirmDelete({\n *   message: 'Delete this user?',\n *   detail: 'This action cannot be undone.',\n * })) {\n *   await this.deleteUser();\n * }\n * ```\n *\n * **Async work after confirm:** because this resolves a boolean, the dialog has\n * already closed by the time your `await` continues — there's no in-dialog\n * spinner. When you need a \"keep open + spinner while I save\" UX, use the\n * `<mj-confirm-dialog>` component directly with its `Processing` input instead.\n *\n * **Synchronous guards:** `window.confirm` blocks the thread; a synchronous\n * `CanClose`/`beforeunload` guard that must return a boolean *immediately*\n * cannot use this async service. Those rare cases stay on `window.confirm` as a\n * documented exception.\n */\n@Injectable({ providedIn: 'root' })\nexport class MJConfirmService {\n  private appRef = inject(ApplicationRef);\n\n  /**\n   * Ask the user to confirm. Pass a bare string for the simplest case, or an\n   * options bag for control over title/type/labels/detail.\n   * @returns a Promise resolving `true` if confirmed, `false` otherwise.\n   */\n  Confirm(options: MJConfirmOptions | string): Promise<boolean> {\n    const opts: MJConfirmOptions = typeof options === 'string' ? { message: options } : options;\n\n    return new Promise<boolean>((resolve) => {\n      const ref = createComponent(MJConfirmDialogComponent, {\n        environmentInjector: this.appRef.injector,\n      });\n      this.applyInputs(ref, opts);\n      // An imperative confirm must layer above whatever surface launched it —\n      // bespoke drawers/panels go up to ~1101 and mj-window sits at 10000,\n      // all above the shared mj-dialog backdrop (1000). Without this, a\n      // confirm opened from such an overlay renders UNDER its backdrop:\n      // unclickable, and each swallowed click can re-trigger the caller and\n      // stack another dialog. position:relative + z-index forms a stacking\n      // context on the host that lifts the fixed backdrop/dialog inside it\n      // to this level (20000 — above mj-window, below toasts at 100000)\n      // without touching the fixed element's viewport-relative geometry.\n      const host = ref.location.nativeElement as HTMLElement;\n      host.style.position = 'relative';\n      host.style.zIndex = '20000';\n      document.body.appendChild(host);\n      this.appRef.attachView(ref.hostView);\n\n      let settled = false;\n      const finish = (result: boolean): void => {\n        if (settled) {\n          return;\n        }\n        settled = true;\n        confirmedSub.unsubscribe();\n        cancelledSub.unsubscribe();\n        this.appRef.detachView(ref.hostView);\n        ref.location.nativeElement.remove();\n        ref.destroy();\n        resolve(result);\n      };\n\n      const confirmedSub = ref.instance.Confirmed.subscribe(() => finish(true));\n      const cancelledSub = ref.instance.Cancelled.subscribe(() => finish(false));\n\n      ref.instance.Visible = true;\n      ref.changeDetectorRef.detectChanges();\n    });\n  }\n\n  /**\n   * Convenience for destructive deletes — `type: 'danger'` and a 'Delete'\n   * confirm label by default (both overridable via `options`).\n   */\n  ConfirmDelete(options: Omit<MJConfirmOptions, 'type'>): Promise<boolean> {\n    return this.Confirm({ confirmText: 'Delete', ...options, type: 'danger' });\n  }\n\n  private applyInputs(ref: ComponentRef<MJConfirmDialogComponent>, opts: MJConfirmOptions): void {\n    const i = ref.instance;\n    i.Message = opts.message;\n    if (opts.title != null) {\n      i.Title = opts.title;\n    }\n    if (opts.detail != null) {\n      i.DetailMessage = opts.detail;\n    }\n    if (opts.type != null) {\n      i.Type = opts.type;\n    }\n    if (opts.confirmText != null) {\n      i.ConfirmText = opts.confirmText;\n    }\n    if (opts.cancelText != null) {\n      i.CancelText = opts.cancelText;\n    }\n    if (opts.icon != null) {\n      i.Icon = opts.icon;\n    }\n  }\n}\n"]}

package/dist/lib/dialog/dialog.component.d.ts

@@ -31,6 +31,13 @@ export declare class MJDialogComponent implements OnDestroy {
     Size: MjDialogSize;
     Closeable: boolean;
     MinWidth: number | null;
+    /**
+     * ARIA role for the dialog container. Defaults to `'dialog'`; pass
+     * `'alertdialog'` for confirmation / destructive prompts that interrupt the
+     * user (per WAI-ARIA, an alertdialog conveys an urgent message requiring a
+     * response). Backward compatible — existing callers keep `'dialog'`.
+     */
+    Role: 'dialog' | 'alertdialog';
     Close: EventEmitter<void>;
     DialogId: number;
     get dialogId(): number;
@@ -43,7 +50,7 @@ export declare class MJDialogComponent implements OnDestroy {
     private onCloseInternal;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogComponent, "mj-dialog", never, { "Visible": { "alias": "Visible"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Closeable": { "alias": "Closeable"; "required": false; }; "MinWidth": { "alias": "MinWidth"; "required": false; }; }, { "Close": "Close"; }, never, ["mj-dialog-titlebar", "*", "mj-dialog-actions"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogComponent, "mj-dialog", never, { "Visible": { "alias": "Visible"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Closeable": { "alias": "Closeable"; "required": false; }; "MinWidth": { "alias": "MinWidth"; "required": false; }; "Role": { "alias": "Role"; "required": false; }; }, { "Close": "Close"; }, never, ["mj-dialog-titlebar", "*", "mj-dialog-actions"], true, never>;
 }
 /**
  * mj-dialog-titlebar — Custom titlebar content for mj-dialog.

package/dist/lib/dialog/dialog.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAKZ,SAAS,EAEV,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAU9D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBA2Ca,iBAAkB,YAAW,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAE1B,IACI,OAAO,CAAC,KAAK,EAAE,OAAO,EASzB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IAEQ,KAAK,SAAM;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACrC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACtC,IAAI,EAAE,YAAY,CAAU;IAC5B,SAAS,UAAQ;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9B,KAAK,qBAA4B;IAE3C,QAAQ,SAA8B;IAEtC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,aAAa,IAAI,MAAM,CAK1B;IAED,IAAI,cAAc,IAAI,MAAM,CAK3B;IAGD,WAAW,IAAI,IAAI;IAMnB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMnC,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,eAAe;IAIvB,WAAW,IAAI,IAAI;yCAzER,iBAAiB;2CAAjB,iBAAiB;CA4E7B;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKa,yBAAyB;yCAAzB,yBAAyB;2CAAzB,yBAAyB;CAAG;AAEzC;;;;;;;;;;;;GAYG;AACH,qBASa,wBAAwB;yCAAxB,wBAAwB;2CAAxB,wBAAwB;CAAG"}
+{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAKZ,SAAS,EAEV,MAAM,eAAe,CAAC;;AAEvB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAU9D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBA2Ca,iBAAkB,YAAW,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAK;IAE1B,IACI,OAAO,CAAC,KAAK,EAAE,OAAO,EASzB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IAEQ,KAAK,SAAM;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACrC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IACtC,IAAI,EAAE,YAAY,CAAU;IAC5B,SAAS,UAAQ;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;;;;OAKG;IACM,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAY;IAEzC,KAAK,qBAA4B;IAE3C,QAAQ,SAA8B;IAEtC,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,aAAa,IAAI,MAAM,CAK1B;IAED,IAAI,cAAc,IAAI,MAAM,CAK3B;IAGD,WAAW,IAAI,IAAI;IAMnB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMnC,YAAY,IAAI,IAAI;IAIpB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,eAAe;IAIvB,WAAW,IAAI,IAAI;yCAjFR,iBAAiB;2CAAjB,iBAAiB;CAoF7B;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAKa,yBAAyB;yCAAzB,yBAAyB;2CAAzB,yBAAyB;CAAG;AAEzC;;;;;;;;;;;;GAYG;AACH,qBASa,wBAAwB;yCAAxB,wBAAwB;2CAAxB,wBAAwB;CAAG"}

package/dist/lib/dialog/dialog.component.js

@@ -48,7 +48,7 @@ function MJDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", ctx_r1.resolvedWidth)("height", ctx_r1.resolvedHeight)("max-width", "90vw")("max-height", "90vh");
-    i0.ɵɵattribute("aria-labelledby", ctx_r1.Title ? "mj-dialog-title-" + ctx_r1.dialogId : null);
+    i0.ɵɵattribute("role", ctx_r1.Role)("aria-labelledby", ctx_r1.Title ? "mj-dialog-title-" + ctx_r1.dialogId : null);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Title || ctx_r1.Closeable ? 2 : -1);
 } }
@@ -101,6 +101,13 @@ export class MJDialogComponent {
     Size = 'auto';
     Closeable = true;
     MinWidth = null;
+    /**
+     * ARIA role for the dialog container. Defaults to `'dialog'`; pass
+     * `'alertdialog'` for confirmation / destructive prompts that interrupt the
+     * user (per WAI-ARIA, an alertdialog conveys an urgent message requiring a
+     * response). Backward compatible — existing callers keep `'dialog'`.
+     */
+    Role = 'dialog';
     Close = new EventEmitter();
     DialogId = MJDialogComponent.nextId++;
     get dialogId() {
@@ -143,9 +150,9 @@ export class MJDialogComponent {
     static ɵfac = function MJDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJDialogComponent, selectors: [["mj-dialog"]], hostBindings: function MJDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function MJDialogComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Visible: "Visible", Title: "Title", Width: "Width", Height: "Height", Size: "Size", Closeable: "Closeable", MinWidth: "MinWidth" }, outputs: { Close: "Close" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "mj-dialog-backdrop"], [1, "mj-dialog-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", 1, "mj-dialog-container", 3, "click"], [1, "mj-dialog-titlebar"], [1, "mj-dialog-body"], [1, "mj-dialog-title", 3, "id"], ["aria-label", "Close dialog", 1, "mj-dialog-close"], ["aria-label", "Close dialog", 1, "mj-dialog-close", 3, "click"], [1, "fa-solid", "fa-times"]], template: function MJDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Visible: "Visible", Title: "Title", Width: "Width", Height: "Height", Size: "Size", Closeable: "Closeable", MinWidth: "MinWidth", Role: "Role" }, outputs: { Close: "Close" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[1, "mj-dialog-backdrop"], [1, "mj-dialog-backdrop", 3, "click"], ["aria-modal", "true", 1, "mj-dialog-container", 3, "click"], [1, "mj-dialog-titlebar"], [1, "mj-dialog-body"], [1, "mj-dialog-title", 3, "id"], ["aria-label", "Close dialog", 1, "mj-dialog-close"], ["aria-label", "Close dialog", 1, "mj-dialog-close", 3, "click"], [1, "fa-solid", "fa-times"]], template: function MJDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
-            i0.ɵɵconditionalCreate(0, MJDialogComponent_Conditional_0_Template, 6, 10, "div", 0);
+            i0.ɵɵconditionalCreate(0, MJDialogComponent_Conditional_0_Template, 6, 11, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible ? 0 : -1);
         } }, encapsulation: 2 });
@@ -159,7 +166,7 @@ export class MJDialogComponent {
     @if (Visible) {
       <div class="mj-dialog-backdrop" (click)="OnBackdropClick($event)">
         <div class="mj-dialog-container"
-          role="dialog"
+          [attr.role]="Role"
           aria-modal="true"
           [attr.aria-labelledby]="Title ? 'mj-dialog-title-' + dialogId : null"
           [style.width]="resolvedWidth"
@@ -209,6 +216,8 @@ export class MJDialogComponent {
             type: Input
         }], MinWidth: [{
             type: Input
+        }], Role: [{
+            type: Input
         }], Close: [{
             type: Output
         }], OnEscapeKey: [{
@@ -246,7 +255,7 @@ export class MJDialogTitlebarComponent {
                 template: `<ng-content></ng-content>`
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogTitlebarComponent, { className: "MJDialogTitlebarComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 184 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogTitlebarComponent, { className: "MJDialogTitlebarComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 192 }); })();
 /**
  * mj-dialog-actions — Footer action bar for mj-dialog.
  *
@@ -281,5 +290,5 @@ export class MJDialogActionsComponent {
   `
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogActionsComponent, { className: "MJDialogActionsComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 208 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogActionsComponent, { className: "MJDialogActionsComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 216 }); })();
 //# sourceMappingURL=dialog.component.js.map

package/dist/lib/dialog/dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,YAAY,EAMb,MAAM,eAAe,CAAC;;;;;IAmDP,gCAAiE;IAAA,YAAW;IAAA,oBAAK;;;IAArD,4DAAoC;IAAC,cAAW;IAAX,kCAAW;;;;IAI5E,oCAAmF;IAAnD,qNAAS,qBAAc,KAAC;IACtD,0BAAiC;IACnC,oBAAS;;;IARb,iCAAgC;IAC9B,8GAAa;IAGb,qBAAqD;IACrD,kHAAiB;IAKnB,oBAAM;;;IATJ,cAEC;IAFD,uCAEC;IAED,eAIC;IAJD,2CAIC;;;;IAtBT,iCAAkE;IAAlC,2LAAS,8BAAuB,KAAC;IAC/D,iCAQqC;IAAnC,wJAAS,wBAAwB,KAAC;IAGlC,iGAA0B;IAe1B,iCAA4B;IAC1B,kBAAyB;IAC3B,oBAAM;IAGN,qBAAoD;IAExD,AADE,oBAAM,EACF;;;IA7BF,cAA6B;IAG7B,AADA,AADA,AADA,6CAA6B,iCACE,qBACL,sBACC;;IAI3B,cAYC;IAZD,2DAYC;;;AAxDX,MAAM,QAAQ,GAAiC;IAC7C,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,MAAM;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AA4CH,MAAM,OAAO,iBAAiB;IACpB,QAAQ,GAAG,KAAK,CAAC;IACjB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAE1B,IACI,OAAO,CAAC,KAAc;QACxB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,KAAK,IAAI,UAAU,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IACD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEQ,KAAK,GAAG,EAAE,CAAC;IACX,KAAK,GAA2B,IAAI,CAAC;IACrC,MAAM,GAA2B,IAAI,CAAC;IACtC,IAAI,GAAiB,MAAM,CAAC;IAC5B,SAAS,GAAG,IAAI,CAAC;IACjB,QAAQ,GAAkB,IAAI,CAAC;IAE9B,KAAK,GAAG,IAAI,YAAY,EAAQ,CAAC;IAE3C,QAAQ,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC;IAEtC,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACzE,CAAC;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC;IACvC,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAC5E,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAGD,WAAW;QACT,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,KAAY;QAC1B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAEO,MAAM;QACZ,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAEO,eAAe;QACrB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACpC,CAAC;IAED,WAAW;QACT,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACpC,CAAC;2GA3EU,iBAAiB;6DAAjB,iBAAiB;YAAjB,wGAAA,iBAAa,0BAAI;;;YAvC1B,oFAAe;;YAAf,sCAoCC;;;iFAGQ,iBAAiB;cA3C7B,SAAS;eAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCT;aACF;;kBAKE,KAAK;;kBAeL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAEL,MAAM;;kBAsBN,YAAY;mBAAC,yBAAyB;;kFAhD5B,iBAAiB;AA8E9B;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,yBAAyB;mHAAzB,yBAAyB;6DAAzB,yBAAyB;;YAFzB,kBAAyB;;;iFAEzB,yBAAyB;cALrC,SAAS;eAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,2BAA2B;aACtC;;kFACY,yBAAyB;AAEtC;;;;;;;;;;;;GAYG;AAUH,MAAM,OAAO,wBAAwB;kHAAxB,wBAAwB;6DAAxB,wBAAwB;;YALjC,iCAA+B;YAC7B,kBAAyB;YAC3B,oBAAM;;;iFAGG,wBAAwB;cATpC,SAAS;eAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE;;;;GAIT;aACF;;kFACY,wBAAwB","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  HostListener,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  OnDestroy,\n  inject\n} from '@angular/core';\n\nexport type MjDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n\nconst SIZE_MAP: Record<MjDialogSize, string> = {\n  sm: '400px',\n  md: '600px',\n  lg: '800px',\n  xl: '1000px',\n  auto: 'auto'\n};\n\n/**\n * mj-dialog — Modal dialog component using native `<dialog>` element.\n *\n * Replaces `<kendo-dialog>`.\n *\n * Supports both explicit width/height and size presets.\n * Content is projected, with an optional `<mj-dialog-actions>` for the footer.\n *\n * @example\n * ```html\n * <mj-dialog [Visible]=\"showDialog\" Title=\"Confirm\" (Close)=\"onClose()\">\n *   <p>Are you sure?</p>\n *   <mj-dialog-actions>\n *     <button mjButton variant=\"primary\" (click)=\"onConfirm()\">Yes</button>\n *     <button mjButton (click)=\"onClose()\">No</button>\n *   </mj-dialog-actions>\n * </mj-dialog>\n * ```\n */\n@Component({\n  selector: 'mj-dialog',\n  standalone: true,\n  template: `\n    @if (Visible) {\n      <div class=\"mj-dialog-backdrop\" (click)=\"OnBackdropClick($event)\">\n        <div class=\"mj-dialog-container\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          [attr.aria-labelledby]=\"Title ? 'mj-dialog-title-' + dialogId : null\"\n          [style.width]=\"resolvedWidth\"\n          [style.height]=\"resolvedHeight\"\n          [style.max-width]=\"'90vw'\"\n          [style.max-height]=\"'90vh'\"\n          (click)=\"$event.stopPropagation()\">\n\n          <!-- Title bar -->\n          @if (Title || Closeable) {\n            <div class=\"mj-dialog-titlebar\">\n              @if (Title) {\n                <h2 class=\"mj-dialog-title\" [id]=\"'mj-dialog-title-' + dialogId\">{{ Title }}</h2>\n              }\n              <ng-content select=\"mj-dialog-titlebar\"></ng-content>\n              @if (Closeable) {\n                <button class=\"mj-dialog-close\" (click)=\"OnCloseClick()\" aria-label=\"Close dialog\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Body -->\n          <div class=\"mj-dialog-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <!-- Actions (projected) -->\n          <ng-content select=\"mj-dialog-actions\"></ng-content>\n        </div>\n      </div>\n    }\n  `\n})\nexport class MJDialogComponent implements OnDestroy {\n  private _visible = false;\n  private static nextId = 0;\n\n  @Input()\n  set Visible(value: boolean) {\n    const wasVisible = this._visible;\n    this._visible = value;\n    if (value && !wasVisible) {\n      this.onOpen();\n    }\n    if (!value && wasVisible) {\n      this.onCloseInternal();\n    }\n  }\n  get Visible(): boolean {\n    return this._visible;\n  }\n\n  @Input() Title = '';\n  @Input() Width: number | string | null = null;\n  @Input() Height: number | string | null = null;\n  @Input() Size: MjDialogSize = 'auto';\n  @Input() Closeable = true;\n  @Input() MinWidth: number | null = null;\n\n  @Output() Close = new EventEmitter<void>();\n\n  DialogId = MJDialogComponent.nextId++;\n\n  get dialogId(): number {\n    return this.DialogId;\n  }\n\n  get resolvedWidth(): string {\n    if (this.Width) {\n      return typeof this.Width === 'number' ? `${this.Width}px` : this.Width;\n    }\n    return SIZE_MAP[this.Size] ?? 'auto';\n  }\n\n  get resolvedHeight(): string {\n    if (this.Height) {\n      return typeof this.Height === 'number' ? `${this.Height}px` : this.Height;\n    }\n    return 'auto';\n  }\n\n  @HostListener('document:keydown.escape')\n  OnEscapeKey(): void {\n    if (this.Visible && this.Closeable) {\n      this.OnCloseClick();\n    }\n  }\n\n  OnBackdropClick(event: Event): void {\n    if (this.Closeable) {\n      this.OnCloseClick();\n    }\n  }\n\n  OnCloseClick(): void {\n    this.Close.emit();\n  }\n\n  private onOpen(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  private onCloseInternal(): void {\n    document.body.style.overflow = '';\n  }\n\n  ngOnDestroy(): void {\n    document.body.style.overflow = '';\n  }\n}\n\n/**\n * mj-dialog-titlebar — Custom titlebar content for mj-dialog.\n *\n * Replaces `<kendo-dialog-titlebar>`.\n *\n * @example\n * ```html\n * <mj-dialog [Visible]=\"show\" (Close)=\"onClose()\">\n *   <mj-dialog-titlebar>\n *     <i class=\"fa-solid fa-save\"></i> Custom Title\n *   </mj-dialog-titlebar>\n *   <p>Dialog content</p>\n * </mj-dialog>\n * ```\n */\n@Component({\n  selector: 'mj-dialog-titlebar',\n  standalone: true,\n  template: `<ng-content></ng-content>`\n})\nexport class MJDialogTitlebarComponent {}\n\n/**\n * mj-dialog-actions — Footer action bar for mj-dialog.\n *\n * Replaces `<kendo-dialog-actions>`.\n *\n * @example\n * ```html\n * <mj-dialog-actions>\n *   <button mjButton variant=\"primary\">Save</button>\n *   <button mjButton>Cancel</button>\n * </mj-dialog-actions>\n * ```\n */\n@Component({\n  selector: 'mj-dialog-actions',\n  standalone: true,\n  template: `\n    <div class=\"mj-dialog-actions\">\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class MJDialogActionsComponent {}\n"]}
+{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  HostListener,\n  ElementRef,\n  ViewChild,\n  AfterViewInit,\n  OnDestroy,\n  inject\n} from '@angular/core';\n\nexport type MjDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'auto';\n\nconst SIZE_MAP: Record<MjDialogSize, string> = {\n  sm: '400px',\n  md: '600px',\n  lg: '800px',\n  xl: '1000px',\n  auto: 'auto'\n};\n\n/**\n * mj-dialog — Modal dialog component using native `<dialog>` element.\n *\n * Replaces `<kendo-dialog>`.\n *\n * Supports both explicit width/height and size presets.\n * Content is projected, with an optional `<mj-dialog-actions>` for the footer.\n *\n * @example\n * ```html\n * <mj-dialog [Visible]=\"showDialog\" Title=\"Confirm\" (Close)=\"onClose()\">\n *   <p>Are you sure?</p>\n *   <mj-dialog-actions>\n *     <button mjButton variant=\"primary\" (click)=\"onConfirm()\">Yes</button>\n *     <button mjButton (click)=\"onClose()\">No</button>\n *   </mj-dialog-actions>\n * </mj-dialog>\n * ```\n */\n@Component({\n  selector: 'mj-dialog',\n  standalone: true,\n  template: `\n    @if (Visible) {\n      <div class=\"mj-dialog-backdrop\" (click)=\"OnBackdropClick($event)\">\n        <div class=\"mj-dialog-container\"\n          [attr.role]=\"Role\"\n          aria-modal=\"true\"\n          [attr.aria-labelledby]=\"Title ? 'mj-dialog-title-' + dialogId : null\"\n          [style.width]=\"resolvedWidth\"\n          [style.height]=\"resolvedHeight\"\n          [style.max-width]=\"'90vw'\"\n          [style.max-height]=\"'90vh'\"\n          (click)=\"$event.stopPropagation()\">\n\n          <!-- Title bar -->\n          @if (Title || Closeable) {\n            <div class=\"mj-dialog-titlebar\">\n              @if (Title) {\n                <h2 class=\"mj-dialog-title\" [id]=\"'mj-dialog-title-' + dialogId\">{{ Title }}</h2>\n              }\n              <ng-content select=\"mj-dialog-titlebar\"></ng-content>\n              @if (Closeable) {\n                <button class=\"mj-dialog-close\" (click)=\"OnCloseClick()\" aria-label=\"Close dialog\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Body -->\n          <div class=\"mj-dialog-body\">\n            <ng-content></ng-content>\n          </div>\n\n          <!-- Actions (projected) -->\n          <ng-content select=\"mj-dialog-actions\"></ng-content>\n        </div>\n      </div>\n    }\n  `\n})\nexport class MJDialogComponent implements OnDestroy {\n  private _visible = false;\n  private static nextId = 0;\n\n  @Input()\n  set Visible(value: boolean) {\n    const wasVisible = this._visible;\n    this._visible = value;\n    if (value && !wasVisible) {\n      this.onOpen();\n    }\n    if (!value && wasVisible) {\n      this.onCloseInternal();\n    }\n  }\n  get Visible(): boolean {\n    return this._visible;\n  }\n\n  @Input() Title = '';\n  @Input() Width: number | string | null = null;\n  @Input() Height: number | string | null = null;\n  @Input() Size: MjDialogSize = 'auto';\n  @Input() Closeable = true;\n  @Input() MinWidth: number | null = null;\n\n  /**\n   * ARIA role for the dialog container. Defaults to `'dialog'`; pass\n   * `'alertdialog'` for confirmation / destructive prompts that interrupt the\n   * user (per WAI-ARIA, an alertdialog conveys an urgent message requiring a\n   * response). Backward compatible — existing callers keep `'dialog'`.\n   */\n  @Input() Role: 'dialog' | 'alertdialog' = 'dialog';\n\n  @Output() Close = new EventEmitter<void>();\n\n  DialogId = MJDialogComponent.nextId++;\n\n  get dialogId(): number {\n    return this.DialogId;\n  }\n\n  get resolvedWidth(): string {\n    if (this.Width) {\n      return typeof this.Width === 'number' ? `${this.Width}px` : this.Width;\n    }\n    return SIZE_MAP[this.Size] ?? 'auto';\n  }\n\n  get resolvedHeight(): string {\n    if (this.Height) {\n      return typeof this.Height === 'number' ? `${this.Height}px` : this.Height;\n    }\n    return 'auto';\n  }\n\n  @HostListener('document:keydown.escape')\n  OnEscapeKey(): void {\n    if (this.Visible && this.Closeable) {\n      this.OnCloseClick();\n    }\n  }\n\n  OnBackdropClick(event: Event): void {\n    if (this.Closeable) {\n      this.OnCloseClick();\n    }\n  }\n\n  OnCloseClick(): void {\n    this.Close.emit();\n  }\n\n  private onOpen(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  private onCloseInternal(): void {\n    document.body.style.overflow = '';\n  }\n\n  ngOnDestroy(): void {\n    document.body.style.overflow = '';\n  }\n}\n\n/**\n * mj-dialog-titlebar — Custom titlebar content for mj-dialog.\n *\n * Replaces `<kendo-dialog-titlebar>`.\n *\n * @example\n * ```html\n * <mj-dialog [Visible]=\"show\" (Close)=\"onClose()\">\n *   <mj-dialog-titlebar>\n *     <i class=\"fa-solid fa-save\"></i> Custom Title\n *   </mj-dialog-titlebar>\n *   <p>Dialog content</p>\n * </mj-dialog>\n * ```\n */\n@Component({\n  selector: 'mj-dialog-titlebar',\n  standalone: true,\n  template: `<ng-content></ng-content>`\n})\nexport class MJDialogTitlebarComponent {}\n\n/**\n * mj-dialog-actions — Footer action bar for mj-dialog.\n *\n * Replaces `<kendo-dialog-actions>`.\n *\n * @example\n * ```html\n * <mj-dialog-actions>\n *   <button mjButton variant=\"primary\">Save</button>\n *   <button mjButton>Cancel</button>\n * </mj-dialog-actions>\n * ```\n */\n@Component({\n  selector: 'mj-dialog-actions',\n  standalone: true,\n  template: `\n    <div class=\"mj-dialog-actions\">\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class MJDialogActionsComponent {}\n"]}

package/dist/lib/slide-panel/slide-panel.component.js

@@ -223,11 +223,11 @@ export class MjSlidePanelComponent {
             i0.ɵɵconditional(ctx.Mode === "slide" ? 1 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Mode === "dialog" ? 2 : -1);
-        } }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n}\n\n\n\n\n\n\n\n\n.sp-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.sp-dialog[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n\n\n\n\n\n.sp-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover   .sp-resize-grip[_ngcontent-%COMP%], \n.sp-resize-handle[_ngcontent-%COMP%]:active   .sp-resize-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.sp-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.sp-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body[_ngcontent-%COMP%] {\n    padding: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .sp-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .sp-dialog[_ngcontent-%COMP%] {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}"], changeDetection: 0 });
+        } }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n}\n\n\n\n\n\n\n\n\n.sp-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible[_ngcontent-%COMP%] {\n    \n\n\n\n\n\n    transform: none;\n}\n\n\n\n\n\n\n\n\n.sp-dialog[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n\n\n\n\n\n.sp-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover   .sp-resize-grip[_ngcontent-%COMP%], \n.sp-resize-handle[_ngcontent-%COMP%]:active   .sp-resize-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.sp-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.sp-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body[_ngcontent-%COMP%] {\n    padding: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .sp-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .sp-dialog[_ngcontent-%COMP%] {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjSlidePanelComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.visible]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible {\n    background: var(--mj-bg-overlay);\n}\n\n/* ================================================================= */\n/* SLIDE PANEL */\n/* ================================================================= */\n\n.sp-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible {\n    transform: translateX(0);\n}\n\n/* ================================================================= */\n/* DIALOG (centered modal) */\n/* ================================================================= */\n\n.sp-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.sp-resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle:hover .sp-resize-grip,\n.sp-resize-handle:active .sp-resize-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.sp-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* BODY */\n/* ================================================================= */\n\n.sp-body {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body {\n    padding: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 768px) {\n    .sp-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle {\n        display: none;\n    }\n\n    .sp-dialog {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.visible]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible {\n    background: var(--mj-bg-overlay);\n}\n\n/* ================================================================= */\n/* SLIDE PANEL */\n/* ================================================================= */\n\n.sp-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible {\n    /* `none` (not translateX(0)) on purpose: a non-none transform makes this panel\n       the containing block for position:fixed DESCENDANTS (dropdown panels, popovers\n       that position via getBoundingClientRect viewport math), displacing them\n       offscreen. `none` interpolates as the identity matrix, so the slide-in\n       animation is unaffected while open-state descendants get the real viewport. */\n    transform: none;\n}\n\n/* ================================================================= */\n/* DIALOG (centered modal) */\n/* ================================================================= */\n\n.sp-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.sp-resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle:hover .sp-resize-grip,\n.sp-resize-handle:active .sp-resize-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.sp-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* BODY */\n/* ================================================================= */\n\n.sp-body {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body {\n    padding: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 768px) {\n    .sp-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle {\n        display: none;\n    }\n\n    .sp-dialog {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Mode: [{
             type: Input
         }], Title: [{

package/dist/public-api.d.ts

@@ -2,6 +2,8 @@ export * from './lib/button/button.directive';
 export * from './lib/clickable/clickable.directive';
 export * from './lib/dialog/dialog.component';
 export * from './lib/dialog/dialog.service';
+export * from './lib/confirm-dialog/confirm-dialog.component';
+export * from './lib/confirm-dialog/confirm-dialog.service';
 export * from './lib/dropdown/dropdown.component';
 export * from './lib/switch/switch.component';
 export * from './lib/numeric-input/numeric-input.component';

package/dist/public-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC"}

package/dist/public-api.js

@@ -4,6 +4,8 @@ export * from './lib/button/button.directive';
 export * from './lib/clickable/clickable.directive';
 export * from './lib/dialog/dialog.component';
 export * from './lib/dialog/dialog.service';
+export * from './lib/confirm-dialog/confirm-dialog.component';
+export * from './lib/confirm-dialog/confirm-dialog.service';
 export * from './lib/dropdown/dropdown.component';
 export * from './lib/switch/switch.component';
 export * from './lib/numeric-input/numeric-input.component';

package/dist/public-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/alert/alert.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\nexport * from './lib/empty-state/empty-state.component';\n"]}
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/confirm-dialog/confirm-dialog.component';\nexport * from './lib/confirm-dialog/confirm-dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/alert/alert.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\nexport * from './lib/empty-state/empty-state.component';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-ui-components",
-  "version": "5.44.0",
+  "version": "5.45.0",
   "description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@angular/compiler": "21.1.3",
     "@angular/compiler-cli": "21.1.3",
-    "@memberjunction/ng-test-utils": "5.44.0",
+    "@memberjunction/ng-test-utils": "5.45.0",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {