@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-window.mjs

@@ -0,0 +1,1329 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, DOCUMENT, ElementRef, NgZone, input, afterNextRender, Pipe, ApplicationRef, Injector, signal, ViewContainerRef, computed, viewChild, TemplateRef, createComponent, Component, forwardRef, Injectable, contentChild, output, model, effect, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, Subject, asapScheduler, map, take } from 'rxjs';
+import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
+import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import { LucideMinimize, LucideMaximize, LucideMinus, LucideDynamicIcon, LucideX } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+class WindowActionTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowActionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: WindowActionTemplateDirective, isStandalone: true, selector: "ng-template[monaWindowActionTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowActionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaWindowActionTemplate]"
+                }]
+        }] });
+
+class WindowContentTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: WindowContentTemplateDirective, isStandalone: true, selector: "ng-template[monaWindowContentTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaWindowContentTemplate]"
+                }]
+        }] });
+
+class WindowFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: WindowFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaWindowFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaWindowFooterTemplate]"
+                }]
+        }] });
+
+class WindowTitleTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowTitleTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: WindowTitleTemplateDirective, isStandalone: true, selector: "ng-template[monaWindowTitleTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowTitleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaWindowTitleTemplate]"
+                }]
+        }] });
+
+const DefaultMaxWindowHeight = 800;
+const DefaultMaxWindowWidth = 1200;
+const DefaultMinWindowHeight = 50;
+const DefaultMinWindowWidth = 50;
+
+const KeyboardMoveStep = 10;
+const KeyboardMoveStepFine = 1;
+class WindowDragHandlerDirective {
+    #destroyRef;
+    #document;
+    #hostElementRef;
+    #zone;
+    #activeCleanup;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject(ElementRef);
+        this.#zone = inject(NgZone);
+        this.draggable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+        this.windowRef = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "windowRef" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.#setEvents()
+        });
+        this.#destroyRef.onDestroy(() => this.#activeCleanup?.());
+    }
+    onKeydown(event) {
+        if (!this.draggable()) {
+            return;
+        }
+        const step = event.shiftKey ? KeyboardMoveStepFine : KeyboardMoveStep;
+        const element = this.windowRef().element;
+        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
+        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        const initialTop = element.getBoundingClientRect().top;
+        const initialLeft = element.getBoundingClientRect().left;
+        let top = initialTop;
+        let left = initialLeft;
+        switch (event.key) {
+            case "ArrowUp":
+                top = Math.max(0, initialTop - step);
+                break;
+            case "ArrowDown":
+                top = Math.min(innerHeight, initialTop + step);
+                break;
+            case "ArrowLeft":
+                left = Math.max(0, initialLeft - step);
+                break;
+            case "ArrowRight":
+                left = Math.min(innerWidth, initialLeft + step);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        element.style.top = `${top}px`;
+        element.style.left = `${left}px`;
+        this.windowRef().moveStart$$.next();
+        this.windowRef().move$$.next({ top, left });
+        this.windowRef().moveEnd$$.next();
+    }
+    #onPointerDown(event) {
+        if (!this.draggable()) {
+            return;
+        }
+        const element = this.windowRef().element;
+        const initialX = event.clientX;
+        const initialY = event.clientY;
+        const initialTop = element.getBoundingClientRect().top;
+        const initialLeft = element.getBoundingClientRect().left;
+        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
+        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        let dragInitiated = false;
+        const onPointerMove = (event) => {
+            if (!dragInitiated) {
+                dragInitiated = true;
+                this.windowRef().moveStart$$.next();
+            }
+            if (event.clientX < 0 || event.clientX > innerWidth || event.clientY < 0 || event.clientY > innerHeight) {
+                return;
+            }
+            const deltaX = event.clientX - initialX;
+            const deltaY = event.clientY - initialY;
+            const top = initialTop + deltaY;
+            const left = initialLeft + deltaX;
+            element.style.top = `${top}px`;
+            element.style.left = `${left}px`;
+            this.windowRef().move$$.next({ top, left });
+        };
+        const cleanup = () => {
+            this.#document.removeEventListener("pointermove", onPointerMove);
+            this.#document.removeEventListener("pointerup", onPointerUp);
+            this.#activeCleanup = undefined;
+        };
+        const onPointerUp = () => {
+            cleanup();
+            if (dragInitiated) {
+                this.windowRef().moveEnd$$.next();
+                dragInitiated = false;
+            }
+        };
+        this.#activeCleanup = cleanup;
+        this.#document.addEventListener("pointermove", onPointerMove);
+        this.#document.addEventListener("pointerup", onPointerUp);
+    }
+    #setEvents() {
+        this.#zone.runOutsideAngular(() => {
+            fromEvent(this.#hostElementRef.nativeElement, "pointerdown")
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(event => this.#onPointerDown(event));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowDragHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: WindowDragHandlerDirective, isStandalone: true, selector: "div[monaWindowDragHandler]", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, windowRef: { classPropertyName: "windowRef", publicName: "windowRef", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowDragHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "div[monaWindowDragHandler]",
+                    host: {
+                        "(keydown)": "onKeydown($event)"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], windowRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowRef", required: true }] }] } });
+
+const KeyboardResizeStep = 10;
+const KeyboardResizeStepFine = 1;
+class WindowResizeHandlerDirective {
+    #destroyRef;
+    #document;
+    #hostElementRef;
+    #zone;
+    #activeCleanup;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject(ElementRef);
+        this.#zone = inject(NgZone);
+        this.direction = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.maxHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        this.maxWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        this.minHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
+        this.minWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        this.windowRef = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "windowRef" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.#setEvents()
+        });
+        this.#destroyRef.onDestroy(() => this.#activeCleanup?.());
+    }
+    onKeydown(event) {
+        const step = event.shiftKey ? KeyboardResizeStepFine : KeyboardResizeStep;
+        let deltaX = 0;
+        let deltaY = 0;
+        switch (event.key) {
+            case "ArrowUp":
+                deltaY = -step;
+                break;
+            case "ArrowDown":
+                deltaY = step;
+                break;
+            case "ArrowLeft":
+                deltaX = -step;
+                break;
+            case "ArrowRight":
+                deltaX = step;
+                break;
+            default:
+                return;
+        }
+        const element = this.windowRef().element;
+        const rect = element.getBoundingClientRect();
+        const initial = { width: rect.width, height: rect.height, top: rect.top, left: rect.left };
+        const result = this.#computeResize(this.direction(), deltaX, deltaY, initial, this.#bounds());
+        if (!result) {
+            return;
+        }
+        event.preventDefault();
+        this.#applyResize(element, result, initial);
+    }
+    #applyResize(element, result, initial) {
+        if (result.height != null) {
+            element.style.height = `${result.height}px`;
+        }
+        if (result.top != null) {
+            element.style.top = `${result.top}px`;
+        }
+        if (result.width != null) {
+            element.style.width = `${result.width}px`;
+        }
+        if (result.left != null) {
+            element.style.left = `${result.left}px`;
+        }
+        this.windowRef().resize$$.next({
+            width: result.width ?? initial.width,
+            height: result.height ?? initial.height,
+            left: result.left ?? initial.left,
+            top: result.top ?? initial.top
+        });
+    }
+    #bounds() {
+        const innerWidth = this.#document.defaultView?.innerWidth || DefaultMaxWindowWidth;
+        const innerHeight = this.#document.defaultView?.innerHeight || DefaultMaxWindowHeight;
+        return {
+            innerWidth,
+            innerHeight,
+            minWidth: this.minWidth() || DefaultMinWindowWidth,
+            minHeight: this.minHeight() || DefaultMinWindowHeight,
+            maxWidth: this.maxWidth() ?? innerWidth,
+            maxHeight: this.maxHeight() ?? innerHeight
+        };
+    }
+    #computeResize(direction, deltaX, deltaY, initial, bounds) {
+        const { minWidth, minHeight, maxWidth, maxHeight, innerWidth, innerHeight } = bounds;
+        let height;
+        let left;
+        let width;
+        let top;
+        switch (direction) {
+            case "northwest":
+                if (initial.top + deltaY <= 0 || initial.height - deltaY < minHeight) {
+                    return null;
+                }
+                if (initial.height - deltaY > maxHeight || initial.width - deltaX > maxWidth) {
+                    return null;
+                }
+                height = initial.height - deltaY;
+                top = initial.top + deltaY;
+                if (initial.left + deltaX < 0 || initial.width - deltaX < minWidth) {
+                    return null;
+                }
+                width = initial.width - deltaX;
+                left = initial.left + deltaX;
+                break;
+            case "north":
+                if (initial.top + deltaY <= 0 || initial.height - deltaY < minHeight) {
+                    return null;
+                }
+                if (initial.height - deltaY > maxHeight) {
+                    return null;
+                }
+                height = initial.height - deltaY;
+                top = initial.top + deltaY;
+                break;
+            case "northeast":
+                if (initial.top + deltaY <= 0 || initial.height - deltaY < minHeight) {
+                    return null;
+                }
+                if (initial.height - deltaY > maxHeight || initial.width + deltaX > maxWidth) {
+                    return null;
+                }
+                height = initial.height - deltaY;
+                top = initial.top + deltaY;
+                if (initial.width + deltaX < 100 || initial.left + initial.width + deltaX > innerWidth) {
+                    return null;
+                }
+                width = initial.width + deltaX;
+                break;
+            case "east":
+                if (initial.width + deltaX < minWidth || initial.left + initial.width + deltaX > innerWidth) {
+                    return null;
+                }
+                if (initial.width + deltaX > maxWidth) {
+                    return null;
+                }
+                width = initial.width + deltaX;
+                break;
+            case "southeast":
+                if (initial.height + deltaY < minHeight || initial.top + initial.height + deltaY > innerHeight) {
+                    return null;
+                }
+                if (initial.height + deltaY > maxHeight || initial.width + deltaX > maxWidth) {
+                    return null;
+                }
+                height = initial.height + deltaY;
+                if (initial.width + deltaX < minWidth || initial.left + initial.width + deltaX > innerWidth) {
+                    return null;
+                }
+                width = initial.width + deltaX;
+                break;
+            case "south":
+                if (initial.height + deltaY < minHeight || initial.top + initial.height + deltaY > innerHeight) {
+                    return null;
+                }
+                if (initial.height + deltaY > maxHeight) {
+                    return null;
+                }
+                height = initial.height + deltaY;
+                break;
+            case "southwest":
+                if (initial.height + deltaY < minHeight || initial.top + initial.height + deltaY > innerHeight) {
+                    return null;
+                }
+                if (initial.height + deltaY > maxHeight || initial.width - deltaX > maxWidth) {
+                    return null;
+                }
+                height = initial.height + deltaY;
+                if (initial.left + deltaX < 0 || initial.width - deltaX < minWidth) {
+                    return null;
+                }
+                width = initial.width - deltaX;
+                left = initial.left + deltaX;
+                break;
+            case "west":
+                if (initial.left + deltaX < 0 || initial.width - deltaX < minWidth) {
+                    return null;
+                }
+                if (initial.width - deltaX > maxWidth) {
+                    return null;
+                }
+                width = initial.width - deltaX;
+                left = initial.left + deltaX;
+                break;
+        }
+        return { width, height, left, top };
+    }
+    #onPointerDown(event) {
+        const element = this.windowRef().element;
+        const rect = element.getBoundingClientRect();
+        const initial = { width: rect.width, height: rect.height, top: rect.top, left: rect.left };
+        const initialX = event.clientX;
+        const initialY = event.clientY;
+        const oldSelectStart = this.#document.onselectstart;
+        const oldDragStart = this.#document.ondragstart;
+        this.#document.onselectstart = () => false;
+        this.#document.ondragstart = () => false;
+        const bounds = this.#bounds();
+        const onPointerMove = (event) => {
+            const deltaX = event.clientX - initialX;
+            const deltaY = event.clientY - initialY;
+            const result = this.#computeResize(this.direction(), deltaX, deltaY, initial, bounds);
+            if (!result) {
+                return;
+            }
+            this.#applyResize(element, result, initial);
+        };
+        const cleanup = () => {
+            this.#document.removeEventListener("pointermove", onPointerMove);
+            this.#document.removeEventListener("pointerup", onPointerUp);
+            this.#document.onselectstart = oldSelectStart;
+            this.#document.ondragstart = oldDragStart;
+            this.#activeCleanup = undefined;
+        };
+        const onPointerUp = () => {
+            cleanup();
+        };
+        this.#activeCleanup = cleanup;
+        this.#document.addEventListener("pointermove", onPointerMove);
+        this.#document.addEventListener("pointerup", onPointerUp);
+    }
+    #setEvents() {
+        this.#zone.runOutsideAngular(() => {
+            fromEvent(this.#hostElementRef.nativeElement, "pointerdown")
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(event => this.#onPointerDown(event));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowResizeHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: WindowResizeHandlerDirective, isStandalone: true, selector: "div[monaWindowResizeHandler]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, windowRef: { classPropertyName: "windowRef", publicName: "windowRef", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowResizeHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "div[monaWindowResizeHandler]",
+                    host: {
+                        "(keydown)": "onKeydown($event)"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], windowRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "windowRef", required: true }] }] } });
+
+const windowBaseVariants = cva(`
+        flex flex-col
+        bg-background
+        w-full h-full
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+const windowContentContainerVariants = cva(`
+        flex flex-col
+        relative w-full h-full
+        border border-border
+        shadow-sm
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg"
+        }
+    }
+});
+const windowContentVariants = cva(`
+        flex-1 overflow-auto
+    `);
+const windowResizerVariants = cva(`
+        absolute flex
+    `, {
+    variants: {
+        position: {
+            east: "top-0 bottom-0 -right-0.5 w-2 cursor-ew-resize",
+            north: "left-0 right-0 -top-0.5 h-2 cursor-ns-resize",
+            south: "left-0 right-0 -bottom-0.5 h-2 cursor-ns-resize",
+            west: "top-0 bottom-0 -left-0.5 w-2 cursor-ew-resize",
+            northeast: "-top-0.5 -right-0.5 w-2 h-2 cursor-nesw-resize",
+            northwest: "-top-0.5 -left-0.5 w-2 h-2 cursor-nwse-resize",
+            southeast: "-bottom-0.5 -right-0.5 w-2 h-2 cursor-nwse-resize",
+            southwest: "-bottom-0.5 -left-0.5 w-2 h-2 cursor-nesw-resize"
+        }
+    }
+});
+const windowTitleBarActionVariants = cva(`
+        flex items-center space-evenly
+    `);
+const windowTitleBarVariants = cva(`
+        flex items-center justify-start
+        px-2 py-1 text-sm overflow-hidden
+        border-b border-border
+    `, {
+    variants: {
+        look: {
+            default: "bg-secondary text-foreground",
+            primary: "bg-primary text-primary-foreground"
+        },
+        rounded: {
+            none: "rounded-ss-none rounded-se-none",
+            small: "rounded-ss-sm rounded-se-sm",
+            medium: "rounded-ss-md rounded-se-md",
+            large: "rounded-ss-lg rounded-se-lg"
+        }
+    }
+});
+const windowTitleContainerVariants = cva(`
+        flex items-center flex-1
+        h-full cursor-default select-none
+        overflow-hidden text-ellipsis
+    `);
+const windowTitleVariants = cva(`
+        font-semibold
+        overflow-hidden text-ellipsis whitespace-nowrap
+    `, {
+    variants: {
+        look: {
+            default: "text-foreground",
+            primary: "text-primary-foreground"
+        }
+    }
+});
+
+const windowBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowBaseVariants;
+        default:
+            return windowBaseVariants;
+    }
+};
+const windowContentContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowContentContainerVariants;
+        default:
+            return windowContentContainerVariants;
+    }
+};
+const windowContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowContentVariants;
+        default:
+            return windowContentVariants;
+    }
+};
+const windowResizerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowResizerVariants;
+        default:
+            return windowResizerVariants;
+    }
+};
+const windowTitleBarActionThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowTitleBarActionVariants;
+        default:
+            return windowTitleBarActionVariants;
+    }
+};
+const windowTitleBarThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowTitleBarVariants;
+        default:
+            return windowTitleBarVariants;
+    }
+};
+const windowTitleContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowTitleContainerVariants;
+        default:
+            return windowTitleContainerVariants;
+    }
+};
+const windowTitleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return windowTitleVariants;
+        default:
+            return windowTitleVariants;
+    }
+};
+
+class ResizePositionPipe {
+    #themeService = inject(ThemeService);
+    transform(position) {
+        if (!position) {
+            return null;
+        }
+        const theme = this.#themeService.theme();
+        return windowResizerThemeVariants(theme)({ position });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ResizePositionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ResizePositionPipe, isStandalone: true, name: "monaResizePosition" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ResizePositionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "monaResizePosition"
+                }]
+        }] });
+
+class WindowContentComponent {
+    #appRef;
+    #document;
+    #hostElementRef;
+    #injector;
+    #sizeBeforeMaximize;
+    #sizeBeforeMinimize;
+    #themeService;
+    #trapFocus;
+    #viewContainerRef;
+    constructor() {
+        this.#appRef = inject(ApplicationRef);
+        this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject(ElementRef);
+        this.#injector = inject(Injector);
+        this.#sizeBeforeMaximize = signal({ width: 0, height: 0, top: 0, left: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#sizeBeforeMaximize" }] : /* istanbul ignore next */ []));
+        this.#sizeBeforeMinimize = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#sizeBeforeMinimize" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.#trapFocus = inject(CdkTrapFocus);
+        this.#viewContainerRef = inject(ViewContainerRef);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.windowData.rounded;
+            return windowBaseThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.componentAnchor = viewChild.required("componentAnchor", { ...(ngDevMode ? { debugName: "componentAnchor" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return windowContentThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.contentContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.windowData.rounded;
+            return windowContentContainerThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = computed(() => {
+            const content = this.windowData.content;
+            return content instanceof TemplateRef ? content : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.contentType = signal("template", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentType" }] : /* istanbul ignore next */ []));
+        this.headerId = createElementControlId();
+        this.maximizeIcon = computed(() => {
+            return this.maximized() && !this.minimized() ? LucideMinimize : LucideMaximize;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maximizeIcon" }] : /* istanbul ignore next */ []));
+        this.maximized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+        this.minimized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+        this.titleBarActionClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return windowTitleBarActionThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleBarActionClass" }] : /* istanbul ignore next */ []));
+        this.titleBarClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const look = this.windowData.look;
+            const rounded = this.windowData.rounded;
+            return windowTitleBarThemeVariants(theme)({ look, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleBarClass" }] : /* istanbul ignore next */ []));
+        this.titleClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const look = this.windowData.look;
+            return windowTitleThemeVariants(theme)({ look });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+        this.titleContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return windowTitleContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
+        this.windowData = inject(PopupDataInjectionToken);
+        this.#trapFocus.autoCapture = true;
+        this.#trapFocus.enabled = this.windowData.modal ?? false;
+        if (this.windowData.content instanceof TemplateRef) {
+            this.contentType.set("template");
+        }
+        else if (this.windowData.content) {
+            this.contentType.set("component");
+            this.componentRef = createComponent(this.windowData.content, {
+                environmentInjector: this.#appRef.injector,
+                elementInjector: this.#injector
+            });
+        }
+        afterNextRender({
+            read: () => {
+                this.#createView();
+                this.focusElement();
+            }
+        });
+    }
+    onCloseClick(event) {
+        this.closeWindow(event);
+    }
+    onMaximizeClick() {
+        const innerWidth = this.#document.defaultView?.innerWidth;
+        const innerHeight = this.#document.defaultView?.innerHeight;
+        if (this.minimized()) {
+            this.minimized.set(false);
+            this.windowData.windowReference.resize({
+                width: this.maximized() ? innerWidth : this.#sizeBeforeMaximize().width,
+                height: this.maximized() ? innerHeight : this.#sizeBeforeMaximize().height,
+                center: false
+            });
+            return;
+        }
+        if (this.maximized()) {
+            this.maximized.set(false);
+            this.windowData.windowReference.resize({
+                width: this.#sizeBeforeMaximize().width,
+                height: this.#sizeBeforeMaximize().height
+            });
+            this.windowData.windowReference.move({
+                top: this.#sizeBeforeMaximize().top,
+                left: this.#sizeBeforeMaximize().left
+            });
+        }
+        else {
+            const element = this.windowData.windowReference.element;
+            this.#sizeBeforeMaximize.set({
+                width: this.windowData.windowReference.width,
+                height: this.windowData.windowReference.height,
+                top: element.offsetTop,
+                left: element.offsetLeft
+            });
+            this.maximized.set(true);
+            this.windowData.windowReference.resize({
+                width: innerWidth,
+                height: innerHeight
+            });
+            this.windowData.windowReference.move({ top: 0, left: 0 });
+        }
+    }
+    onMinimizeClick() {
+        if (this.minimized()) {
+            this.minimized.set(false);
+            this.windowData.windowReference.resize({
+                width: this.windowData.windowReference.width,
+                height: this.#sizeBeforeMinimize()
+            });
+        }
+        else {
+            this.#sizeBeforeMinimize.set(this.windowData.windowReference.height);
+            this.minimized.set(true);
+            this.windowData.windowReference.resize({
+                width: this.windowData.windowReference.width,
+                height: undefined
+            });
+        }
+    }
+    closeWindow(event) {
+        const closeEvent = new PopupCloseEvent({ event, via: PopupCloseSource.CloseButton, originalEvent: event });
+        if (this.windowData.preventClose && this.windowData.preventClose(closeEvent)) {
+            return;
+        }
+        this.windowData.windowReference.close(closeEvent);
+    }
+    focusElement() {
+        const element = this.windowData.focusedElement;
+        if (!element) {
+            return;
+        }
+        const windowElement = this.#hostElementRef.nativeElement;
+        focusElement(windowElement, element);
+    }
+    #createView() {
+        if (this.contentType() === "component" && this.componentAnchor() && this.componentRef) {
+            const index = this.#viewContainerRef.indexOf(this.componentRef.hostView);
+            if (index !== -1) {
+                this.#viewContainerRef.detach(index);
+            }
+            this.componentAnchor().insert(this.componentRef.hostView, 0);
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: WindowContentComponent, isStandalone: true, selector: "mona-window-content", host: { attributes: { "role": "dialog" }, properties: { "class": "baseClass()", "attr.aria-labelledby": "headerId", "attr.aria-modal": "windowData.modal ?? false" } }, viewQueries: [{ propertyName: "componentAnchor", first: true, predicate: ["componentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "<div [class]=\"contentContainerClass()\">\r\n    <div\r\n        [class]=\"titleBarClass()\"\r\n        monaWindowDragHandler\r\n        (dblclick)=\"onMaximizeClick()\"\r\n        [draggable]=\"windowData.draggable\"\r\n        [windowRef]=\"windowData.windowReference\"\r\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\r\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\r\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n            @if (windowData.titleTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\r\n            } @else {\r\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\r\n            }\r\n        </div>\r\n        <div [class]=\"titleBarActionClass()\">\r\n            @if (windowData.actionTemplate) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\r\n                </ng-container>\r\n            }\r\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\r\n            @if (windowData.minimizable && !minimized()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"'Minimize'\"\r\n                    aria-label=\"Minimize\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMinimizeClick()\">\r\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.maximizable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"maximizeTitle\"\r\n                    [attr.aria-label]=\"maximizeTitle\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMaximizeClick()\">\r\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.closable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    title=\"Close\"\r\n                    aria-label=\"Close window\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onCloseClick($event)\">\r\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!minimized()) {\r\n        <div [class]=\"contentClass()\">\r\n            @switch (contentType()) {\r\n                @case (\"template\") {\r\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\r\n                }\r\n                @case (\"component\") {\r\n                    <ng-container #componentAnchor></ng-container>\r\n                }\r\n            }\r\n        </div>\r\n        @if (windowData.footerTemplate) {\r\n            <div>\r\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n    @if (windowData.resizable && !maximized()) {\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"north\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\r\n            [class]=\"'north' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"south\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\r\n            [class]=\"'south' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"east\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\r\n            [class]=\"'east' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"west\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\r\n            [class]=\"'west' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'northeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'northwest' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'southeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'southwest' | monaResizePosition\"></div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: WindowDragHandlerDirective, selector: "div[monaWindowDragHandler]", inputs: ["draggable", "windowRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: WindowResizeHandlerDirective, selector: "div[monaWindowResizeHandler]", inputs: ["direction", "maxHeight", "maxWidth", "minHeight", "minWidth", "windowRef"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "pipe", type: ResizePositionPipe, name: "monaResizePosition" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-window-content", imports: [
+                        WindowDragHandlerDirective,
+                        NgTemplateOutlet,
+                        ButtonDirective,
+                        WindowResizeHandlerDirective,
+                        ResizePositionPipe,
+                        LucideMinus,
+                        LucideDynamicIcon,
+                        LucideX
+                    ], host: {
+                        "[class]": "baseClass()",
+                        "[attr.aria-labelledby]": "headerId",
+                        "[attr.aria-modal]": "windowData.modal ?? false",
+                        role: "dialog"
+                    }, hostDirectives: [CdkTrapFocus], template: "<div [class]=\"contentContainerClass()\">\r\n    <div\r\n        [class]=\"titleBarClass()\"\r\n        monaWindowDragHandler\r\n        (dblclick)=\"onMaximizeClick()\"\r\n        [draggable]=\"windowData.draggable\"\r\n        [windowRef]=\"windowData.windowReference\"\r\n        [attr.tabindex]=\"windowData.draggable ? 0 : null\"\r\n        [attr.aria-label]=\"windowData.draggable ? 'Move window. Use arrow keys to move.' : null\">\r\n        <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\r\n            @if (windowData.titleTemplate) {\r\n                <ng-container [ngTemplateOutlet]=\"windowData.titleTemplate\"></ng-container>\r\n            } @else {\r\n                <span [class]=\"titleClass()\">{{ windowData.title ?? \"\" }}</span>\r\n            }\r\n        </div>\r\n        <div [class]=\"titleBarActionClass()\">\r\n            @if (windowData.actionTemplate) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"windowData.actionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: windowData.windowReference.windowRef }\">\r\n                </ng-container>\r\n            }\r\n            @let maximizeTitle = maximized() || minimized() ? \"Restore\" : \"Maximize\";\r\n            @if (windowData.minimizable && !minimized()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"'Minimize'\"\r\n                    aria-label=\"Minimize\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMinimizeClick()\">\r\n                    <svg lucideMinus [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.maximizable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    [title]=\"maximizeTitle\"\r\n                    [attr.aria-label]=\"maximizeTitle\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onMaximizeClick()\">\r\n                    <svg [lucideIcon]=\"maximizeIcon()\" [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n            @if (windowData.closable) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    type=\"button\"\r\n                    [iconOnly]=\"true\"\r\n                    [rounded]=\"windowData.rounded\"\r\n                    title=\"Close\"\r\n                    aria-label=\"Close window\"\r\n                    (dblclick)=\"$event.stopPropagation()\"\r\n                    (click)=\"onCloseClick($event)\">\r\n                    <svg lucideX [size]=\"16\" aria-hidden=\"true\"></svg>\r\n                </button>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if (!minimized()) {\r\n        <div [class]=\"contentClass()\">\r\n            @switch (contentType()) {\r\n                @case (\"template\") {\r\n                    <ng-container [ngTemplateOutlet]=\"contentTemplate()!\"></ng-container>\r\n                }\r\n                @case (\"component\") {\r\n                    <ng-container #componentAnchor></ng-container>\r\n                }\r\n            }\r\n        </div>\r\n        @if (windowData.footerTemplate) {\r\n            <div>\r\n                <ng-container [ngTemplateOutlet]=\"windowData.footerTemplate\"></ng-container>\r\n            </div>\r\n        }\r\n    }\r\n    @if (windowData.resizable && !maximized()) {\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"north\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top. Use arrow keys to resize.\"\r\n            [class]=\"'north' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"south\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom. Use arrow keys to resize.\"\r\n            [class]=\"'south' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"east\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the right. Use arrow keys to resize.\"\r\n            [class]=\"'east' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"west\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the left. Use arrow keys to resize.\"\r\n            [class]=\"'west' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'northeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"northwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the top-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'northwest' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southeast\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-right corner. Use arrow keys to resize.\"\r\n            [class]=\"'southeast' | monaResizePosition\"></div>\r\n        <div\r\n            monaWindowResizeHandler\r\n            [minWidth]=\"windowData.minWidth\"\r\n            [minHeight]=\"windowData.minHeight\"\r\n            [maxWidth]=\"windowData.maxWidth\"\r\n            [maxHeight]=\"windowData.maxHeight\"\r\n            [windowRef]=\"windowData.windowReference\"\r\n            direction=\"southwest\"\r\n            tabindex=\"0\"\r\n            aria-label=\"Resize window from the bottom-left corner. Use arrow keys to resize.\"\r\n            [class]=\"'southwest' | monaResizePosition\"></div>\r\n    }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { componentAnchor: [{ type: i0.ViewChild, args: ["componentAnchor", { ...{
+                            read: ViewContainerRef
+                        }, isSignal: true }] }] } });
+
+class WindowRef {
+    #options;
+    constructor(options) {
+        this.#options = options;
+    }
+    center() {
+        this.#options.center();
+    }
+    close(result) {
+        this.#options.close(result);
+    }
+    closeWithDelay(delay, result) {
+        this.#options.closeWithDelay(delay, result);
+    }
+    move(params) {
+        this.#options.move(params);
+    }
+    resize(params) {
+        this.#options.resize(params);
+    }
+    get close$() {
+        return this.#options.close$;
+    }
+    get closed$() {
+        return this.#options.closed$;
+    }
+    get component() {
+        return this.#options.component;
+    }
+    get drag$() {
+        return this.#options.drag$;
+    }
+    get dragEnd$() {
+        return this.#options.dragEnd$;
+    }
+    get dragStart$() {
+        return this.#options.dragStart$;
+    }
+    get element() {
+        return this.#options.element;
+    }
+    get height() {
+        return this.#options.height;
+    }
+    get popupRef() {
+        return this.#options.popupRef;
+    }
+    get resize$() {
+        return this.#options.resize$;
+    }
+    get width() {
+        return this.#options.width;
+    }
+}
+
+/**
+ * @internal - used by WindowService. Do not export.
+ */
+class WindowReference {
+    #windowRef;
+    constructor(options, document) {
+        this.options = options;
+        this.document = document;
+        this.move$$ = new Subject();
+        this.moveEnd$$ = new Subject();
+        this.moveStart$$ = new Subject();
+        this.resize$$ = new Subject();
+        this.#windowRef = new WindowRef(this);
+    }
+    center() {
+        const element = this.#popupRefOrThrow.overlayRef.overlayElement;
+        const width = element.getBoundingClientRect().width;
+        const height = element.getBoundingClientRect().height;
+        const left = (this.document.defaultView?.innerWidth || DefaultMaxWindowWidth - width) / 2;
+        const top = (this.document.defaultView?.innerHeight || DefaultMaxWindowHeight - height) / 2;
+        element.style.left = `${left}px`;
+        element.style.top = `${top}px`;
+    }
+    close(result) {
+        const event = result instanceof PopupCloseEvent
+            ? result
+            : new PopupCloseEvent({ result, via: PopupCloseSource.Programmatic });
+        this.#popupRefOrThrow.close(event);
+    }
+    closeWithDelay(delay, result) {
+        asapScheduler.schedule(() => this.close(result), delay);
+    }
+    initializePopupRef(popupRef) {
+        this.options.popupRef = popupRef;
+    }
+    move(params) {
+        const element = this.#popupRefOrThrow.overlayRef.overlayElement;
+        const top = params.top != null ? `${params.top}px` : ``;
+        const left = params.left != null ? `${params.left}px` : ``;
+        element.style.top = top;
+        element.style.left = left;
+    }
+    resize(params) {
+        const element = this.#popupRefOrThrow.overlayRef.overlayElement;
+        const width = params.width ? `${params.width}px` : ``;
+        const height = params.height ? `${params.height}px` : ``;
+        element.style.width = width;
+        element.style.height = height;
+        if (params.center) {
+            asapScheduler.schedule(() => this.center());
+        }
+    }
+    get close$() {
+        return this.#popupRefOrThrow.beforeClose.pipe(map(event => event));
+    }
+    get closed$() {
+        return this.#popupRefOrThrow.closed.pipe(map(() => undefined));
+    }
+    get component() {
+        // The type of component is ComponentRef<WindowContentComponent>. It is set as unknown to avoid circular dependency.
+        const popupComponent = this.popupRef.component;
+        if (!popupComponent) {
+            return null;
+        }
+        return popupComponent.instance.componentRef ?? null;
+    }
+    get drag$() {
+        return this.move$$;
+    }
+    get dragEnd$() {
+        return this.moveEnd$$;
+    }
+    get dragStart$() {
+        return this.moveStart$$;
+    }
+    get element() {
+        return this.#popupRefOrThrow.overlayRef.overlayElement;
+    }
+    get height() {
+        return this.element.offsetHeight;
+    }
+    get popupRef() {
+        return this.#popupRefOrThrow;
+    }
+    get resize$() {
+        return this.resize$$;
+    }
+    get width() {
+        return this.element.offsetWidth;
+    }
+    get windowRef() {
+        return this.#windowRef;
+    }
+    get #popupRefOrThrow() {
+        if (!this.options.popupRef) {
+            throw new Error("WindowReference: popupRef has not been initialized.");
+        }
+        return this.options.popupRef;
+    }
+}
+
+const createWindowInjectorData = (settings) => {
+    return {
+        actionTemplate: settings.actionTemplate,
+        closable: settings.closable ?? true,
+        closeOnEscape: settings.closeOnEscape ?? true,
+        content: settings.content,
+        draggable: settings.draggable ?? false,
+        focusedElement: settings.focusedElement,
+        footerTemplate: settings.footerTemplate,
+        height: settings.height,
+        left: settings.left,
+        look: settings.look ?? "default",
+        maxHeight: settings.maxHeight,
+        maxWidth: settings.maxWidth,
+        maximizable: settings.maximizable ?? true,
+        minHeight: settings.minHeight ?? 50,
+        minWidth: settings.minWidth ?? 50,
+        minimizable: settings.minimizable ?? true,
+        modal: settings.modal,
+        rounded: settings.rounded ?? "medium",
+        preventClose: settings.preventClose,
+        resizable: settings.resizable ?? false,
+        title: typeof settings.title === "string" ? settings.title : undefined,
+        titleTemplate: typeof settings.title === "string" ? undefined : settings.title,
+        top: settings.top,
+        width: settings.width
+    };
+};
+
+class WindowService {
+    #document = inject(DOCUMENT);
+    #injector = inject(Injector);
+    #popupService = inject(PopupService);
+    open(settings) {
+        const windowReference = new WindowReference({}, this.#document);
+        const injectorData = { ...createWindowInjectorData(settings), windowReference };
+        const popupRef = this.#popupService.create({
+            anchor: this.#document.body,
+            backdropClass: settings.modal
+                ? ["fixed", "inset-0", "bg-background/50", "transition-opacity", "z-40", "backdrop-blur-xs"]
+                : "transparent",
+            closeOnBackdropClick: false,
+            closeOnEscape: settings.closeOnEscape ?? true,
+            closeOnOutsideClick: false,
+            content: WindowContentComponent,
+            data: injectorData,
+            hasBackdrop: settings.modal,
+            height: settings.height || "fit-content",
+            maxHeight: settings.maxHeight,
+            maxWidth: settings.maxWidth,
+            minHeight: settings.minHeight,
+            minWidth: settings.minWidth,
+            positionStrategy: "global",
+            preventClose: (event) => {
+                if (settings.preventClose) {
+                    return settings.preventClose(event);
+                }
+                return false;
+            },
+            providers: [
+                {
+                    provide: WindowRef,
+                    useFactory: forwardRef(() => windowReference.windowRef)
+                }
+            ],
+            width: settings.width
+        });
+        windowReference.initializePopupRef(popupRef);
+        afterNextRender({
+            read: () => {
+                const element = popupRef.overlayRef.overlayElement;
+                setWindowStyles(element, settings);
+            }
+        }, { injector: this.#injector });
+        return windowReference.windowRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+class WindowComponent {
+    #destroyRef;
+    #windowService;
+    #windowRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#windowService = inject(WindowService);
+        this.actionTemplate = contentChild(WindowActionTemplateDirective, { ...(ngDevMode ? { debugName: "actionTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.contentTemplate = contentChild(WindowContentTemplateDirective, { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.footerTemplate = contentChild(WindowFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.titleTemplate = contentChild(WindowTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Sets the visibility of the close button in the window header.
+         * @default true
+         */
+        this.closable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the window is about to be closed.
+         */
+        this.close = output();
+        /**
+         * @description Emitted after the window has fully closed (post-animation). Preventing this event has no effect.
+         */
+        this.closed = output();
+        /**
+         * @description Sets whether the window should close when the escape key is pressed.
+         * @default true
+         */
+        this.closeOnEscape = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the window dragging ends.
+         */
+        this.dragEnd = output();
+        /**
+         * @description Emits when the window dragging starts.
+         */
+        this.dragStart = output();
+        /**
+         * @description Sets whether the window can be dragged by the user.
+         * @default true
+         */
+        this.draggable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the element that should receive focus when the window is opened.
+         * Accepts an element reference or a query selector string.
+         */
+        this.focusedElement = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "focusedElement" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the window.
+         */
+        this.height = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the left position of the window.
+         */
+        this.left = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "left" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the look of the window.
+         * @default "default"
+         */
+        this.look = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum height of the window.
+         */
+        this.maxHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum width of the window.
+         */
+        this.maxWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the user can maximize the window.
+         * @default true
+         */
+        this.maximizable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maximizable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the minimum height of the window.
+         */
+        this.minHeight = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the minimum width of the window.
+         */
+        this.minWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the user can minimize the window.
+         * @default true
+         */
+        this.minimizable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minimizable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the window should have an overlay behind it.
+         * @default false
+         */
+        this.modal = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "modal" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the user can resize the window.
+         * @default false
+         */
+        this.resizable = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "resizable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the window.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the title of the window.
+         */
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the top position of the window.
+         */
+        this.top = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "top" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the window.
+         */
+        this.width = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const top = this.top();
+            const left = this.left();
+            this.#windowRef?.move({ top, left });
+        });
+        effect(() => {
+            const height = this.height();
+            const width = this.width();
+            const center = untracked(() => this.top() == null && this.left() == null);
+            this.#windowRef?.resize({ height, width, center });
+        });
+        afterNextRender({ read: () => this.#openWindow() });
+        this.#destroyRef.onDestroy(() => this.#windowRef?.close());
+    }
+    closeWindow() {
+        this.#windowRef?.close();
+    }
+    move(position) {
+        if (position.top !== undefined) {
+            this.#windowRef?.move({ top: position.top });
+        }
+        if (position.left !== undefined) {
+            this.#windowRef?.move({ left: position.left });
+        }
+    }
+    openWindow() {
+        this.#openWindow();
+    }
+    resize(dimensions) {
+        if (dimensions.width !== undefined) {
+            this.#windowRef?.resize({ width: dimensions.width });
+        }
+        if (dimensions.height !== undefined) {
+            this.#windowRef?.resize({ height: dimensions.height });
+        }
+    }
+    #openWindow() {
+        this.#windowRef = this.#windowService.open({
+            actionTemplate: this.actionTemplate(),
+            closable: this.closable(),
+            closeOnEscape: this.closeOnEscape(),
+            content: this.contentTemplate(),
+            draggable: this.draggable(),
+            focusedElement: this.focusedElement(),
+            footerTemplate: this.footerTemplate(),
+            height: this.height(),
+            left: this.left(),
+            look: this.look(),
+            maxHeight: this.maxHeight(),
+            maxWidth: this.maxWidth(),
+            maximizable: this.maximizable(),
+            minHeight: this.minHeight(),
+            minWidth: this.minWidth(),
+            minimizable: this.minimizable(),
+            modal: this.modal(),
+            resizable: this.resizable(),
+            rounded: this.rounded(),
+            title: this.titleTemplate() ?? this.title(),
+            top: this.top(),
+            width: this.width()
+        });
+        this.#setSubscriptions();
+    }
+    #setCloseSubscription() {
+        if (!this.#windowRef) {
+            return;
+        }
+        this.#windowRef.popupRef.beforeClose.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.close.emit(event);
+        });
+        this.#windowRef.closed$.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.closed.emit();
+        });
+    }
+    #setDragSubscription() {
+        if (!this.#windowRef) {
+            return;
+        }
+        this.#windowRef.drag$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event.left != null) {
+                this.left.set(event.left);
+            }
+            if (event.top != null) {
+                this.top.set(event.top);
+            }
+        });
+        this.#windowRef.dragEnd$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.dragEnd.emit();
+        });
+        this.#windowRef.dragStart$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.dragStart.emit();
+        });
+    }
+    #setResizeSubscription() {
+        if (!this.#windowRef) {
+            return;
+        }
+        this.#windowRef.resize$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (event.width != null) {
+                this.width.set(event.width);
+            }
+            if (event.height != null) {
+                this.height.set(event.height);
+            }
+            if (event.left != null) {
+                this.left.set(event.left);
+            }
+            if (event.top != null) {
+                this.top.set(event.top);
+            }
+        });
+    }
+    #setSubscriptions() {
+        this.#setCloseSubscription();
+        this.#setDragSubscription();
+        this.#setResizeSubscription();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: WindowComponent, isStandalone: true, selector: "mona-window", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, focusedElement: { classPropertyName: "focusedElement", publicName: "focusedElement", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minimizable: { classPropertyName: "minimizable", publicName: "minimizable", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", dragEnd: "dragEnd", dragStart: "dragStart", height: "heightChange", left: "leftChange", top: "topChange", width: "widthChange" }, host: { classAttribute: "hidden" }, queries: [{ propertyName: "actionTemplate", first: true, predicate: WindowActionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: WindowContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: WindowFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: WindowTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: WindowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-window",
+                    template: ``,
+                    host: {
+                        class: "hidden"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { actionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowActionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WindowTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], focusedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedElement", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }, { type: i0.Output, args: ["leftChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minimizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizable", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }, { type: i0.Output, args: ["topChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/window
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WindowActionTemplateDirective, WindowComponent, WindowContentTemplateDirective, WindowFooterTemplateDirective, WindowRef, WindowService, WindowTitleTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-window.mjs.map