@kusena/wui-single 18.0.1

package/fesm2022/kusena-wui-single.mjs

@@ -0,0 +1,1841 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Inject, Optional, inject, input, HostBinding, signal, computed, Directive, Input, HostListener, output, EventEmitter, Output, ElementRef, model, effect, ViewContainerRef, ViewChild, Renderer2, Injector, runInInjectionContext, ContentChild } from '@angular/core';
+import * as i3 from '@angular/common';
+import { DOCUMENT, CommonModule, DatePipe, DecimalPipe } from '@angular/common';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/dialog';
+import { Dialog, DEFAULT_DIALOG_CONFIG, DIALOG_SCROLL_STRATEGY, DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import * as i2 from '@angular/cdk/bidi';
+import { Subject, BehaviorSubject, takeUntil as takeUntil$1 } from 'rxjs';
+import { filter, map, takeUntil } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR, ControlContainer, NgModel } from '@angular/forms';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger, MENU_TRIGGER, PARENT_OR_NEW_MENU_STACK_PROVIDER } from '@angular/cdk/menu';
+
+class WuiSingleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WuiSingleComponent, isStandalone: true, selector: "lib-wui-single", ngImport: i0, template: `
+    <p>
+      wui-single works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-wui-single', standalone: true, imports: [], template: `
+    <p>
+      wui-single works!
+    </p>
+  ` }]
+        }] });
+
+class WuiModalOverlayContainer extends OverlayContainer {
+    setContainerElement(containerElement) {
+        this._containerElement = containerElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlayContainer });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+class WuiModalOverlay extends Overlay {
+    _modalOverlayContainer;
+    constructor(_scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _appRef, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher) {
+        super(_scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher);
+        this._modalOverlayContainer = _overlayContainer;
+    }
+    setContainerElement(containerElement) {
+        this._modalOverlayContainer.setContainerElement(containerElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: WuiModalOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i3.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlay });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModalOverlay, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.ScrollStrategyOptions }, { type: WuiModalOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1.OverlayPositionBuilder }, { type: i1.OverlayKeyboardDispatcher }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i2.Directionality }, { type: i3.Location }, { type: i1.OverlayOutsideClickDispatcher }] });
+class WuiModal extends Dialog {
+    _customOverlay;
+    constructor(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, _scrollStrategy) {
+        super(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, _scrollStrategy);
+        this._customOverlay = _overlay;
+    }
+    setContainerElement(containerElement) {
+        this._customOverlay.setContainerElement(containerElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModal, deps: [{ token: WuiModalOverlay }, { token: i0.Injector }, { token: DEFAULT_DIALOG_CONFIG, optional: true }, { token: i4.Dialog }, { token: WuiModalOverlayContainer }, { token: DIALOG_SCROLL_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModal });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiModal, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: WuiModalOverlay }, { type: i0.Injector }, { type: i4.DialogConfig, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DEFAULT_DIALOG_CONFIG]
+                }] }, { type: i4.Dialog }, { type: WuiModalOverlayContainer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DIALOG_SCROLL_STRATEGY]
+                }] }] });
+
+class WuiPageOverlayContainer extends OverlayContainer {
+    setContainerElement(containerElement) {
+        this._containerElement = containerElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlayContainer });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+class WuiPageOverlay extends Overlay {
+    _pageOverlayContainer;
+    constructor(_scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _appRef, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher) {
+        super(_scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher);
+        this._pageOverlayContainer = _overlayContainer;
+    }
+    setContainerElement(containerElement) {
+        this._pageOverlayContainer.setContainerElement(containerElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: WuiPageOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2.Directionality }, { token: i3.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlay });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPageOverlay, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.ScrollStrategyOptions }, { type: WuiPageOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1.OverlayPositionBuilder }, { type: i1.OverlayKeyboardDispatcher }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i2.Directionality }, { type: i3.Location }, { type: i1.OverlayOutsideClickDispatcher }] });
+class WuiPage extends Dialog {
+    _customOverlay;
+    constructor(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, _scrollStrategy) {
+        super(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, _scrollStrategy);
+        this._customOverlay = _overlay;
+    }
+    setContainerElement(containerElement) {
+        this._customOverlay.setContainerElement(containerElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPage, deps: [{ token: WuiPageOverlay }, { token: i0.Injector }, { token: DEFAULT_DIALOG_CONFIG, optional: true }, { token: i4.Dialog }, { token: WuiPageOverlayContainer }, { token: DIALOG_SCROLL_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPage });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiPage, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: WuiPageOverlay }, { type: i0.Injector }, { type: i4.DialogConfig, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DEFAULT_DIALOG_CONFIG]
+                }] }, { type: i4.Dialog }, { type: WuiPageOverlayContainer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DIALOG_SCROLL_STRATEGY]
+                }] }] });
+
+class MessageService {
+    handler = new Subject();
+    set(name, payload) {
+        this.handler.next({ name: name, payload: payload });
+    }
+    get(name) {
+        return this.handler.asObservable().pipe(filter(message => message.name === name), map(message => message.payload));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DialogComponent {
+    data = inject(DIALOG_DATA);
+    ref = inject(DialogRef);
+    close(index) {
+        this.ref.close(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DialogComponent, isStandalone: true, selector: "wui-dialog", ngImport: i0, template: `
+    <div class="wui-modal">
+      <div class="wui-modal-inner">
+        <div class="wui-modal-header">{{data?.title ?? ""}}</div>
+        <div class="wui-modal-content">{{data?.message ?? ""}}</div>
+        <div class="wui-modal-footer">
+          <div class="d-flex justify-content-end">
+            @for(caption of (data?.buttons ?? []); track $index) {
+              <button class="wui-button wui-button-smooth" (click)="close($index)">
+                {{caption}}
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-dialog',
+                    standalone: true,
+                    imports: [],
+                    template: `
+    <div class="wui-modal">
+      <div class="wui-modal-inner">
+        <div class="wui-modal-header">{{data?.title ?? ""}}</div>
+        <div class="wui-modal-content">{{data?.message ?? ""}}</div>
+        <div class="wui-modal-footer">
+          <div class="d-flex justify-content-end">
+            @for(caption of (data?.buttons ?? []); track $index) {
+              <button class="wui-button wui-button-smooth" (click)="close($index)">
+                {{caption}}
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+class LoadingComponent {
+    mode = input('indeterminate');
+    pos = input(0);
+    size = input(32);
+    get hostClass() {
+        return `mode-${this.mode()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LoadingComponent, isStandalone: true, selector: "wui-loading", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pos: { classPropertyName: "pos", publicName: "pos", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: `
+    <div class="indeterminate" *ngIf="mode() === 'indeterminate'"></div>
+
+    <div class="linear" *ngIf="mode() === 'linear'">
+      <div class="pos" [style.width.%]="pos()"></div>
+    </div>
+
+    <div class="circular" *ngIf="mode() === 'circular'">
+      <div class="showbox">
+        <div class="loader" [style.width.px]="size()">
+          <svg class="circle" viewBox="25 25 50 50">
+            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-loading',
+                    standalone: true,
+                    imports: [CommonModule],
+                    // changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="indeterminate" *ngIf="mode() === 'indeterminate'"></div>
+
+    <div class="linear" *ngIf="mode() === 'linear'">
+      <div class="pos" [style.width.%]="pos()"></div>
+    </div>
+
+    <div class="circular" *ngIf="mode() === 'circular'">
+      <div class="showbox">
+        <div class="loader" [style.width.px]="size()">
+          <svg class="circle" viewBox="25 25 50 50">
+            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class LoadingDialogComponent {
+    loading = signal(true);
+    dialogClass = computed(() => this.loading() ? 'loading-active' : 'loading-idle');
+    get hostClass() {
+        return this.dialogClass();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingDialogComponent, isStandalone: true, selector: "wui-loading-dialog", host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: `
+    <wui-loading mode="circular" />
+  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background-color:#fff;box-shadow:0 4px 5px #00000024,0 1px 10px #0000001f,0 2px 4px -1px #0003}\n"], dependencies: [{ kind: "component", type: LoadingComponent, selector: "wui-loading", inputs: ["mode", "pos", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wui-loading-dialog', standalone: true, imports: [LoadingComponent], template: `
+    <wui-loading mode="circular" />
+  `, styles: [":host{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background-color:#fff;box-shadow:0 4px 5px #00000024,0 1px 10px #0000001f,0 2px 4px -1px #0003}\n"] }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class WuiService {
+    messageService = inject(MessageService);
+    rootDialog = inject(Dialog);
+    loadingRef;
+    dialog(params) {
+        return new Promise((resolve) => {
+            let ref = this.rootDialog.open(DialogComponent, { disableClose: true, width: '350px', data: params });
+            ref.closed.subscribe(result => {
+                resolve(result);
+            });
+        });
+    }
+    snackbar(params) {
+        this.messageService.set('wui:snackbar', params);
+    }
+    toggleDrawer() {
+        this.messageService.set('wui:toggleDrawer', null);
+    }
+    openLoading() {
+        this.loadingRef = this.rootDialog.open(LoadingDialogComponent, { disableClose: true });
+    }
+    closeLoading() {
+        this.loadingRef.close();
+    }
+    actionSheet(params) {
+        this.messageService.set('wui:action-sheet', params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function provideWui() {
+    return [
+        DatePipe,
+        DecimalPipe,
+        WuiModalOverlayContainer,
+        WuiModalOverlay,
+        WuiModal,
+        WuiPageOverlayContainer,
+        WuiPageOverlay,
+        WuiPage,
+        WuiService,
+        MessageService
+    ];
+}
+
+class NavService {
+    lastNavId = 0;
+    components = [];
+    events = new BehaviorSubject(null);
+    constructor() { }
+    willPop(navId) {
+        let index = this.components.findIndex((c) => c.navId == navId);
+        return index > 0;
+    }
+    setRoot(name, params = {}, options = {}) {
+        this.lastNavId++;
+        this.events.next({
+            type: 'command',
+            action: 'root',
+            componentName: name,
+            navId: this.lastNavId,
+            params: params,
+            options: options
+        });
+        return this.lastNavId;
+    }
+    push(name, params = null, options = {}) {
+        this.lastNavId++;
+        this.events.next({
+            type: 'command',
+            action: 'push',
+            componentName: name,
+            navId: this.lastNavId,
+            params: params,
+            options: options
+        });
+        return this.lastNavId;
+    }
+    pop(params = null, options = {}) {
+        this.events.next({
+            type: 'command',
+            action: 'pop',
+            params: params,
+            options: options
+        });
+        return this.lastNavId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class PageService {
+    wuiPage = inject(WuiPage);
+    isCloseAll = false;
+    constructor() { }
+    open(component, config) {
+        const defaultConfig = {
+            width: '100%',
+            height: '100%',
+            disableClose: true,
+            closeOnNavigation: false,
+            closeOnDestroy: true,
+            hasBackdrop: false,
+            ...config,
+        };
+        return this.wuiPage.open(component, defaultConfig);
+    }
+    replace(component, config) {
+        this.closeAll();
+        return this.open(component, config);
+    }
+    closeAll() {
+        this.isCloseAll = true;
+        this.wuiPage.closeAll();
+        this.isCloseAll = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ModalService {
+    wuiModal = inject(WuiModal);
+    open(componentOrTemplateRef, config) {
+        const defaultConfig = {
+            panelClass: 'wui-modal-overlay-pane',
+            height: '100%',
+            ...config,
+        };
+        return this.wuiModal.open(componentOrTemplateRef, defaultConfig);
+    }
+    closeAll() {
+        this.wuiModal.closeAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class RouterService {
+    navService;
+    $params = new BehaviorSubject(null);
+    eventTrigger = 'pushState';
+    events = new BehaviorSubject(null);
+    navigateUrl = new Subject();
+    constructor(navService) {
+        this.navService = navService;
+        this.events.subscribe(event => {
+            if (event?.eventName == 'ActivationEnd') {
+                this.$params.next({
+                    navId: event.navId,
+                    params: event.params
+                });
+            }
+        });
+    }
+    get routeParams() {
+        let currentNav = this.navService.components[this.navService.components.length - 1];
+        return this.$params.pipe(filter(v => v !== null && v.navId == currentNav.navId), map(v => v.params));
+    }
+    setParams(navId, params = {}) {
+        this.$params.next({ navId: navId, params: params });
+    }
+    navigate(url) {
+        this.navigateUrl.next(url);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, deps: [{ token: NavService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: NavService }] });
+
+class RippleDirective {
+    el;
+    rippleEl;
+    interval;
+    theme = 'light';
+    constructor(el) {
+        this.el = el;
+    }
+    onMouseDown(e) {
+        this.start(e.clientX, e.clientY);
+    }
+    onTouchStart(e) {
+        this.start(e.touches[0].clientX, e.touches[0].clientY);
+    }
+    start(x, y) {
+        if (!this.rippleEl) {
+            this.rippleEl = document.createElement('div');
+            this.rippleEl.classList.add('wuiRipple__obj');
+            this.rippleEl.classList.add('wuiRipple__' + this.theme);
+            this.el.nativeElement.appendChild(this.rippleEl);
+        }
+        this.rippleEl.style.cssText = "";
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+        var elRect = this.el.nativeElement.getBoundingClientRect();
+        let top = (y - elRect.y);
+        let left = (x - elRect.x);
+        this.rippleEl.style.top = top + 'px';
+        this.rippleEl.style.left = left + 'px';
+        let matrix = (this.el.nativeElement.offsetWidth > this.el.nativeElement.offsetHeight ? 'width' : 'height');
+        let size = 0;
+        let durMatrix = 0;
+        if (matrix == 'width') {
+            size = ((this.el.nativeElement.offsetWidth - left) > left ? ((this.el.nativeElement.offsetWidth - left) * 2) :
+                (left * 2));
+            durMatrix = document.body.clientWidth;
+        }
+        else {
+            size = ((this.el.nativeElement.offsetHeight - top) > top ? ((this.el.nativeElement.offsetHeight - top) * 2) :
+                (top * 2));
+            durMatrix = document.body.clientHeight;
+        }
+        this.animate(size, 200 + (200 * (size / durMatrix)));
+    }
+    animate(size, duration) {
+        let pos = 0;
+        this.interval = setInterval(() => {
+            let vsize = this.rippleEl.offsetHeight + (size / (duration / 10));
+            this.rippleEl.style.width = vsize + 'px';
+            this.rippleEl.style.height = vsize + 'px';
+            this.rippleEl.style.opacity = ((duration - pos) / duration);
+            if (pos < duration) {
+                pos += 10;
+            }
+            else {
+                this.rippleEl.style.cssText = "";
+                clearInterval(this.interval);
+            }
+        }, 10);
+    }
+    ngOnInit() {
+        this.el.nativeElement.style.position = 'relative';
+        this.el.nativeElement.style.overflow = 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: RippleDirective, isStandalone: true, selector: "[wuiRipple]", inputs: { theme: ["rippleTheme", "theme"] }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiRipple]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { theme: [{
+                type: Input,
+                args: ['rippleTheme']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }] } });
+
+class NavRootDirective {
+    navService = inject(NavService);
+    name = input.required({ alias: 'wuiNavRoot' });
+    params = input({}, { alias: 'wuiNavParams' });
+    navigated = output();
+    navigateToRoot() {
+        this.navService.setRoot(this.name());
+        this.navigated.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NavRootDirective, isStandalone: true, selector: "[wuiNavRoot]", inputs: { name: { classPropertyName: "name", publicName: "wuiNavRoot", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "wuiNavParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigated: "navigated" }, host: { listeners: { "click": "navigateToRoot()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiNavRoot]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'navigateToRoot()'
+                    }
+                }]
+        }] });
+class NavPushDirective {
+    navService;
+    name = input.required({ alias: 'wuiNavPush' });
+    params = input({}, { alias: 'wuiNavParams' });
+    navigated = output();
+    constructor(navService) {
+        this.navService = navService;
+    }
+    navigatePush() {
+        this.navService.push(this.name());
+        this.navigated.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavPushDirective, deps: [{ token: NavService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NavPushDirective, isStandalone: true, selector: "[wuiNavPush]", inputs: { name: { classPropertyName: "name", publicName: "wuiNavPush", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "wuiNavParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigated: "navigated" }, host: { listeners: { "click": "navigatePush()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavPushDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiNavPush]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'navigatePush()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: NavService }] });
+class NavPopDirective {
+    navService;
+    // Optional pop params
+    params = input(null, { alias: 'wuiNavParams' });
+    // Navigation event output
+    navigated = output();
+    constructor(navService) {
+        this.navService = navService;
+    }
+    navigatePop() {
+        this.navService.pop(this.params());
+        this.navigated.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavPopDirective, deps: [{ token: NavService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NavPopDirective, isStandalone: true, selector: "[wuiNavPop]", inputs: { params: { classPropertyName: "params", publicName: "wuiNavParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigated: "navigated" }, host: { listeners: { "click": "navigatePop()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavPopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiNavPop]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'navigatePop()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: NavService }] });
+
+class ScrollEndDirective {
+    scrollEnd = new EventEmitter();
+    onScroll(e) {
+        if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
+            this.scrollEnd.emit(e);
+        }
+    }
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ScrollEndDirective, isStandalone: true, selector: "[wuiScrollEnd]", outputs: { scrollEnd: "scrollEnd" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiScrollEnd]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { scrollEnd: [{
+                type: Output,
+                args: ['scrollEnd']
+            }], onScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
+
+class PageHeaderDirective {
+    el;
+    contentEl;
+    wuiTitle;
+    constructor(el) {
+        this.el = el;
+    }
+    getClosest(elem, selector) {
+        for (; elem && elem !== document; elem = elem.parentNode) {
+            if (elem.matches(selector))
+                return elem;
+        }
+        return null;
+    }
+    ;
+    onScroll(e) {
+        if (e.target.scrollTop > Math.round((e.target.offsetHeight / 2) / 2)) {
+            this.wuiTitle.classList.add('show');
+        }
+        else {
+            this.wuiTitle.classList.remove('show');
+        }
+    }
+    ngOnInit() {
+        this.contentEl = this.getClosest(this.el.nativeElement, 'div.content');
+        this.el.nativeElement.style.height = Math.round(this.contentEl.offsetHeight / 2) + "px";
+        if (this.wuiTitle !== undefined) {
+            this.contentEl.addEventListener('scroll', (e) => {
+                this.onScroll(e);
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: PageHeaderDirective, isStandalone: true, selector: "[wuiPageHeader]", inputs: { wuiTitle: "wuiTitle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiPageHeader]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { wuiTitle: [{
+                type: Input,
+                args: ['wuiTitle']
+            }] } });
+
+class NumInputDirective {
+    decimalPipe = inject(DecimalPipe);
+    elementRef = inject((ElementRef));
+    // Input signals
+    format = input('1.0-2');
+    value = model(null);
+    // Computed signals
+    isNegative = computed(() => this.value()?.includes('-') ?? false);
+    isDecimal = computed(() => this.value()?.includes('.') ?? false);
+    numberPart = computed(() => {
+        const regex = this.isNegative() ? /-(.*)/ : /(.*)/;
+        const match = this.value()?.match(regex);
+        return this.parseNumber(match?.[1] ?? null);
+    });
+    decimalPart = computed(() => {
+        if (!this.isDecimal())
+            return null;
+        const match = this.value()?.match(/\.(.*)/);
+        return match?.[1] ?? null;
+    });
+    numericValue = computed(() => {
+        const numStr = [this.numberPart(), this.decimalPart()].filter(Boolean).join('.');
+        const num = parseFloat(numStr);
+        return this.isNegative() ? -num : num;
+    });
+    formattedValue = computed(() => {
+        const prefix = this.isNegative() ? '-' : '';
+        const number = this.numberPart() ?
+            this.decimalPipe.transform(this.numberPart(), this.format()) : '';
+        const decimal = this.isDecimal() ? `.${this.decimalPart()}` : '';
+        return `${prefix}${number}${decimal}`;
+    });
+    // Filter functions (unchanged from previous version)
+    allowNumbers(event) { }
+    allowFunctional(event) { }
+    allowDecimals(event) { }
+    allowNegative(event) { }
+    constructor() {
+        effect(() => {
+            this.elementRef.nativeElement.value = this.formattedValue();
+        });
+    }
+    handleKeyDown(event) {
+        const allowed = [
+            this.allowNumbers(event),
+            this.allowFunctional(event),
+            this.allowDecimals(event),
+            this.allowNegative(event)
+        ].some(Boolean);
+        if (!allowed) {
+            event.preventDefault();
+            return;
+        }
+        setTimeout(() => {
+            this.value.set(this.elementRef.nativeElement.value);
+        });
+    }
+    handleFocusOut() {
+        this.value.set(this.elementRef.nativeElement.value);
+    }
+    parseNumber(str) {
+        if (!str)
+            return null;
+        const num = parseFloat(str.replace(/[^\d.]/g, ''));
+        return isNaN(num) ? null : num;
+    }
+    // ControlValueAccessor implementation
+    writeValue(obj) {
+        this.value.set(obj?.toString() ?? null);
+    }
+    registerOnChange(fn) {
+        effect(() => {
+            fn(this.numericValue());
+        });
+    }
+    registerOnTouched(fn) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: NumInputDirective, isStandalone: true, selector: "[wuiNumInput]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "handleKeyDown($event)", "focusout": "handleFocusOut($event)" }, properties: { "attr.inputmode": "\"decimal\"" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NumInputDirective,
+                multi: true
+            }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiNumInput]',
+                    standalone: true,
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NumInputDirective,
+                            multi: true
+                        }],
+                    host: {
+                        '(keydown)': 'handleKeyDown($event)',
+                        '(focusout)': 'handleFocusOut($event)',
+                        '[attr.inputmode]': '"decimal"'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class SortableDirective {
+    el;
+    change = new EventEmitter();
+    xFactor = 0;
+    yFactor = 0;
+    child;
+    childOriginRect;
+    placeholder;
+    mouseMove(e) {
+        if (this.child == null && this.placeholder == null)
+            return;
+        let parentRect = this.child.offsetParent != null ? this.child.offsetParent.getBoundingClientRect() : { x: 0, y: 0 };
+        this.child.style.top = e.clientY - parentRect.y - this.yFactor + 'px';
+        this.child.style.left = e.clientX - parentRect.x - this.xFactor + 'px';
+        let elementAfter = this.getElementBefore(this.el.nativeElement, e.clientY);
+        if (elementAfter == null) {
+            this.el.nativeElement.appendChild(this.placeholder);
+        }
+        else {
+            this.el.nativeElement.insertBefore(this.placeholder, elementAfter);
+        }
+    }
+    mouseUp(e) {
+        if (this.child == null && this.placeholder == null)
+            return;
+        this.child.classList.remove('wui-sortable-item-dragging');
+        this.child.style.removeProperty('width');
+        this.child.style.removeProperty('top');
+        this.child.style.removeProperty('left');
+        this.el.nativeElement.insertBefore(this.child, this.placeholder);
+        this.placeholder.remove();
+        this.child = null;
+        this.placeholder = null;
+        this.change.emit([].slice.call(this.el.nativeElement.children).map((child) => child.dataset.key));
+    }
+    getElementBefore(container, y) {
+        let items = [...container.querySelectorAll('.wui-sortable-item:not(.wui-sortable-item-dragging, .wui-sortable-item-placeholder)')];
+        return items.reduce((terdekat, child) => {
+            let box = child.getBoundingClientRect();
+            let offset = y - box.top - (box.height / 2);
+            if (offset < 0 && offset > terdekat.offset) {
+                return { offset: offset, element: child };
+            }
+            else {
+                return terdekat;
+            }
+        }, { offset: Number.NEGATIVE_INFINITY }).element;
+    }
+    constructor(el) {
+        this.el = el;
+    }
+    init() {
+        this.el.nativeElement.classList.add('wui-sortable');
+        [].slice.call(this.el.nativeElement.children).forEach((child) => {
+            child.classList.add('wui-sortable-item');
+            child.addEventListener('mousedown', (e) => {
+                let parentRect = child.offsetParent != null ? child.offsetParent.getBoundingClientRect() : { x: 0, y: 0 };
+                // console.log(child.offsetParent);
+                this.childOriginRect = child.getBoundingClientRect();
+                this.xFactor = e.clientX - this.childOriginRect.x;
+                this.yFactor = e.clientY - this.childOriginRect.y;
+                this.placeholder = document.createElement('div');
+                this.placeholder.classList.add('wui-sortable-item', 'wui-sortable-item-placeholder');
+                this.placeholder.style.height = this.childOriginRect.height + 'px';
+                this.placeholder.style.opacity = '0';
+                this.el.nativeElement.insertBefore(this.placeholder, child);
+                this.child = child;
+                this.child.classList.add('wui-sortable-item-dragging');
+                this.child.style.width = this.childOriginRect.width + 'px';
+                this.child.style.top = e.clientY - parentRect.y - this.yFactor + 'px';
+                this.child.style.left = e.clientX - parentRect.x - this.xFactor + 'px';
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.init();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SortableDirective, isStandalone: true, selector: "[wuiSortable]", outputs: { change: "wuiSortableChange" }, host: { listeners: { "window:mousemove": "mouseMove($event)", "window:mouseup": "mouseUp($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiSortable]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { change: [{
+                type: Output,
+                args: ['wuiSortableChange']
+            }], mouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], mouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }] } });
+
+class ContextMenuDirective extends CdkMenu {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContextMenuDirective, isStandalone: true, selector: "[wuiContextMenu]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiContextMenu]',
+                    standalone: true
+                }]
+        }] });
+class ContextMenuItemDirective extends CdkMenuItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContextMenuItemDirective, isStandalone: true, selector: "[wuiContextMenuItem]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiContextMenuItem]',
+                    standalone: true
+                }]
+        }] });
+class ContextMenuTriggerDirective extends CdkMenuTrigger {
+    menuPosBehavior = 'default'; // or 'edge'
+    handleDocumentEvent(event) {
+        if (this.isOpen())
+            this.close();
+    }
+    open() {
+        if (this.menuPosBehavior === 'default') {
+            this.menuPosition = [
+                { overlayY: 'top', overlayX: 'start', originY: 'top', originX: 'start' },
+                { overlayY: 'top', overlayX: 'end', originY: 'top', originX: 'end' },
+                { overlayY: 'bottom', overlayX: 'start', originY: 'bottom', originX: 'start' },
+                { overlayY: 'bottom', overlayX: 'end', originY: 'bottom', originX: 'start' }
+            ];
+        }
+        super.open();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[wuiContextMenuTrigger]", inputs: { menuTemplateRef: ["wuiContextMenuTrigger", "menuTemplateRef"], menuPosition: ["wuiContextMenuPosition", "menuPosition"], menuData: ["wuiContextMenuTriggerData", "menuData"], menuPosBehavior: ["wuiContextMenuPosBehavior", "menuPosBehavior"] }, host: { listeners: { "document:touchmove": "handleDocumentEvent($event)", "document:mousewheel": "handleDocumentEvent($event)" } }, providers: [
+            { provide: MENU_TRIGGER, useExisting: ContextMenuTriggerDirective },
+            PARENT_OR_NEW_MENU_STACK_PROVIDER,
+        ], exportAs: ["wuiContextMenuTrigger"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiContextMenuTrigger]',
+                    exportAs: 'wuiContextMenuTrigger',
+                    standalone: true,
+                    inputs: [
+                        { name: 'menuTemplateRef', alias: 'wuiContextMenuTrigger' },
+                        { name: 'menuPosition', alias: 'wuiContextMenuPosition' },
+                        { name: 'menuData', alias: 'wuiContextMenuTriggerData' }
+                    ],
+                    providers: [
+                        { provide: MENU_TRIGGER, useExisting: ContextMenuTriggerDirective },
+                        PARENT_OR_NEW_MENU_STACK_PROVIDER,
+                    ],
+                    host: {
+                        '(document:touchmove)': 'handleDocumentEvent($event)',
+                        '(document:mousewheel)': 'handleDocumentEvent($event)'
+                    }
+                }]
+        }], propDecorators: { menuPosBehavior: [{
+                type: Input,
+                args: ['wuiContextMenuPosBehavior']
+            }], handleDocumentEvent: [{
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:mousewheel', ['$event']]
+            }] } });
+
+class ModalComponent {
+    width = input('300px');
+    showSignal = signal(false);
+    isVisible = computed(() => this.showSignal());
+    get show() {
+        return this.isVisible();
+    }
+    open() {
+        this.showSignal.set(true);
+    }
+    close() {
+        this.showSignal.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ModalComponent, isStandalone: true, selector: "wui-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "this.show" } }, ngImport: i0, template: `
+    <div class="wui-modal-inner" [style.max-width]="width()" cdkTrapFocus>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-modal',
+                    standalone: true,
+                    template: `
+    <div class="wui-modal-inner" [style.max-width]="width()" cdkTrapFocus>
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { show: [{
+                type: HostBinding,
+                args: ['class.show']
+            }] } });
+
+class NavComponent {
+    navService;
+    componentFactoryResolver;
+    viewContainer;
+    unsub = new Subject();
+    constructor(navService, componentFactoryResolver) {
+        this.navService = navService;
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    root(e) {
+        this.viewContainer?.clear();
+        this.navService.components = [];
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(e.componentName);
+        const componentRef = this.viewContainer?.createComponent(componentFactory);
+        const instance = componentRef?.instance;
+        instance.navId = e.navId;
+        instance.params = e.params;
+        this.navService.components.push({
+            navId: e.navId,
+            componentName: e.componentName,
+            componentRef,
+            options: e.options
+        });
+    }
+    push(e) {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(e.componentName);
+        const componentRef = this.viewContainer?.createComponent(componentFactory);
+        const instance = componentRef?.instance;
+        instance.navId = e.navId;
+        instance.params = e.params;
+        this.navService.components.push({
+            navId: e.navId,
+            componentName: e.componentName,
+            componentRef,
+            options: e.options
+        });
+    }
+    pop(e) {
+        if (this.viewContainer && (this.viewContainer?.length ?? 0) > 0) {
+            this.viewContainer.remove(this.viewContainer?.length - 1);
+        }
+        this.navService.components[this.navService.components.length - 1].componentRef.destroy();
+        this.navService.components.pop();
+    }
+    ngOnInit() {
+        this.navService.events.pipe(takeUntil(this.unsub)).subscribe(async (e) => {
+            if (e !== null && e.type === 'command') {
+                switch (e.action) {
+                    case 'root':
+                        this.root(e);
+                        break;
+                    case 'push':
+                        this.push(e);
+                        break;
+                    case 'pop':
+                        this.pop(e);
+                        break;
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsub.next(null);
+        this.unsub.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavComponent, deps: [{ token: NavService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavComponent, isStandalone: true, selector: "wui-nav", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["navHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-template #navHost></ng-template>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-nav',
+                    standalone: true,
+                    template: `<ng-template #navHost></ng-template>`
+                }]
+        }], ctorParameters: () => [{ type: NavService }, { type: i0.ComponentFactoryResolver }], propDecorators: { viewContainer: [{
+                type: ViewChild,
+                args: ['navHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class PageHostComponent {
+    pageDialog = inject(WuiPage);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.pageDialog.setContainerElement(this.elementRef.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PageHostComponent, isStandalone: true, selector: "wui-page-host", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-page-host',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`
+                }]
+        }], ctorParameters: () => [] });
+
+class ModalHostComponent {
+    modalDialog = inject(WuiModal);
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.modalDialog.setContainerElement(this.elementRef.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalHostComponent, isStandalone: true, selector: "wui-modal-host", ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-modal-host',
+                    standalone: true,
+                    template: ``
+                }]
+        }], ctorParameters: () => [] });
+
+class SnackbarComponent {
+    messageService;
+    actionItems = [];
+    label = '';
+    show = false;
+    autocloseTimeoutId;
+    unsub = new Subject();
+    constructor(messageService) {
+        this.messageService = messageService;
+    }
+    open(label, autoclose = true, actionItems = []) {
+        this.label = label;
+        this.actionItems = actionItems;
+        clearTimeout(this.autocloseTimeoutId);
+        if (this.show) {
+            this.close();
+            setTimeout(() => this.show = true, 150);
+        }
+        else {
+            this.show = true;
+        }
+        if (autoclose) {
+            this.autocloseTimeoutId = setTimeout(() => this.close(), 3000);
+        }
+    }
+    close() {
+        this.show = false;
+    }
+    ngOnInit() {
+        this.messageService.get('wui:snackbar')
+            .pipe(takeUntil(this.unsub))
+            .subscribe(data => {
+            if (data.label === 'close') {
+                this.close();
+            }
+            else {
+                this.open(data.label, data.autoclose ?? true, data.actionItems);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsub.next();
+        this.unsub.complete();
+        clearTimeout(this.autocloseTimeoutId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarComponent, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SnackbarComponent, isStandalone: true, selector: "wui-snackbar", host: { properties: { "class.show": "this.show" } }, ngImport: i0, template: `{{ label }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-snackbar',
+                    standalone: true,
+                    template: `{{ label }}`
+                }]
+        }], ctorParameters: () => [{ type: MessageService }], propDecorators: { show: [{
+                type: HostBinding,
+                args: ['class.show']
+            }] } });
+
+class AppComponent {
+    messageService = inject(MessageService);
+    wuiModal = inject(WuiModal);
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    tooltip;
+    unsub = new Subject();
+    ngOnInit() {
+        this.messageService.get('wui:tooltip').pipe(takeUntil(this.unsub)).subscribe(params => {
+            this.tooltip.nativeElement.textContent = params.label;
+            let rect = params.el.getBoundingClientRect();
+            this.tooltip.nativeElement.style.top = (rect.y + rect.height + 16) + 'px';
+            this.tooltip.nativeElement.style.left = (rect.x + (rect.width / 2)) + 'px';
+            this.tooltip.nativeElement.classList.add('show');
+        });
+        this.messageService.get('wui:tooltip:hide').pipe(takeUntil(this.unsub)).subscribe(params => {
+            this.tooltip.nativeElement.classList.remove('show');
+        });
+    }
+    ngOnDestroy() {
+        this.unsub.next(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppComponent, isStandalone: true, selector: "wui-app", viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: `
+  <ng-content select="wui-drawer"></ng-content>
+  <div class="wui-app-main" #appMain>
+    <ng-content/>
+    <wui-page-host/>
+  </div>
+  <wui-modal-host/>
+  <wui-snackbar/>
+  `, isInline: true, dependencies: [{ kind: "component", type: PageHostComponent, selector: "wui-page-host" }, { kind: "component", type: ModalHostComponent, selector: "wui-modal-host" }, { kind: "component", type: SnackbarComponent, selector: "wui-snackbar" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-app',
+                    standalone: true,
+                    imports: [PageHostComponent, ModalHostComponent, SnackbarComponent],
+                    template: `
+  <ng-content select="wui-drawer"></ng-content>
+  <div class="wui-app-main" #appMain>
+    <ng-content/>
+    <wui-page-host/>
+  </div>
+  <wui-modal-host/>
+  <wui-snackbar/>
+  `
+                }]
+        }], propDecorators: { tooltip: [{
+                type: ViewChild,
+                args: ['tooltip']
+            }] } });
+
+class WuiInputDirective {
+    elementRef = inject(ElementRef);
+    controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
+    ngModel = inject(NgModel, { optional: true });
+    valueChanges = signal('');
+    set value(val) {
+        this.valueChanges.set(val);
+    }
+    formControlName = input(undefined);
+    unsub = new Subject();
+    whenKeyup(event) {
+        const value = event.target.value;
+        this.valueChanges.set(value);
+    }
+    whenChange(event) {
+        const value = event.target.value;
+        this.valueChanges.set(value);
+    }
+    ngOnInit() {
+        const name = this.formControlName();
+        if (this.controlContainer && name) {
+            const control = this.controlContainer.control?.get(name);
+            control?.valueChanges.pipe(takeUntil(this.unsub)).subscribe(value => {
+                this.valueChanges.set(value);
+            });
+            this.valueChanges.set(control?.value || '');
+            return;
+        }
+        if (this.ngModel) {
+            this.ngModel.valueChanges?.pipe(takeUntil(this.unsub)).subscribe(value => {
+                this.valueChanges.set(value);
+            });
+            return;
+        }
+        // Fallback: initial native element value
+        const nativeValue = this.elementRef.nativeElement.value;
+        this.valueChanges.set(nativeValue || '');
+    }
+    ngOnDestroy() {
+        this.unsub.next();
+        this.unsub.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: WuiInputDirective, isStandalone: true, selector: "[wuiInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup": "whenKeyup($event)", "change": "whenChange($event)" } }, exportAs: ["wuiInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WuiInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiInput]',
+                    exportAs: 'wuiInput',
+                    standalone: true
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], whenKeyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], whenChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }] } });
+
+class FormFieldComponent {
+    input;
+    hasContent = false;
+    unsub = new Subject();
+    injector = inject(Injector);
+    ngAfterContentInit() {
+        if (this.input) {
+            runInInjectionContext(this.injector, () => {
+                effect(() => {
+                    const value = this.input.valueChanges();
+                    this.hasContent = !!value && value.toString().length > 0;
+                });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.unsub.next();
+        this.unsub.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldComponent, isStandalone: true, selector: "wui-form-field", host: { properties: { "class.has-content": "this.hasContent" } }, queries: [{ propertyName: "input", first: true, predicate: WuiInputDirective, descendants: true }], ngImport: i0, template: `
+    <div class="wui-form-field-flex">
+      <ng-content select=".wui-form-field-prefix"></ng-content>
+      <div class="wui-form-field-infix">
+        <ng-content select=".wui-form-field-input-prefix"></ng-content>
+        <ng-content></ng-content>
+        <ng-content select=".wui-form-field-input-suffix"></ng-content>
+      </div>
+      <ng-content select=".wui-form-field-suffix"></ng-content>
+    </div>
+    <ng-content select=".wui-form-field-hint"></ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-form-field',
+                    standalone: true,
+                    template: `
+    <div class="wui-form-field-flex">
+      <ng-content select=".wui-form-field-prefix"></ng-content>
+      <div class="wui-form-field-infix">
+        <ng-content select=".wui-form-field-input-prefix"></ng-content>
+        <ng-content></ng-content>
+        <ng-content select=".wui-form-field-input-suffix"></ng-content>
+      </div>
+      <ng-content select=".wui-form-field-suffix"></ng-content>
+    </div>
+    <ng-content select=".wui-form-field-hint"></ng-content>
+  `
+                }]
+        }], propDecorators: { input: [{
+                type: ContentChild,
+                args: [WuiInputDirective]
+            }], hasContent: [{
+                type: HostBinding,
+                args: ['class.has-content']
+            }] } });
+
+class PageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PageComponent, isStandalone: true, selector: "wui-page", ngImport: i0, template: `
+    <ng-content select="wui-app-bar"></ng-content>
+    <ng-content select=".wui-page-inner"></ng-content>
+    <ng-content select=".wui-page-footer"></ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-page',
+                    standalone: true,
+                    template: `
+    <ng-content select="wui-app-bar"></ng-content>
+    <ng-content select=".wui-page-inner"></ng-content>
+    <ng-content select=".wui-page-footer"></ng-content>
+  `
+                }]
+        }] });
+
+class AvatarComponent {
+    src = input('');
+    size = input(40);
+    width = '40px';
+    height = '40px';
+    constructor() {
+        effect(() => {
+            const px = this.size() + 'px';
+            this.width = px;
+            this.height = px;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AvatarComponent, isStandalone: true, selector: "wui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "this.width", "style.height": "this.height" } }, ngImport: i0, template: `<img *ngIf="src.length > 0" [src]="src()"/>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-avatar',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<img *ngIf="src.length > 0" [src]="src()"/>`
+                }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+class DrawerComponent {
+    _showInput = input(false, {
+        transform: (value) => value != null && `${value}` !== 'false'
+    });
+    show = signal(this._showInput());
+    isMobile = signal(this.isMobileDevice());
+    avatar;
+    messageService = inject(MessageService);
+    unsub = new Subject();
+    constructor() {
+        effect(() => {
+            this.isShow = this.show();
+        }, { allowSignalWrites: true });
+    }
+    isShow = false;
+    onClick(e) {
+        const target = e.target;
+        if (target.tagName !== 'WUI-DRAWER-ITEM' &&
+            target.offsetParent?.tagName !== 'WUI-DRAWER-ITEM') {
+            return;
+        }
+        this.drawerItemClicked();
+    }
+    isMobileDevice() {
+        return /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i
+            .test(navigator.userAgent);
+    }
+    drawerItemClicked() {
+        if (this.isMobile()) {
+            this.show.set(false);
+        }
+    }
+    ngAfterContentInit() {
+        this.show.set(!this.isMobile());
+    }
+    ngOnInit() {
+        this.messageService.get('wui:toggleDrawer')
+            .pipe(takeUntil$1(this.unsub))
+            .subscribe(() => {
+            this.show.update(v => !v);
+        });
+    }
+    ngOnDestroy() {
+        this.unsub.next();
+        this.unsub.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerComponent, isStandalone: true, selector: "wui-drawer", inputs: { _showInput: { classPropertyName: "_showInput", publicName: "_showInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.show": "this.isShow" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }], ngImport: i0, template: `
+    @if (show()) {
+      <div class="wui-drawer-backdrop" (click)="show.set(false)"></div>
+    }
+    <ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-drawer',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (show()) {
+      <div class="wui-drawer-backdrop" (click)="show.set(false)"></div>
+    }
+    <ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { avatar: [{
+                type: ContentChild,
+                args: [AvatarComponent]
+            }], isShow: [{
+                type: HostBinding,
+                args: ['class.show']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class IconComponent {
+    icon = input('');
+    get hostClass() {
+        return this.icon() ? `mdi mdi-${this.icon()}` : 'mdi';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IconComponent, isStandalone: true, selector: "wui-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-icon',
+                    standalone: true,
+                    template: ``,
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DrawerItemComponent {
+    messageService = inject(MessageService);
+    icon = input('');
+    onClick() {
+        this.messageService.set('wui:showDrawer', false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DrawerItemComponent, isStandalone: true, selector: "wui-drawer-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
+    @if (icon()) {
+      <wui-icon [icon]="icon()"></wui-icon>
+    }
+    <div class="content">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "wui-icon", inputs: ["icon"] }, { kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-drawer-item',
+                    standalone: true,
+                    imports: [IconComponent, CommonModule],
+                    template: `
+    @if (icon()) {
+      <wui-icon [icon]="icon()"></wui-icon>
+    }
+    <div class="content">
+      <ng-content></ng-content>
+    </div>
+  `
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DrawerTogglerDirective {
+    messageService = inject(MessageService);
+    onClick() {
+        this.messageService.set('wui:toggleDrawer', null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerTogglerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DrawerTogglerDirective, isStandalone: true, selector: "[wuiToggleDrawer]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerTogglerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiToggleDrawer]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class AppBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppBarComponent, isStandalone: true, selector: "wui-app-bar", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    selector: 'wui-app-bar',
+                    template: `<ng-content></ng-content>`
+                }]
+        }] });
+
+class ListTileComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListTileComponent, isStandalone: true, selector: "wui-list-tile", ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-list-tile',
+                    standalone: true,
+                    template: `
+    <ng-content></ng-content>
+  `
+                }]
+        }] });
+class ListComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListComponent, isStandalone: true, selector: "wui-list", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-list',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`
+                }]
+        }] });
+
+class MenuDirective {
+    el = inject(ElementRef);
+    menu;
+    onClick() {
+        this.menu?.open(this.el.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MenuDirective, isStandalone: true, selector: "[wuiMenu]", inputs: { menu: ["wuiMenu", "menu"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wuiMenu]',
+                    standalone: true
+                }]
+        }], propDecorators: { menu: [{
+                type: Input,
+                args: ['wuiMenu']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+class MenuItemComponent {
+    icon = '';
+    host = inject(MenuComponent, { optional: true, host: true, skipSelf: true });
+    onClick(e) {
+        this.host?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuItemComponent, isStandalone: true, selector: "wui-menu-item", inputs: { icon: "icon" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: `
+    <div class="wui-menu-item-leading">
+      <wui-icon [icon]="icon"></wui-icon>
+    </div>
+    <div class="wui-menu-item-content"><ng-content></ng-content></div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "wui-icon", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-menu-item',
+                    standalone: true,
+                    imports: [IconComponent],
+                    template: `
+    <div class="wui-menu-item-leading">
+      <wui-icon [icon]="icon"></wui-icon>
+    </div>
+    <div class="wui-menu-item-content"><ng-content></ng-content></div>
+  `
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+class MenuComponent {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    _show = signal(false);
+    listenDocumentClick = false;
+    get showClass() {
+        return this._show();
+    }
+    onWindowClick(e) {
+        if (this.listenDocumentClick && this._show() && !this.el.nativeElement.contains(e.target)) {
+            this.close();
+        }
+    }
+    open(triggerElement) {
+        this.close();
+        setTimeout(() => {
+            const rect = triggerElement.getBoundingClientRect();
+            const el = this.el.nativeElement;
+            const menuWidth = el.offsetWidth;
+            const menuHeight = el.offsetHeight;
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            const possibleLeft = rect.x;
+            if (windowWidth - possibleLeft < menuWidth) {
+                const possibleRight = windowWidth - (rect.x + rect.width);
+                this.renderer.setStyle(el, 'right', `${possibleRight}px`);
+            }
+            else {
+                this.renderer.setStyle(el, 'left', `${possibleLeft}px`);
+            }
+            if (windowHeight < menuHeight) {
+                this.renderer.setStyle(el, 'top', '1rem');
+                this.renderer.setStyle(el, 'bottom', '1rem');
+            }
+            else {
+                const possibleTop = rect.y;
+                if (windowHeight - possibleTop > menuHeight) {
+                    this.renderer.setStyle(el, 'top', `${possibleTop}px`);
+                }
+                else {
+                    const possibleBottom = windowHeight - (rect.y + rect.height);
+                    this.renderer.setStyle(el, 'bottom', `${possibleBottom}px`);
+                }
+            }
+            this.listenDocumentClick = true;
+            this._show.set(true);
+        }, 200);
+    }
+    close() {
+        this._show.set(false);
+        this.listenDocumentClick = false;
+        const el = this.el.nativeElement;
+        this.renderer.removeStyle(el, 'top');
+        this.renderer.removeStyle(el, 'right');
+        this.renderer.removeStyle(el, 'bottom');
+        this.renderer.removeStyle(el, 'left');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, isStandalone: true, selector: "wui-menu", host: { listeners: { "document:click": "onWindowClick($event)" }, properties: { "class.show": "this.showClass" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wui-menu',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.show']
+            }], onWindowClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ToggleComponent {
+    // Input signals
+    tabindex = input(0);
+    // Output signals
+    change = output();
+    // State signals
+    checked = model(false);
+    disabled = signal(false);
+    isTouched = signal(false);
+    // ControlValueAccessor callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Auto-update form control value
+        effect(() => {
+            this.onChange(this.checked());
+        });
+    }
+    onKeyDown(e) {
+        if (e.key === ' ') {
+            e.preventDefault();
+            this.toggle();
+        }
+    }
+    toggle() {
+        if (!this.disabled()) {
+            this.markAsTouched();
+            this.checked.update(value => !value);
+            this.change.emit(this.checked());
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.onTouched();
+            this.isTouched.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "wui-toggle", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", checked: "checkedChange" }, host: { listeners: { "click": "toggle()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "tabindex()", "class.wui-toggle-checked": "checked()", "attr.disabled": "disabled() ? \"\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: ToggleComponent
+            }
+        ], ngImport: i0, template: "<div class=\"wui-toggle-switch-outer\">\n  <div class=\"wui-toggle-switch-track\">\n    <div class=\"wui-toggle-switch\"></div>\n  </div>\n</div>\n<div><ng-content class=\"wui-toggle-label\"></ng-content></div>", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wui-toggle', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: ToggleComponent
+                        }
+                    ], host: {
+                        '[attr.tabindex]': 'tabindex()',
+                        '[class.wui-toggle-checked]': 'checked()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '(click)': 'toggle()',
+                        '(keydown)': 'onKeyDown($event)'
+                    }, template: "<div class=\"wui-toggle-switch-outer\">\n  <div class=\"wui-toggle-switch-track\">\n    <div class=\"wui-toggle-switch\"></div>\n  </div>\n</div>\n<div><ng-content class=\"wui-toggle-label\"></ng-content></div>" }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of wui
+ */
+
+/*
+ * Public API Surface of wui-single
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppBarComponent, AppComponent, ContextMenuDirective, ContextMenuItemDirective, ContextMenuTriggerDirective, DialogComponent, DrawerComponent, DrawerItemComponent, DrawerTogglerDirective, FormFieldComponent, IconComponent, ListComponent, ListTileComponent, LoadingComponent, MenuComponent, MenuDirective, MenuItemComponent, MessageService, ModalComponent, ModalService, NavComponent, NavPopDirective, NavPushDirective, NavRootDirective, NavService, NumInputDirective, PageComponent, PageHeaderDirective, PageService, RippleDirective, RouterService, ScrollEndDirective, SnackbarComponent, SortableDirective, ToggleComponent, WuiInputDirective, WuiService, WuiSingleComponent, provideWui };
+//# sourceMappingURL=kusena-wui-single.mjs.map