@memberjunction/ng-ui-components 0.0.1 → 5.23.0

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

@@ -0,0 +1,285 @@
+import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["mj-dialog-actions"]], [["mj-dialog-titlebar"]]];
+const _c1 = ["*", "mj-dialog-actions", "mj-dialog-titlebar"];
+function MJDialogComponent_Conditional_0_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "h2", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵdomProperty("id", "mj-dialog-title-" + ctx_r1.dialogId);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.Title);
+} }
+function MJDialogComponent_Conditional_0_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 7);
+    i0.ɵɵdomListener("click", function MJDialogComponent_Conditional_0_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCloseClick()); });
+    i0.ɵɵdomElement(1, "i", 8);
+    i0.ɵɵdomElementEnd();
+} }
+function MJDialogComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3);
+    i0.ɵɵconditionalCreate(1, MJDialogComponent_Conditional_0_Conditional_2_Conditional_1_Template, 2, 2, "h2", 5);
+    i0.ɵɵprojection(2, 2);
+    i0.ɵɵconditionalCreate(3, MJDialogComponent_Conditional_0_Conditional_2_Conditional_3_Template, 2, 0, "button", 6);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Title ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.Closeable ? 3 : -1);
+} }
+function MJDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵdomListener("click", function MJDialogComponent_Conditional_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnBackdropClick($event)); });
+    i0.ɵɵdomElementStart(1, "div", 2);
+    i0.ɵɵdomListener("click", function MJDialogComponent_Conditional_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵconditionalCreate(2, MJDialogComponent_Conditional_0_Conditional_2_Template, 4, 2, "div", 3);
+    i0.ɵɵdomElementStart(3, "div", 4);
+    i0.ɵɵprojection(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵprojection(5, 1);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Title || ctx_r1.Closeable ? 2 : -1);
+} }
+const _c2 = ["*"];
+const SIZE_MAP = {
+    sm: '400px',
+    md: '600px',
+    lg: '800px',
+    xl: '1000px',
+    auto: 'auto'
+};
+/**
+ * mj-dialog — Modal dialog component using native `<dialog>` element.
+ *
+ * Replaces `<kendo-dialog>`.
+ *
+ * Supports both explicit width/height and size presets.
+ * Content is projected, with an optional `<mj-dialog-actions>` for the footer.
+ *
+ * @example
+ * ```html
+ * <mj-dialog [Visible]="showDialog" Title="Confirm" (Close)="onClose()">
+ *   <p>Are you sure?</p>
+ *   <mj-dialog-actions>
+ *     <button mjButton variant="primary" (click)="onConfirm()">Yes</button>
+ *     <button mjButton (click)="onClose()">No</button>
+ *   </mj-dialog-actions>
+ * </mj-dialog>
+ * ```
+ */
+export class MJDialogComponent {
+    _visible = false;
+    static nextId = 0;
+    set Visible(value) {
+        const wasVisible = this._visible;
+        this._visible = value;
+        if (value && !wasVisible) {
+            this.onOpen();
+        }
+        if (!value && wasVisible) {
+            this.onCloseInternal();
+        }
+    }
+    get Visible() {
+        return this._visible;
+    }
+    Title = '';
+    Width = null;
+    Height = null;
+    Size = 'auto';
+    Closeable = true;
+    MinWidth = null;
+    Close = new EventEmitter();
+    DialogId = MJDialogComponent.nextId++;
+    get dialogId() {
+        return this.DialogId;
+    }
+    get resolvedWidth() {
+        if (this.Width) {
+            return typeof this.Width === 'number' ? `${this.Width}px` : this.Width;
+        }
+        return SIZE_MAP[this.Size] ?? 'auto';
+    }
+    get resolvedHeight() {
+        if (this.Height) {
+            return typeof this.Height === 'number' ? `${this.Height}px` : this.Height;
+        }
+        return 'auto';
+    }
+    OnEscapeKey() {
+        if (this.Visible && this.Closeable) {
+            this.OnCloseClick();
+        }
+    }
+    OnBackdropClick(event) {
+        if (this.Closeable) {
+            this.OnCloseClick();
+        }
+    }
+    OnCloseClick() {
+        this.Close.emit();
+    }
+    onOpen() {
+        document.body.style.overflow = 'hidden';
+    }
+    onCloseInternal() {
+        document.body.style.overflow = '';
+    }
+    ngOnDestroy() {
+        document.body.style.overflow = '';
+    }
+    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) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵconditionalCreate(0, MJDialogComponent_Conditional_0_Template, 6, 10, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDialogComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-dialog',
+                standalone: true,
+                template: `
+    @if (Visible) {
+      <div class="mj-dialog-backdrop" (click)="OnBackdropClick($event)">
+        <div class="mj-dialog-container"
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-labelledby]="Title ? 'mj-dialog-title-' + dialogId : null"
+          [style.width]="resolvedWidth"
+          [style.height]="resolvedHeight"
+          [style.max-width]="'90vw'"
+          [style.max-height]="'90vh'"
+          (click)="$event.stopPropagation()">
+
+          <!-- Title bar -->
+          @if (Title || Closeable) {
+            <div class="mj-dialog-titlebar">
+              @if (Title) {
+                <h2 class="mj-dialog-title" [id]="'mj-dialog-title-' + dialogId">{{ Title }}</h2>
+              }
+              <ng-content select="mj-dialog-titlebar"></ng-content>
+              @if (Closeable) {
+                <button class="mj-dialog-close" (click)="OnCloseClick()" aria-label="Close dialog">
+                  <i class="fa-solid fa-times"></i>
+                </button>
+              }
+            </div>
+          }
+
+          <!-- Body -->
+          <div class="mj-dialog-body">
+            <ng-content></ng-content>
+          </div>
+
+          <!-- Actions (projected) -->
+          <ng-content select="mj-dialog-actions"></ng-content>
+        </div>
+      </div>
+    }
+  `
+            }]
+    }], null, { Visible: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Width: [{
+            type: Input
+        }], Height: [{
+            type: Input
+        }], Size: [{
+            type: Input
+        }], Closeable: [{
+            type: Input
+        }], MinWidth: [{
+            type: Input
+        }], Close: [{
+            type: Output
+        }], OnEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogComponent, { className: "MJDialogComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 86 }); })();
+/**
+ * mj-dialog-titlebar — Custom titlebar content for mj-dialog.
+ *
+ * Replaces `<kendo-dialog-titlebar>`.
+ *
+ * @example
+ * ```html
+ * <mj-dialog [Visible]="show" (Close)="onClose()">
+ *   <mj-dialog-titlebar>
+ *     <i class="fa-solid fa-save"></i> Custom Title
+ *   </mj-dialog-titlebar>
+ *   <p>Dialog content</p>
+ * </mj-dialog>
+ * ```
+ */
+export class MJDialogTitlebarComponent {
+    static ɵfac = function MJDialogTitlebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJDialogTitlebarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJDialogTitlebarComponent, selectors: [["mj-dialog-titlebar"]], ngContentSelectors: _c2, decls: 1, vars: 0, template: function MJDialogTitlebarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDialogTitlebarComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-dialog-titlebar',
+                standalone: true,
+                template: `<ng-content></ng-content>`
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogTitlebarComponent, { className: "MJDialogTitlebarComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 184 }); })();
+/**
+ * mj-dialog-actions — Footer action bar for mj-dialog.
+ *
+ * Replaces `<kendo-dialog-actions>`.
+ *
+ * @example
+ * ```html
+ * <mj-dialog-actions>
+ *   <button mjButton variant="primary">Save</button>
+ *   <button mjButton>Cancel</button>
+ * </mj-dialog-actions>
+ * ```
+ */
+export class MJDialogActionsComponent {
+    static ɵfac = function MJDialogActionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJDialogActionsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJDialogActionsComponent, selectors: [["mj-dialog-actions"]], ngContentSelectors: _c2, decls: 2, vars: 0, consts: [[1, "mj-dialog-actions"]], template: function MJDialogActionsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJDialogActionsComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-dialog-actions',
+                standalone: true,
+                template: `
+    <div class="mj-dialog-actions">
+      <ng-content></ng-content>
+    </div>
+  `
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJDialogActionsComponent, { className: "MJDialogActionsComponent", filePath: "lib/dialog/dialog.component.ts", lineNumber: 208 }); })();
+//# sourceMappingURL=dialog.component.js.map

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

@@ -0,0 +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"]}

package/dist/lib/dialog/dialog.scss

@@ -0,0 +1,134 @@
+/**
+ * MJ Dialog Styles
+ *
+ * Replaces Kendo dialog styling. Uses --mj-* semantic design tokens.
+ */
+
+/* ========== Backdrop ========== */
+.mj-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  animation: mj-dialog-fade-in var(--mj-transition-fast);
+}
+
+/* ========== Container ========== */
+.mj-dialog-container {
+  display: flex;
+  flex-direction: column;
+  background: var(--mj-bg-surface);
+  border-radius: var(--mj-radius-lg);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: mj-dialog-scale-in var(--mj-transition-base);
+}
+
+/* ========== Title Bar ========== */
+.mj-dialog-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--mj-border-default);
+  flex-shrink: 0;
+}
+
+.mj-dialog-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: var(--mj-font-semibold);
+  color: var(--mj-text-primary);
+  line-height: 1.4;
+}
+
+.mj-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--mj-text-muted);
+  border-radius: var(--mj-radius-sm);
+  transition: var(--mj-transition-colors);
+  flex-shrink: 0;
+  margin-left: 12px;
+
+  &:hover {
+    background: var(--mj-bg-surface-hover);
+    color: var(--mj-text-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--mj-focus-ring);
+  }
+}
+
+/* ========== Body ========== */
+.mj-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  color: var(--mj-text-primary);
+
+  /* Inputs inside dialogs need contrast against the surface background */
+  .mj-input,
+  .mj-textarea,
+  .mj-numeric-input,
+  .mj-dropdown {
+    background: var(--mj-bg-surface-card);
+  }
+}
+
+/* ========== Actions ========== */
+.mj-dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--mj-border-default);
+  flex-shrink: 0;
+}
+
+/* ========== Animations ========== */
+@keyframes mj-dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes mj-dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ========== Mobile ========== */
+@media (max-width: 767px) {
+  .mj-dialog-container {
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    border-radius: 0;
+  }
+}
+
+/* ========== Reduced Motion ========== */
+@media (prefers-reduced-motion: reduce) {
+  .mj-dialog-backdrop,
+  .mj-dialog-container {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,114 @@
+import { ComponentRef, Type, ViewContainerRef } from '@angular/core';
+import { Observable } from 'rxjs';
+/**
+ * Internal container component that wraps dialog content.
+ * This is dynamically created by MJDialogService.
+ */
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Result returned when a dialog action button is clicked.
+ */
+export interface MJDialogAction {
+    text: string;
+    primary?: boolean;
+    themeColor?: string;
+}
+/**
+ * Options for opening a dialog programmatically.
+ */
+export interface MJDialogSettings {
+    /** Dialog title */
+    title?: string;
+    /** Content: either a string message or a Component class */
+    content?: string | Type<unknown>;
+    /** Action buttons shown in the footer */
+    actions?: MJDialogAction[];
+    /** Dialog width in pixels */
+    width?: number;
+    /** Dialog minimum width in pixels */
+    minWidth?: number;
+    /** Dialog height in pixels */
+    height?: number;
+    /** ViewContainerRef to attach the dialog to (for proper DI context) */
+    appendTo?: ViewContainerRef;
+}
+/**
+ * Reference to an open dialog. Used to access content instance and subscribe to results.
+ */
+export declare class MJDialogRef {
+    private resultSubject;
+    private containerRef;
+    /** The content component instance (when content is a Component class) */
+    Content: {
+        instance: Record<string, unknown>;
+    } | null;
+    /** Observable that emits when the dialog is closed */
+    get Result(): Observable<unknown>;
+    /** @internal */
+    SetContainerRef(ref: ComponentRef<MJDialogContainerComponent>): void;
+    /** Close the dialog with a result */
+    Close(result?: unknown): void;
+}
+export declare class MJDialogContainerComponent {
+    Title: string;
+    StringContent: string;
+    Width: number | null;
+    MinWidth: number | null;
+    Height: number | null;
+    Actions: MJDialogAction[];
+    ActionClicked: EventEmitter<MJDialogAction>;
+    CloseClicked: EventEmitter<void>;
+    OnBackdropClick(): void;
+    OnCloseClick(): void;
+    OnActionClick(action: MJDialogAction): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJDialogContainerComponent, "mj-dialog-container-internal", never, { "Title": { "alias": "Title"; "required": false; }; "StringContent": { "alias": "StringContent"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "MinWidth": { "alias": "MinWidth"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Actions": { "alias": "Actions"; "required": false; }; }, { "ActionClicked": "ActionClicked"; "CloseClicked": "CloseClicked"; }, never, never, true, never>;
+}
+/**
+ * MJDialogService — Programmatic dialog opening. Replaces Kendo `DialogService`.
+ *
+ * @example
+ * ```typescript
+ * // Simple confirm
+ * const dialogRef = this.dialogService.Open({
+ *   title: 'Confirm',
+ *   content: 'Are you sure?',
+ *   actions: [
+ *     { text: 'OK', primary: true },
+ *     { text: 'Cancel' }
+ *   ]
+ * });
+ * dialogRef.Result.subscribe(result => { ... });
+ *
+ * // Component content
+ * const dialogRef = this.dialogService.Open({
+ *   content: MyDialogComponent,
+ *   width: 500
+ * });
+ * dialogRef.Content.instance.someInput = 'value';
+ * dialogRef.Result.subscribe(result => { ... });
+ * ```
+ */
+export declare class MJDialogService {
+    private appRef;
+    private injector;
+    /**
+     * Open a dialog programmatically.
+     *
+     * Kendo-compatible API: accepts `content` as string or Component class,
+     * returns a ref with `.Content.instance` and `.Result` observable.
+     */
+    Open(settings: MJDialogSettings): MJDialogRef;
+    private createContainer;
+    private configureContainer;
+    private attachToDOM;
+    private attachContentComponent;
+    /**
+     * Kendo-compatible alias — lowercase `open` for easier migration.
+     */
+    open(settings: MJDialogSettings): MJDialogRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MJDialogService>;
+}
+//# sourceMappingURL=dialog.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.service.d.ts","sourceRoot":"","sources":["../../../src/lib/dialog/dialog.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,IAAI,EACJ,gBAAgB,EAKjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAW,UAAU,EAAE,MAAM,MAAM,CAAC;AA4D3C;;;GAGG;AACH,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;;AA9DvE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,yCAAyC;IACzC,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,YAAY,CAAyD;IAE7E,yEAAyE;IACzE,OAAO,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,GAAG,IAAI,CAAQ;IAE7D,sDAAsD;IACtD,IAAI,MAAM,IAAI,UAAU,CAAC,OAAO,CAAC,CAEhC;IAED,gBAAgB;IAChB,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,0BAA0B,CAAC,GAAG,IAAI;IAIpE,qCAAqC;IACrC,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;CAM9B;AAQD,qBA0Ka,0BAA0B;IAC5B,KAAK,SAAM;IACX,aAAa,SAAM;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC/B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC7B,OAAO,EAAE,cAAc,EAAE,CAAM;IAC9B,aAAa,+BAAsC;IACnD,YAAY,qBAA4B;IAElD,eAAe,IAAI,IAAI;IAIvB,YAAY,IAAI,IAAI;IAIpB,aAAa,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;yCAlBhC,0BAA0B;2CAA1B,0BAA0B;CAqBtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,QAAQ,CAAoB;IAEpC;;;;;OAKG;IACH,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,WAAW;IAa7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,sBAAsB;IAoB9B;;OAEG;IACH,IAAI,CAAC,QAAQ,EAAE,gBAAgB,GAAG,WAAW;yCAlFlC,eAAe;6CAAf,eAAe;CAqF3B"}