@memberjunction/ng-ui-components 5.43.0 → 5.45.0

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":"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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          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/empty-state/empty-state.component.d.ts

@@ -0,0 +1,114 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Visual intent of an `<mj-empty-state>`. Drives the default icon and the icon's
+ * color treatment so callers don't restate either for the common cases.
+ *
+ * - `empty`      — nothing exists yet (default). Neutral/disabled icon tone.
+ * - `no-results` — a search/filter matched nothing. Muted icon tone, magnifier default.
+ * - `success`    — a positive "all clear" empty (e.g. "No Errors Found"). Success icon tone, check default.
+ * - `warning`    — a non-error blocking condition (disabled/misconfigured feature). Warning icon tone.
+ * - `error`      — a load/operation failed. Error icon tone, triangle default.
+ */
+export type MJEmptyStateVariant = 'empty' | 'no-results' | 'success' | 'warning' | 'error';
+/** Density of an `<mj-empty-state>` — controls padding and icon size. */
+export type MJEmptyStateSize = 'compact' | 'default' | 'large';
+/**
+ * mj-empty-state — Canonical centered empty/no-results/error placeholder.
+ *
+ * Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling
+ * (icon + title + message, optionally a CTA), e.g.:
+ * ```html
+ * <div class="empty-state">
+ *   <i class="fa-solid fa-inbox"></i>
+ *   <h3>No Permissions Found</h3>
+ *   <p>Try adjusting your filters or refresh the data.</p>
+ *   <button mjButton variant="primary" (click)="refreshData()">Refresh</button>
+ * </div>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <!-- Simplest: nothing-here placeholder -->
+ * <mj-empty-state Title="No runs found" Message="No runs match the selected filters." />
+ *
+ * <!-- Search/filter produced nothing -->
+ * <mj-empty-state Variant="no-results" Title="No icons found" Message="Try a different search term." />
+ *
+ * <!-- Load failed, retry CTA -->
+ * <mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
+ *                 ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />
+ *
+ * <!-- Invitation to create the first record -->
+ * <mj-empty-state Icon="fa-solid fa-key" Title="No API keys yet"
+ *                 Message="Generate a key to start calling the API."
+ *                 ActionText="Generate Your First Key" ActionIcon="fa-solid fa-plus"
+ *                 (Action)="requestCreate()" />
+ *
+ * <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->
+ * <mj-empty-state Title="No pinned items yet" Message="Pin dashboards for quick access.">
+ *   <button mjButton variant="primary" (click)="addPin()">Add your first pin</button>
+ *   <button mjButton variant="flat" (click)="dismiss()">Don't show again</button>
+ * </mj-empty-state>
+ * ```
+ *
+ * For dynamic messages (e.g. "No keys matching X" vs "No keys yet"), compute the
+ * string in the parent and bind it to `[Message]`, or project richer body content
+ * as default `<ng-content>` (rendered between the message and the actions).
+ */
+export declare class MJEmptyStateComponent {
+    /**
+     * Font Awesome icon class string (e.g. "fa-solid fa-key"). When omitted, a
+     * sensible default is chosen from `Variant`. Pass an empty string AND no
+     * variant default applies — set this explicitly to "" to render no icon.
+     */
+    Icon: string | null;
+    /** Bold heading line (e.g. "No API keys yet"). */
+    Title: string;
+    /** Supporting/help text below the title. */
+    Message: string;
+    /** When set, renders a primary CTA button with this label. */
+    ActionText: string;
+    /** Optional Font Awesome icon shown inside the CTA button. */
+    ActionIcon: string;
+    /** mjButton variant for the built-in CTA. Defaults to 'primary'. */
+    ActionVariant: 'primary' | 'secondary' | 'outline' | 'flat';
+    /** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */
+    Variant: MJEmptyStateVariant;
+    /** Density — controls padding and icon size. Defaults to 'default'. */
+    Size: MJEmptyStateSize;
+    /**
+     * ARIA live-region role on the host. When unset, it defaults from `Variant`:
+     * `error` → `'alert'` (assertive), everything else → `'status'` (polite). This
+     * makes a dynamically-appearing empty state announce itself to screen readers —
+     * the title + message are read together via the role's implicit
+     * `aria-live`/`aria-atomic`. (Empty states present at page load are not
+     * announced, per the live-region spec, so static placeholders stay quiet.)
+     * Pass an explicit role to override, or `''` to opt out of the live region.
+     */
+    Role: string | null;
+    /** Emitted when the built-in CTA button is clicked. */
+    Action: EventEmitter<MouseEvent>;
+    get IsCompact(): boolean;
+    get IsLarge(): boolean;
+    get IsNoResults(): boolean;
+    get IsSuccess(): boolean;
+    get IsWarning(): boolean;
+    get IsError(): boolean;
+    /**
+     * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
+     * otherwise an error state is an assertive `alert`, everything else a polite `status`.
+     */
+    get HostRole(): string | null;
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including ""
+     * to suppress the icon), otherwise the per-variant default.
+     */
+    get ResolvedIcon(): string;
+    /** Default Font Awesome icon for each variant. */
+    static DefaultIconForVariant(variant: MJEmptyStateVariant): string;
+    OnAction(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJEmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJEmptyStateComponent, "mj-empty-state", never, { "Icon": { "alias": "Icon"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "ActionText": { "alias": "ActionText"; "required": false; }; "ActionIcon": { "alias": "ActionIcon"; "required": false; }; "ActionVariant": { "alias": "ActionVariant"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Role": { "alias": "Role"; "required": false; }; }, { "Action": "Action"; }, never, ["*", "[actions]"], true, never>;
+}
+//# sourceMappingURL=empty-state.component.d.ts.map

package/dist/lib/empty-state/empty-state.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.component.d.ts","sourceRoot":"","sources":["../../../src/lib/empty-state/empty-state.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA8B,MAAM,eAAe,CAAC;;AAGpF;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3F,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBA6Ga,qBAAqB;IAChC;;;;OAIG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,kDAAkD;IACzC,KAAK,EAAE,MAAM,CAAM;IAE5B,4CAA4C;IACnC,OAAO,EAAE,MAAM,CAAM;IAE9B,8DAA8D;IACrD,UAAU,EAAE,MAAM,CAAM;IAEjC,8DAA8D;IACrD,UAAU,EAAE,MAAM,CAAM;IAEjC,oEAAoE;IAC3D,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAa;IAEjF,mFAAmF;IAC1E,OAAO,EAAE,mBAAmB,CAAW;IAEhD,uEAAuE;IAC9D,IAAI,EAAE,gBAAgB,CAAa;IAE5C;;;;;;;;OAQG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,uDAAuD;IAC7C,MAAM,2BAAkC;IAElD,IACI,SAAS,IAAI,OAAO,CAAoC;IAE5D,IACI,OAAO,IAAI,OAAO,CAAkC;IAExD,IACI,WAAW,IAAI,OAAO,CAA0C;IAEpE,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,OAAO,IAAI,OAAO,CAAqC;IAE3D;;;OAGG;IACH,IACI,QAAQ,IAAI,MAAM,GAAG,IAAI,CAK5B;IAED;;;OAGG;IACH,IAAI,YAAY,IAAI,MAAM,CAKzB;IAED,kDAAkD;IAClD,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM;IAelE,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCApGtB,qBAAqB;2CAArB,qBAAqB;CAuGjC"}

package/dist/lib/empty-state/empty-state.component.js

@@ -0,0 +1,268 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { MJButtonDirective } from '../button/button.directive';
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["", "actions", ""]]];
+const _c1 = ["*", "[actions]"];
+function MJEmptyStateComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("mj-empty-state__icon ", ctx_r0.ResolvedIcon));
+} }
+function MJEmptyStateComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Title);
+} }
+function MJEmptyStateComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Message);
+} }
+function MJEmptyStateComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.ActionIcon);
+} }
+function MJEmptyStateComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function MJEmptyStateComponent_Conditional_5_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAction($event)); });
+    i0.ɵɵconditionalCreate(1, MJEmptyStateComponent_Conditional_5_Conditional_1_Template, 1, 2, "i", 0);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("variant", ctx_r0.ActionVariant);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ActionIcon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ActionText, " ");
+} }
+/**
+ * mj-empty-state — Canonical centered empty/no-results/error placeholder.
+ *
+ * Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling
+ * (icon + title + message, optionally a CTA), e.g.:
+ * ```html
+ * <div class="empty-state">
+ *   <i class="fa-solid fa-inbox"></i>
+ *   <h3>No Permissions Found</h3>
+ *   <p>Try adjusting your filters or refresh the data.</p>
+ *   <button mjButton variant="primary" (click)="refreshData()">Refresh</button>
+ * </div>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <!-- Simplest: nothing-here placeholder -->
+ * <mj-empty-state Title="No runs found" Message="No runs match the selected filters." />
+ *
+ * <!-- Search/filter produced nothing -->
+ * <mj-empty-state Variant="no-results" Title="No icons found" Message="Try a different search term." />
+ *
+ * <!-- Load failed, retry CTA -->
+ * <mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
+ *                 ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />
+ *
+ * <!-- Invitation to create the first record -->
+ * <mj-empty-state Icon="fa-solid fa-key" Title="No API keys yet"
+ *                 Message="Generate a key to start calling the API."
+ *                 ActionText="Generate Your First Key" ActionIcon="fa-solid fa-plus"
+ *                 (Action)="requestCreate()" />
+ *
+ * <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->
+ * <mj-empty-state Title="No pinned items yet" Message="Pin dashboards for quick access.">
+ *   <button mjButton variant="primary" (click)="addPin()">Add your first pin</button>
+ *   <button mjButton variant="flat" (click)="dismiss()">Don't show again</button>
+ * </mj-empty-state>
+ * ```
+ *
+ * For dynamic messages (e.g. "No keys matching X" vs "No keys yet"), compute the
+ * string in the parent and bind it to `[Message]`, or project richer body content
+ * as default `<ng-content>` (rendered between the message and the actions).
+ */
+export class MJEmptyStateComponent {
+    /**
+     * Font Awesome icon class string (e.g. "fa-solid fa-key"). When omitted, a
+     * sensible default is chosen from `Variant`. Pass an empty string AND no
+     * variant default applies — set this explicitly to "" to render no icon.
+     */
+    Icon = null;
+    /** Bold heading line (e.g. "No API keys yet"). */
+    Title = '';
+    /** Supporting/help text below the title. */
+    Message = '';
+    /** When set, renders a primary CTA button with this label. */
+    ActionText = '';
+    /** Optional Font Awesome icon shown inside the CTA button. */
+    ActionIcon = '';
+    /** mjButton variant for the built-in CTA. Defaults to 'primary'. */
+    ActionVariant = 'primary';
+    /** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */
+    Variant = 'empty';
+    /** Density — controls padding and icon size. Defaults to 'default'. */
+    Size = 'default';
+    /**
+     * ARIA live-region role on the host. When unset, it defaults from `Variant`:
+     * `error` → `'alert'` (assertive), everything else → `'status'` (polite). This
+     * makes a dynamically-appearing empty state announce itself to screen readers —
+     * the title + message are read together via the role's implicit
+     * `aria-live`/`aria-atomic`. (Empty states present at page load are not
+     * announced, per the live-region spec, so static placeholders stay quiet.)
+     * Pass an explicit role to override, or `''` to opt out of the live region.
+     */
+    Role = null;
+    /** Emitted when the built-in CTA button is clicked. */
+    Action = new EventEmitter();
+    get IsCompact() { return this.Size === 'compact'; }
+    get IsLarge() { return this.Size === 'large'; }
+    get IsNoResults() { return this.Variant === 'no-results'; }
+    get IsSuccess() { return this.Variant === 'success'; }
+    get IsWarning() { return this.Variant === 'warning'; }
+    get IsError() { return this.Variant === 'error'; }
+    /**
+     * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
+     * otherwise an error state is an assertive `alert`, everything else a polite `status`.
+     */
+    get HostRole() {
+        if (this.Role != null) {
+            return this.Role || null;
+        }
+        return this.Variant === 'error' ? 'alert' : 'status';
+    }
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including ""
+     * to suppress the icon), otherwise the per-variant default.
+     */
+    get ResolvedIcon() {
+        if (this.Icon != null) {
+            return this.Icon;
+        }
+        return MJEmptyStateComponent.DefaultIconForVariant(this.Variant);
+    }
+    /** Default Font Awesome icon for each variant. */
+    static DefaultIconForVariant(variant) {
+        switch (variant) {
+            case 'no-results':
+                return 'fa-solid fa-magnifying-glass';
+            case 'success':
+                return 'fa-solid fa-circle-check';
+            case 'warning':
+            case 'error':
+                return 'fa-solid fa-triangle-exclamation';
+            case 'empty':
+            default:
+                return 'fa-solid fa-inbox';
+        }
+    }
+    OnAction(event) {
+        this.Action.emit(event);
+    }
+    static ɵfac = function MJEmptyStateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJEmptyStateComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEmptyStateComponent, selectors: [["mj-empty-state"]], hostVars: 13, hostBindings: function MJEmptyStateComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("role", ctx.HostRole);
+            i0.ɵɵclassProp("mj-empty-state--compact", ctx.IsCompact)("mj-empty-state--large", ctx.IsLarge)("mj-empty-state--no-results", ctx.IsNoResults)("mj-empty-state--success", ctx.IsSuccess)("mj-empty-state--warning", ctx.IsWarning)("mj-empty-state--error", ctx.IsError);
+        } }, inputs: { Icon: "Icon", Title: "Title", Message: "Message", ActionText: "ActionText", ActionIcon: "ActionIcon", ActionVariant: "ActionVariant", Variant: "Variant", Size: "Size", Role: "Role" }, outputs: { Action: "Action" }, ngContentSelectors: _c1, decls: 7, vars: 4, consts: [["aria-hidden", "true", 3, "class"], [1, "mj-empty-state__title"], [1, "mj-empty-state__message"], [1, "mj-empty-state__actions"], ["type", "button", "mjButton", "", 3, "variant"], ["aria-hidden", "true"], ["type", "button", "mjButton", "", 3, "click", "variant"]], template: function MJEmptyStateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵconditionalCreate(0, MJEmptyStateComponent_Conditional_0_Template, 1, 3, "i", 0);
+            i0.ɵɵconditionalCreate(1, MJEmptyStateComponent_Conditional_1_Template, 2, 1, "h3", 1);
+            i0.ɵɵconditionalCreate(2, MJEmptyStateComponent_Conditional_2_Template, 2, 1, "p", 2);
+            i0.ɵɵprojection(3);
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵconditionalCreate(5, MJEmptyStateComponent_Conditional_5_Template, 3, 3, "button", 4);
+            i0.ɵɵprojection(6, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.ResolvedIcon ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Title ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Message ? 2 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.ActionText ? 5 : -1);
+        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: var(--mj-space-12);\n      color: var(--mj-text-secondary);\n    }\n\n    .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 3rem;\n      line-height: 1;\n      margin-bottom: var(--mj-space-4);\n      color: var(--mj-text-disabled);\n    }\n\n    .mj-empty-state__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: var(--mj-text-lg);\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-empty-state__message[_ngcontent-%COMP%] {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-muted);\n      max-width: 420px;\n    }\n\n    .mj-empty-state__actions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--mj-space-2);\n      margin-top: var(--mj-space-6);\n    }\n    \n\n\n    .mj-empty-state__actions[_ngcontent-%COMP%]:empty {\n      display: none;\n    }\n\n    \n\n    .mj-empty-state--compact[_nghost-%COMP%] {\n      padding: var(--mj-space-8);\n    }\n    .mj-empty-state--compact[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 2rem;\n      margin-bottom: var(--mj-space-3);\n    }\n\n    .mj-empty-state--large[_nghost-%COMP%] {\n      padding: var(--mj-space-16) var(--mj-space-10);\n    }\n    .mj-empty-state--large[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      font-size: 4rem;\n    }\n\n    \n\n    .mj-empty-state--no-results[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }\n    .mj-empty-state--success[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n    .mj-empty-state--warning[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n    }\n    .mj-empty-state--error[_nghost-%COMP%]   .mj-empty-state__icon[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEmptyStateComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-empty-state', standalone: true, imports: [MJButtonDirective], template: `
+    @if (ResolvedIcon) {
+      <i class="mj-empty-state__icon {{ ResolvedIcon }}" aria-hidden="true"></i>
+    }
+    @if (Title) {
+      <h3 class="mj-empty-state__title">{{ Title }}</h3>
+    }
+    @if (Message) {
+      <p class="mj-empty-state__message">{{ Message }}</p>
+    }
+
+    <!-- Optional richer body content (feature lists, dynamic text, links) -->
+    <ng-content></ng-content>
+
+    <!-- Actions: the built-in single CTA and/or projected [actions] buttons.
+         Hidden via :empty when neither is present. -->
+    <div class="mj-empty-state__actions">
+      @if (ActionText) {
+        <button type="button" mjButton [variant]="ActionVariant" (click)="OnAction($event)">
+          @if (ActionIcon) {
+            <i class="{{ ActionIcon }}" aria-hidden="true"></i>
+          }
+          {{ ActionText }}
+        </button>
+      }
+      <ng-content select="[actions]"></ng-content>
+    </div>
+  `, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: var(--mj-space-12);\n      color: var(--mj-text-secondary);\n    }\n\n    .mj-empty-state__icon {\n      font-size: 3rem;\n      line-height: 1;\n      margin-bottom: var(--mj-space-4);\n      color: var(--mj-text-disabled);\n    }\n\n    .mj-empty-state__title {\n      margin: 0;\n      font-size: var(--mj-text-lg);\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-empty-state__message {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-muted);\n      max-width: 420px;\n    }\n\n    .mj-empty-state__actions {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--mj-space-2);\n      margin-top: var(--mj-space-6);\n    }\n    /* Collapse the actions row entirely when no CTA is rendered (modern browsers\n       treat an element containing only Angular's @if comment-anchors as :empty). */\n    .mj-empty-state__actions:empty {\n      display: none;\n    }\n\n    /* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n    :host(.mj-empty-state--compact) {\n      padding: var(--mj-space-8);\n    }\n    :host(.mj-empty-state--compact) .mj-empty-state__icon {\n      font-size: 2rem;\n      margin-bottom: var(--mj-space-3);\n    }\n\n    :host(.mj-empty-state--large) {\n      padding: var(--mj-space-16) var(--mj-space-10);\n    }\n    :host(.mj-empty-state--large) .mj-empty-state__icon {\n      font-size: 4rem;\n    }\n\n    /* \u2500\u2500 Variants (icon tone) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n    :host(.mj-empty-state--no-results) .mj-empty-state__icon {\n      color: var(--mj-text-muted);\n    }\n    :host(.mj-empty-state--success) .mj-empty-state__icon {\n      color: var(--mj-status-success);\n    }\n    :host(.mj-empty-state--warning) .mj-empty-state__icon {\n      color: var(--mj-status-warning);\n    }\n    :host(.mj-empty-state--error) .mj-empty-state__icon {\n      color: var(--mj-status-error);\n    }\n  "] }]
+    }], null, { Icon: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Message: [{
+            type: Input
+        }], ActionText: [{
+            type: Input
+        }], ActionIcon: [{
+            type: Input
+        }], ActionVariant: [{
+            type: Input
+        }], Variant: [{
+            type: Input
+        }], Size: [{
+            type: Input
+        }], Role: [{
+            type: Input
+        }], Action: [{
+            type: Output
+        }], IsCompact: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--compact']
+        }], IsLarge: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--large']
+        }], IsNoResults: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--no-results']
+        }], IsSuccess: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--success']
+        }], IsWarning: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--warning']
+        }], IsError: [{
+            type: HostBinding,
+            args: ['class.mj-empty-state--error']
+        }], HostRole: [{
+            type: HostBinding,
+            args: ['attr.role']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEmptyStateComponent, { className: "MJEmptyStateComponent", filePath: "lib/empty-state/empty-state.component.ts", lineNumber: 171 }); })();
+//# sourceMappingURL=empty-state.component.js.map

package/dist/lib/empty-state/empty-state.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.component.js","sourceRoot":"","sources":["../../../src/lib/empty-state/empty-state.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { MJButtonDirective } from '../button/button.directive';\n\n/**\n * Visual intent of an `<mj-empty-state>`. Drives the default icon and the icon's\n * color treatment so callers don't restate either for the common cases.\n *\n * - `empty`      — nothing exists yet (default). Neutral/disabled icon tone.\n * - `no-results` — a search/filter matched nothing. Muted icon tone, magnifier default.\n * - `success`    — a positive \"all clear\" empty (e.g. \"No Errors Found\"). Success icon tone, check default.\n * - `warning`    — a non-error blocking condition (disabled/misconfigured feature). Warning icon tone.\n * - `error`      — a load/operation failed. Error icon tone, triangle default.\n */\nexport type MJEmptyStateVariant = 'empty' | 'no-results' | 'success' | 'warning' | 'error';\n\n/** Density of an `<mj-empty-state>` — controls padding and icon size. */\nexport type MJEmptyStateSize = 'compact' | 'default' | 'large';\n\n/**\n * mj-empty-state — Canonical centered empty/no-results/error placeholder.\n *\n * Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling\n * (icon + title + message, optionally a CTA), e.g.:\n * ```html\n * <div class=\"empty-state\">\n *   <i class=\"fa-solid fa-inbox\"></i>\n *   <h3>No Permissions Found</h3>\n *   <p>Try adjusting your filters or refresh the data.</p>\n *   <button mjButton variant=\"primary\" (click)=\"refreshData()\">Refresh</button>\n * </div>\n * ```\n *\n * Usage:\n * ```html\n * <!-- Simplest: nothing-here placeholder -->\n * <mj-empty-state Title=\"No runs found\" Message=\"No runs match the selected filters.\" />\n *\n * <!-- Search/filter produced nothing -->\n * <mj-empty-state Variant=\"no-results\" Title=\"No icons found\" Message=\"Try a different search term.\" />\n *\n * <!-- Load failed, retry CTA -->\n * <mj-empty-state Variant=\"error\" Title=\"Couldn't load permissions\" [Message]=\"error\"\n *                 ActionText=\"Try Again\" ActionIcon=\"fa-solid fa-rotate-right\" (Action)=\"loadData()\" />\n *\n * <!-- Invitation to create the first record -->\n * <mj-empty-state Icon=\"fa-solid fa-key\" Title=\"No API keys yet\"\n *                 Message=\"Generate a key to start calling the API.\"\n *                 ActionText=\"Generate Your First Key\" ActionIcon=\"fa-solid fa-plus\"\n *                 (Action)=\"requestCreate()\" />\n *\n * <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->\n * <mj-empty-state Title=\"No pinned items yet\" Message=\"Pin dashboards for quick access.\">\n *   <button mjButton variant=\"primary\" (click)=\"addPin()\">Add your first pin</button>\n *   <button mjButton variant=\"flat\" (click)=\"dismiss()\">Don't show again</button>\n * </mj-empty-state>\n * ```\n *\n * For dynamic messages (e.g. \"No keys matching X\" vs \"No keys yet\"), compute the\n * string in the parent and bind it to `[Message]`, or project richer body content\n * as default `<ng-content>` (rendered between the message and the actions).\n */\n@Component({\n  selector: 'mj-empty-state',\n  standalone: true,\n  imports: [MJButtonDirective],\n  template: `\n    @if (ResolvedIcon) {\n      <i class=\"mj-empty-state__icon {{ ResolvedIcon }}\" aria-hidden=\"true\"></i>\n    }\n    @if (Title) {\n      <h3 class=\"mj-empty-state__title\">{{ Title }}</h3>\n    }\n    @if (Message) {\n      <p class=\"mj-empty-state__message\">{{ Message }}</p>\n    }\n\n    <!-- Optional richer body content (feature lists, dynamic text, links) -->\n    <ng-content></ng-content>\n\n    <!-- Actions: the built-in single CTA and/or projected [actions] buttons.\n         Hidden via :empty when neither is present. -->\n    <div class=\"mj-empty-state__actions\">\n      @if (ActionText) {\n        <button type=\"button\" mjButton [variant]=\"ActionVariant\" (click)=\"OnAction($event)\">\n          @if (ActionIcon) {\n            <i class=\"{{ ActionIcon }}\" aria-hidden=\"true\"></i>\n          }\n          {{ ActionText }}\n        </button>\n      }\n      <ng-content select=\"[actions]\"></ng-content>\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      padding: var(--mj-space-12);\n      color: var(--mj-text-secondary);\n    }\n\n    .mj-empty-state__icon {\n      font-size: 3rem;\n      line-height: 1;\n      margin-bottom: var(--mj-space-4);\n      color: var(--mj-text-disabled);\n    }\n\n    .mj-empty-state__title {\n      margin: 0;\n      font-size: var(--mj-text-lg);\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .mj-empty-state__message {\n      margin: var(--mj-space-2) 0 0;\n      font-size: var(--mj-text-sm);\n      color: var(--mj-text-muted);\n      max-width: 420px;\n    }\n\n    .mj-empty-state__actions {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: var(--mj-space-2);\n      margin-top: var(--mj-space-6);\n    }\n    /* Collapse the actions row entirely when no CTA is rendered (modern browsers\n       treat an element containing only Angular's @if comment-anchors as :empty). */\n    .mj-empty-state__actions:empty {\n      display: none;\n    }\n\n    /* ── Sizes ────────────────────────────────────────────────── */\n    :host(.mj-empty-state--compact) {\n      padding: var(--mj-space-8);\n    }\n    :host(.mj-empty-state--compact) .mj-empty-state__icon {\n      font-size: 2rem;\n      margin-bottom: var(--mj-space-3);\n    }\n\n    :host(.mj-empty-state--large) {\n      padding: var(--mj-space-16) var(--mj-space-10);\n    }\n    :host(.mj-empty-state--large) .mj-empty-state__icon {\n      font-size: 4rem;\n    }\n\n    /* ── Variants (icon tone) ─────────────────────────────────── */\n    :host(.mj-empty-state--no-results) .mj-empty-state__icon {\n      color: var(--mj-text-muted);\n    }\n    :host(.mj-empty-state--success) .mj-empty-state__icon {\n      color: var(--mj-status-success);\n    }\n    :host(.mj-empty-state--warning) .mj-empty-state__icon {\n      color: var(--mj-status-warning);\n    }\n    :host(.mj-empty-state--error) .mj-empty-state__icon {\n      color: var(--mj-status-error);\n    }\n  `]\n})\nexport class MJEmptyStateComponent {\n  /**\n   * Font Awesome icon class string (e.g. \"fa-solid fa-key\"). When omitted, a\n   * sensible default is chosen from `Variant`. Pass an empty string AND no\n   * variant default applies — set this explicitly to \"\" to render no icon.\n   */\n  @Input() Icon: string | null = null;\n\n  /** Bold heading line (e.g. \"No API keys yet\"). */\n  @Input() Title: string = '';\n\n  /** Supporting/help text below the title. */\n  @Input() Message: string = '';\n\n  /** When set, renders a primary CTA button with this label. */\n  @Input() ActionText: string = '';\n\n  /** Optional Font Awesome icon shown inside the CTA button. */\n  @Input() ActionIcon: string = '';\n\n  /** mjButton variant for the built-in CTA. Defaults to 'primary'. */\n  @Input() ActionVariant: 'primary' | 'secondary' | 'outline' | 'flat' = 'primary';\n\n  /** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */\n  @Input() Variant: MJEmptyStateVariant = 'empty';\n\n  /** Density — controls padding and icon size. Defaults to 'default'. */\n  @Input() Size: MJEmptyStateSize = 'default';\n\n  /**\n   * ARIA live-region role on the host. When unset, it defaults from `Variant`:\n   * `error` → `'alert'` (assertive), everything else → `'status'` (polite). This\n   * makes a dynamically-appearing empty state announce itself to screen readers —\n   * the title + message are read together via the role's implicit\n   * `aria-live`/`aria-atomic`. (Empty states present at page load are not\n   * announced, per the live-region spec, so static placeholders stay quiet.)\n   * Pass an explicit role to override, or `''` to opt out of the live region.\n   */\n  @Input() Role: string | null = null;\n\n  /** Emitted when the built-in CTA button is clicked. */\n  @Output() Action = new EventEmitter<MouseEvent>();\n\n  @HostBinding('class.mj-empty-state--compact')\n  get IsCompact(): boolean { return this.Size === 'compact'; }\n\n  @HostBinding('class.mj-empty-state--large')\n  get IsLarge(): boolean { return this.Size === 'large'; }\n\n  @HostBinding('class.mj-empty-state--no-results')\n  get IsNoResults(): boolean { return this.Variant === 'no-results'; }\n\n  @HostBinding('class.mj-empty-state--success')\n  get IsSuccess(): boolean { return this.Variant === 'success'; }\n\n  @HostBinding('class.mj-empty-state--warning')\n  get IsWarning(): boolean { return this.Variant === 'warning'; }\n\n  @HostBinding('class.mj-empty-state--error')\n  get IsError(): boolean { return this.Variant === 'error'; }\n\n  /**\n   * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);\n   * otherwise an error state is an assertive `alert`, everything else a polite `status`.\n   */\n  @HostBinding('attr.role')\n  get HostRole(): string | null {\n    if (this.Role != null) {\n      return this.Role || null;\n    }\n    return this.Variant === 'error' ? 'alert' : 'status';\n  }\n\n  /**\n   * Icon actually rendered: the explicit `Icon` when provided (including \"\"\n   * to suppress the icon), otherwise the per-variant default.\n   */\n  get ResolvedIcon(): string {\n    if (this.Icon != null) {\n      return this.Icon;\n    }\n    return MJEmptyStateComponent.DefaultIconForVariant(this.Variant);\n  }\n\n  /** Default Font Awesome icon for each variant. */\n  static DefaultIconForVariant(variant: MJEmptyStateVariant): string {\n    switch (variant) {\n      case 'no-results':\n        return 'fa-solid fa-magnifying-glass';\n      case 'success':\n        return 'fa-solid fa-circle-check';\n      case 'warning':\n      case 'error':\n        return 'fa-solid fa-triangle-exclamation';\n      case 'empty':\n      default:\n        return 'fa-solid fa-inbox';\n    }\n  }\n\n  OnAction(event: MouseEvent): void {\n    this.Action.emit(event);\n  }\n}\n"]}