@memberjunction/ng-ui-components 0.0.1 → 5.24.0

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

@@ -0,0 +1,115 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mj-window — Floating window panel. Replaces `<kendo-window>`.
+ *
+ * Unlike mj-dialog, this does NOT have a backdrop and does NOT block interaction
+ * with the rest of the page. It's a floating panel, similar to Kendo's Window.
+ *
+ * Supports dragging (via titlebar), resizing (via edges/corners), minimize, and maximize.
+ *
+ * @example
+ * ```html
+ * <mj-window [Visible]="showWindow" Title="Details" [Width]="600" [Height]="400"
+ *            [Draggable]="true" [Resizable]="true" (Close)="onClose()"
+ *            (StateChange)="onStateChange($event)">
+ *   <p>Window content</p>
+ * </mj-window>
+ * ```
+ */
+export declare class MJWindowComponent implements OnDestroy {
+    private _visible;
+    private static nextId;
+    set Visible(value: boolean);
+    get Visible(): boolean;
+    Title: string;
+    set Width(value: number | string | null);
+    get Width(): number | string | null;
+    set Height(value: number | string | null);
+    get Height(): number | string | null;
+    set Top(value: number | null);
+    get Top(): number | null;
+    set Left(value: number | null);
+    get Left(): number | null;
+    MinWidth: number | null;
+    MinHeight: number | null;
+    Draggable: boolean;
+    Resizable: boolean;
+    /** Window state: 'default' or 'maximized'. */
+    set State(value: 'default' | 'maximized');
+    get State(): 'default' | 'maximized';
+    Close: EventEmitter<void>;
+    StateChange: EventEmitter<"default" | "maximized">;
+    Resize: EventEmitter<void>;
+    WindowId: number;
+    private _state;
+    private _width;
+    private _height;
+    private currentTop;
+    private currentLeft;
+    private currentWidth;
+    private currentHeight;
+    private savedTop;
+    private savedLeft;
+    private savedWidth;
+    private savedHeight;
+    private isDragging;
+    private dragStartX;
+    private dragStartY;
+    private dragStartTop;
+    private dragStartLeft;
+    private isResizing;
+    private resizeDirection;
+    private resizeStartX;
+    private resizeStartY;
+    private resizeStartWidth;
+    private resizeStartHeight;
+    private resizeStartTop;
+    private resizeStartLeft;
+    private boundOnMouseMove;
+    private boundOnMouseUp;
+    private elementRef;
+    private cdr;
+    private ngZone;
+    get hasExplicitPosition(): boolean;
+    get ResolvedTransform(): string;
+    get resolvedWidth(): string;
+    get resolvedHeight(): string;
+    get resolvedTop(): string;
+    get resolvedLeft(): string;
+    OnEscapeKey(): void;
+    OnCloseClick(): void;
+    OnDragStart(event: MouseEvent): void;
+    OnResizeStart(event: MouseEvent, direction: string): void;
+    private attachMouseListeners;
+    private onMouseMove;
+    private handleResize;
+    private onMouseUp;
+    private detachMouseListeners;
+    private getWindowElement;
+    private parseSize;
+    /** Programmatic method to update position */
+    SetPosition(top: number, left: number): void;
+    /** Programmatic method to update size */
+    SetSize(width: number, height: number): void;
+    /** Get the current window element for DOM queries */
+    GetWindowElement(): HTMLElement | null;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJWindowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJWindowComponent, "mj-window", never, { "Visible": { "alias": "Visible"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Top": { "alias": "Top"; "required": false; }; "Left": { "alias": "Left"; "required": false; }; "MinWidth": { "alias": "MinWidth"; "required": false; }; "MinHeight": { "alias": "MinHeight"; "required": false; }; "Draggable": { "alias": "Draggable"; "required": false; }; "Resizable": { "alias": "Resizable"; "required": false; }; "State": { "alias": "State"; "required": false; }; }, { "Close": "Close"; "StateChange": "StateChange"; "Resize": "Resize"; }, never, ["mj-window-titlebar", "*", "mj-window-actions"], true, never>;
+}
+/**
+ * mj-window-titlebar — Custom titlebar for mj-window. Replaces `<kendo-window-titlebar>`.
+ */
+export declare class MJWindowTitlebarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJWindowTitlebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJWindowTitlebarComponent, "mj-window-titlebar", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * mj-window-actions — Footer actions for mj-window.
+ */
+export declare class MJWindowActionsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJWindowActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJWindowActionsComponent, "mj-window-actions", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=window.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"window.component.d.ts","sourceRoot":"","sources":["../../../src/lib/window/window.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/window/window.component.js

@@ -0,0 +1,502 @@
+import { Component, Input, Output, EventEmitter, HostListener, ElementRef, ChangeDetectorRef, NgZone, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = [[["mj-window-titlebar"]], "*", [["mj-window-actions"]]];
+const _c1 = ["mj-window-titlebar", "*", "mj-window-actions"];
+function MJWindowComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 7);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "n")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(1, "div", 8);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "s")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "div", 9);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "e")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 10);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "w")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 11);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_4_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "ne")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 12);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "nw")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 13);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "se")); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "div", 14);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Conditional_1_Template_div_mousedown_7_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnResizeStart($event, "sw")); });
+    i0.ɵɵdomElementEnd();
+} }
+function MJWindowComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "h3", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("id", "mj-window-title-" + ctx_r2.WindowId);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.Title);
+} }
+function MJWindowComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵconditionalCreate(1, MJWindowComponent_Conditional_0_Conditional_1_Template, 8, 0);
+    i0.ɵɵdomElementStart(2, "div", 2);
+    i0.ɵɵdomListener("mousedown", function MJWindowComponent_Conditional_0_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDragStart($event)); });
+    i0.ɵɵconditionalCreate(3, MJWindowComponent_Conditional_0_Conditional_3_Template, 2, 2, "h3", 3);
+    i0.ɵɵprojection(4);
+    i0.ɵɵdomElementStart(5, "button", 4);
+    i0.ɵɵdomListener("click", function MJWindowComponent_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnCloseClick()); })("mousedown", function MJWindowComponent_Conditional_0_Template_button_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵdomElement(6, "i", 5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(7, "div", 6);
+    i0.ɵɵprojection(8, 1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵprojection(9, 2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.State === "maximized" ? "100vw" : ctx_r2.resolvedWidth)("height", ctx_r2.State === "maximized" ? "100vh" : ctx_r2.resolvedHeight)("top", ctx_r2.State === "maximized" ? "0" : ctx_r2.resolvedTop)("left", ctx_r2.State === "maximized" ? "0" : ctx_r2.resolvedLeft)("transform", ctx_r2.ResolvedTransform)("min-width", ctx_r2.MinWidth ? ctx_r2.MinWidth + "px" : null)("min-height", ctx_r2.MinHeight ? ctx_r2.MinHeight + "px" : null)("max-width", ctx_r2.State === "maximized" ? "100vw" : "90vw")("max-height", ctx_r2.State === "maximized" ? "100vh" : "90vh")("border-radius", ctx_r2.State === "maximized" ? "0" : null);
+    i0.ɵɵclassProp("mj-window--maximized", ctx_r2.State === "maximized")("mj-window--draggable", ctx_r2.Draggable)("mj-window--resizable", ctx_r2.Resizable && ctx_r2.State !== "maximized");
+    i0.ɵɵattribute("aria-labelledby", ctx_r2.Title ? "mj-window-title-" + ctx_r2.WindowId : null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Resizable && ctx_r2.State !== "maximized" ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.Title ? 3 : -1);
+} }
+const _c2 = ["*"];
+/**
+ * mj-window — Floating window panel. Replaces `<kendo-window>`.
+ *
+ * Unlike mj-dialog, this does NOT have a backdrop and does NOT block interaction
+ * with the rest of the page. It's a floating panel, similar to Kendo's Window.
+ *
+ * Supports dragging (via titlebar), resizing (via edges/corners), minimize, and maximize.
+ *
+ * @example
+ * ```html
+ * <mj-window [Visible]="showWindow" Title="Details" [Width]="600" [Height]="400"
+ *            [Draggable]="true" [Resizable]="true" (Close)="onClose()"
+ *            (StateChange)="onStateChange($event)">
+ *   <p>Window content</p>
+ * </mj-window>
+ * ```
+ */
+export class MJWindowComponent {
+    _visible = false;
+    static nextId = 0;
+    set Visible(value) { this._visible = value; }
+    get Visible() { return this._visible; }
+    Title = '';
+    set Width(value) {
+        this._width = value;
+        if (value != null)
+            this.currentWidth = this.parseSize(value);
+    }
+    get Width() { return this._width; }
+    set Height(value) {
+        this._height = value;
+        if (value != null)
+            this.currentHeight = this.parseSize(value);
+    }
+    get Height() { return this._height; }
+    set Top(value) { if (value != null)
+        this.currentTop = value; }
+    get Top() { return this.currentTop; }
+    set Left(value) { if (value != null)
+        this.currentLeft = value; }
+    get Left() { return this.currentLeft; }
+    MinWidth = null;
+    MinHeight = null;
+    Draggable = false;
+    Resizable = false;
+    /** Window state: 'default' or 'maximized'. */
+    set State(value) {
+        if (value !== this._state) {
+            if (value === 'maximized') {
+                this.savedTop = this.currentTop;
+                this.savedLeft = this.currentLeft;
+                this.savedWidth = this.currentWidth;
+                this.savedHeight = this.currentHeight;
+            }
+            else if (this._state === 'maximized') {
+                this.currentTop = this.savedTop;
+                this.currentLeft = this.savedLeft;
+                this.currentWidth = this.savedWidth;
+                this.currentHeight = this.savedHeight;
+            }
+            this._state = value;
+            this.StateChange.emit(value);
+        }
+    }
+    get State() { return this._state; }
+    Close = new EventEmitter();
+    StateChange = new EventEmitter();
+    Resize = new EventEmitter();
+    WindowId = MJWindowComponent.nextId++;
+    // Internal position/size tracking
+    _state = 'default';
+    _width = null;
+    _height = null;
+    currentTop = null;
+    currentLeft = null;
+    currentWidth = null;
+    currentHeight = null;
+    // Saved dimensions for restore from maximize
+    savedTop = null;
+    savedLeft = null;
+    savedWidth = null;
+    savedHeight = null;
+    // Drag state
+    isDragging = false;
+    dragStartX = 0;
+    dragStartY = 0;
+    dragStartTop = 0;
+    dragStartLeft = 0;
+    // Resize state
+    isResizing = false;
+    resizeDirection = '';
+    resizeStartX = 0;
+    resizeStartY = 0;
+    resizeStartWidth = 0;
+    resizeStartHeight = 0;
+    resizeStartTop = 0;
+    resizeStartLeft = 0;
+    boundOnMouseMove = null;
+    boundOnMouseUp = null;
+    elementRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
+    get hasExplicitPosition() {
+        return this.currentTop != null && this.currentLeft != null;
+    }
+    get ResolvedTransform() {
+        if (this.State === 'maximized')
+            return 'none';
+        const hasTop = this.currentTop != null;
+        const hasLeft = this.currentLeft != null;
+        if (hasTop && hasLeft)
+            return 'none';
+        if (hasTop && !hasLeft)
+            return 'translateX(-50%)';
+        if (!hasTop && hasLeft)
+            return 'translateY(-50%)';
+        return 'translate(-50%, -50%)';
+    }
+    get resolvedWidth() {
+        if (this.currentWidth != null)
+            return `${this.currentWidth}px`;
+        if (this.Width)
+            return typeof this.Width === 'number' ? `${this.Width}px` : this.Width;
+        return '500px';
+    }
+    get resolvedHeight() {
+        if (this.currentHeight != null)
+            return `${this.currentHeight}px`;
+        if (this.Height)
+            return typeof this.Height === 'number' ? `${this.Height}px` : this.Height;
+        return 'auto';
+    }
+    get resolvedTop() {
+        return this.currentTop != null ? `${this.currentTop}px` : '50%';
+    }
+    get resolvedLeft() {
+        return this.currentLeft != null ? `${this.currentLeft}px` : '50%';
+    }
+    OnEscapeKey() {
+        if (this.Visible)
+            this.OnCloseClick();
+    }
+    OnCloseClick() {
+        this.Close.emit();
+    }
+    // --- Drag handling ---
+    OnDragStart(event) {
+        if (!this.Draggable || this.State === 'maximized')
+            return;
+        // Don't drag if clicking buttons inside titlebar
+        if (event.target.closest('button'))
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        const windowEl = this.getWindowElement();
+        if (windowEl) {
+            const rect = windowEl.getBoundingClientRect();
+            this.dragStartTop = rect.top;
+            this.dragStartLeft = rect.left;
+            // Ensure we're using absolute positioning once dragging starts
+            if (this.currentTop == null) {
+                this.currentTop = rect.top;
+                this.currentLeft = rect.left;
+                this.cdr.detectChanges();
+            }
+        }
+        this.attachMouseListeners();
+    }
+    // --- Resize handling ---
+    OnResizeStart(event, direction) {
+        if (!this.Resizable || this.State === 'maximized')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isResizing = true;
+        this.resizeDirection = direction;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        const windowEl = this.getWindowElement();
+        if (windowEl) {
+            const rect = windowEl.getBoundingClientRect();
+            this.resizeStartWidth = rect.width;
+            this.resizeStartHeight = rect.height;
+            this.resizeStartTop = rect.top;
+            this.resizeStartLeft = rect.left;
+            // Ensure absolute positioning
+            if (this.currentTop == null) {
+                this.currentTop = rect.top;
+                this.currentLeft = rect.left;
+            }
+            if (this.currentWidth == null) {
+                this.currentWidth = rect.width;
+            }
+            if (this.currentHeight == null) {
+                this.currentHeight = rect.height;
+            }
+        }
+        this.attachMouseListeners();
+    }
+    attachMouseListeners() {
+        this.ngZone.runOutsideAngular(() => {
+            this.boundOnMouseMove = (e) => this.onMouseMove(e);
+            this.boundOnMouseUp = (e) => this.onMouseUp(e);
+            document.addEventListener('mousemove', this.boundOnMouseMove);
+            document.addEventListener('mouseup', this.boundOnMouseUp);
+        });
+    }
+    onMouseMove(event) {
+        if (this.isDragging) {
+            const dx = event.clientX - this.dragStartX;
+            const dy = event.clientY - this.dragStartY;
+            this.currentTop = Math.max(0, this.dragStartTop + dy);
+            this.currentLeft = Math.max(0, this.dragStartLeft + dx);
+            this.ngZone.run(() => this.cdr.detectChanges());
+        }
+        else if (this.isResizing) {
+            this.handleResize(event);
+            this.ngZone.run(() => {
+                this.cdr.detectChanges();
+                this.Resize.emit();
+            });
+        }
+    }
+    handleResize(event) {
+        const dx = event.clientX - this.resizeStartX;
+        const dy = event.clientY - this.resizeStartY;
+        const minW = this.MinWidth || 200;
+        const minH = this.MinHeight || 150;
+        const dir = this.resizeDirection;
+        if (dir.includes('e')) {
+            this.currentWidth = Math.max(minW, this.resizeStartWidth + dx);
+        }
+        if (dir.includes('w')) {
+            const newWidth = Math.max(minW, this.resizeStartWidth - dx);
+            this.currentLeft = this.resizeStartLeft + (this.resizeStartWidth - newWidth);
+            this.currentWidth = newWidth;
+        }
+        if (dir.includes('s')) {
+            this.currentHeight = Math.max(minH, this.resizeStartHeight + dy);
+        }
+        if (dir.includes('n')) {
+            const newHeight = Math.max(minH, this.resizeStartHeight - dy);
+            this.currentTop = this.resizeStartTop + (this.resizeStartHeight - newHeight);
+            this.currentHeight = newHeight;
+        }
+    }
+    onMouseUp(_event) {
+        this.isDragging = false;
+        this.isResizing = false;
+        this.detachMouseListeners();
+    }
+    detachMouseListeners() {
+        if (this.boundOnMouseMove) {
+            document.removeEventListener('mousemove', this.boundOnMouseMove);
+            this.boundOnMouseMove = null;
+        }
+        if (this.boundOnMouseUp) {
+            document.removeEventListener('mouseup', this.boundOnMouseUp);
+            this.boundOnMouseUp = null;
+        }
+    }
+    getWindowElement() {
+        return this.elementRef.nativeElement.querySelector('.mj-window');
+    }
+    parseSize(value) {
+        if (typeof value === 'number')
+            return value;
+        if (value.endsWith('vw'))
+            return (parseFloat(value) / 100) * window.innerWidth;
+        if (value.endsWith('vh'))
+            return (parseFloat(value) / 100) * window.innerHeight;
+        if (value.endsWith('px'))
+            return parseFloat(value);
+        const parsed = parseFloat(value);
+        return isNaN(parsed) ? null : parsed;
+    }
+    /** Programmatic method to update position */
+    SetPosition(top, left) {
+        this.currentTop = top;
+        this.currentLeft = left;
+        this.cdr.detectChanges();
+    }
+    /** Programmatic method to update size */
+    SetSize(width, height) {
+        this.currentWidth = width;
+        this.currentHeight = height;
+        this.cdr.detectChanges();
+    }
+    /** Get the current window element for DOM queries */
+    GetWindowElement() {
+        return this.getWindowElement();
+    }
+    ngOnDestroy() {
+        this.detachMouseListeners();
+    }
+    static ɵfac = function MJWindowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJWindowComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJWindowComponent, selectors: [["mj-window"]], hostBindings: function MJWindowComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function MJWindowComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Visible: "Visible", Title: "Title", Width: "Width", Height: "Height", Top: "Top", Left: "Left", MinWidth: "MinWidth", MinHeight: "MinHeight", Draggable: "Draggable", Resizable: "Resizable", State: "State" }, outputs: { Close: "Close", StateChange: "StateChange", Resize: "Resize" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["role", "dialog", 1, "mj-window", 3, "mj-window--maximized", "mj-window--draggable", "mj-window--resizable", "width", "height", "top", "left", "transform", "min-width", "min-height", "max-width", "max-height", "border-radius"], ["role", "dialog", 1, "mj-window"], [1, "mj-window-titlebar", 3, "mousedown"], [1, "mj-window-title", 3, "id"], ["aria-label", "Close window", 1, "mj-window-close", 3, "click", "mousedown"], [1, "fa-solid", "fa-times"], [1, "mj-window-body"], [1, "mj-window-resize", "mj-window-resize--n", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--s", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--e", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--w", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--ne", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--nw", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--se", 3, "mousedown"], [1, "mj-window-resize", "mj-window-resize--sw", 3, "mousedown"]], template: function MJWindowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵconditionalCreate(0, MJWindowComponent_Conditional_0_Template, 10, 29, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJWindowComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-window',
+                standalone: true,
+                template: `
+    @if (Visible) {
+      <div class="mj-window"
+        [class.mj-window--maximized]="State === 'maximized'"
+        [class.mj-window--draggable]="Draggable"
+        [class.mj-window--resizable]="Resizable && State !== 'maximized'"
+        [style.width]="State === 'maximized' ? '100vw' : resolvedWidth"
+        [style.height]="State === 'maximized' ? '100vh' : resolvedHeight"
+        [style.top]="State === 'maximized' ? '0' : resolvedTop"
+        [style.left]="State === 'maximized' ? '0' : resolvedLeft"
+        [style.transform]="ResolvedTransform"
+        [style.min-width]="MinWidth ? MinWidth + 'px' : null"
+        [style.min-height]="MinHeight ? MinHeight + 'px' : null"
+        [style.max-width]="State === 'maximized' ? '100vw' : '90vw'"
+        [style.max-height]="State === 'maximized' ? '100vh' : '90vh'"
+        [style.border-radius]="State === 'maximized' ? '0' : null"
+        role="dialog"
+        [attr.aria-labelledby]="Title ? 'mj-window-title-' + WindowId : null">
+
+        <!-- Resize handles -->
+        @if (Resizable && State !== 'maximized') {
+          <div class="mj-window-resize mj-window-resize--n" (mousedown)="OnResizeStart($event, 'n')"></div>
+          <div class="mj-window-resize mj-window-resize--s" (mousedown)="OnResizeStart($event, 's')"></div>
+          <div class="mj-window-resize mj-window-resize--e" (mousedown)="OnResizeStart($event, 'e')"></div>
+          <div class="mj-window-resize mj-window-resize--w" (mousedown)="OnResizeStart($event, 'w')"></div>
+          <div class="mj-window-resize mj-window-resize--ne" (mousedown)="OnResizeStart($event, 'ne')"></div>
+          <div class="mj-window-resize mj-window-resize--nw" (mousedown)="OnResizeStart($event, 'nw')"></div>
+          <div class="mj-window-resize mj-window-resize--se" (mousedown)="OnResizeStart($event, 'se')"></div>
+          <div class="mj-window-resize mj-window-resize--sw" (mousedown)="OnResizeStart($event, 'sw')"></div>
+        }
+
+        <div class="mj-window-titlebar"
+          (mousedown)="OnDragStart($event)">
+          @if (Title) {
+            <h3 class="mj-window-title" [id]="'mj-window-title-' + WindowId">{{ Title }}</h3>
+          }
+          <ng-content select="mj-window-titlebar"></ng-content>
+          <button class="mj-window-close" (click)="OnCloseClick()" (mousedown)="$event.stopPropagation()" aria-label="Close window">
+            <i class="fa-solid fa-times"></i>
+          </button>
+        </div>
+
+        <div class="mj-window-body">
+          <ng-content></ng-content>
+        </div>
+
+        <ng-content select="mj-window-actions"></ng-content>
+      </div>
+    }
+  `
+            }]
+    }], null, { Visible: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Width: [{
+            type: Input
+        }], Height: [{
+            type: Input
+        }], Top: [{
+            type: Input
+        }], Left: [{
+            type: Input
+        }], MinWidth: [{
+            type: Input
+        }], MinHeight: [{
+            type: Input
+        }], Draggable: [{
+            type: Input
+        }], Resizable: [{
+            type: Input
+        }], State: [{
+            type: Input
+        }], Close: [{
+            type: Output
+        }], StateChange: [{
+            type: Output
+        }], Resize: [{
+            type: Output
+        }], OnEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJWindowComponent, { className: "MJWindowComponent", filePath: "lib/window/window.component.ts", lineNumber: 74 }); })();
+/**
+ * mj-window-titlebar — Custom titlebar for mj-window. Replaces `<kendo-window-titlebar>`.
+ */
+export class MJWindowTitlebarComponent {
+    static ɵfac = function MJWindowTitlebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJWindowTitlebarComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJWindowTitlebarComponent, selectors: [["mj-window-titlebar"]], ngContentSelectors: _c2, decls: 1, vars: 0, template: function MJWindowTitlebarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["[_nghost-%COMP%] { display: contents; }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJWindowTitlebarComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-window-titlebar', standalone: true, template: `<ng-content></ng-content>`, styles: [":host { display: contents; }"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJWindowTitlebarComponent, { className: "MJWindowTitlebarComponent", filePath: "lib/window/window.component.ts", lineNumber: 395 }); })();
+/**
+ * mj-window-actions — Footer actions for mj-window.
+ */
+export class MJWindowActionsComponent {
+    static ɵfac = function MJWindowActionsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJWindowActionsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJWindowActionsComponent, selectors: [["mj-window-actions"]], ngContentSelectors: _c2, decls: 2, vars: 0, consts: [[1, "mj-window-actions"]], template: function MJWindowActionsComponent_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(MJWindowActionsComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-window-actions',
+                standalone: true,
+                template: `<div class="mj-window-actions"><ng-content></ng-content></div>`
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJWindowActionsComponent, { className: "MJWindowActionsComponent", filePath: "lib/window/window.component.ts", lineNumber: 405 }); })();
+//# sourceMappingURL=window.component.js.map