@ngflux/ngflux 1.0.6 → 2.1.0

package/fesm2022/ngflux-ngflux.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, effect, Injector, viewChild, ViewContainerRef, HostListener, Component, input, ElementRef, HostBinding, makeEnvironmentProviders, output, model, untracked } from '@angular/core';
-import { AsyncSubject } from 'rxjs';
+import { InjectionToken, inject, ElementRef, input, computed, HostBinding, Component, ChangeDetectionStrategy, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, output, model, untracked, HostListener, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { filter, AsyncSubject } from 'rxjs';
 import { NgClass } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -9,63 +10,107 @@ const NGF_CONFIG = new InjectionToken('ngf-config');
 
 const NGF_DIALOG_DATA = new InjectionToken('ngf-dialog-data');
 
-class NgFluxLoadingInternal {
-    entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
-    count = computed(() => this.entries().length, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
-    isLoading = computed(() => this.count() > 0, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-    entry = computed(() => {
-        const entries = this.entries();
-        return entries.at(entries.length - 1);
-    }, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
-    start = (text = '') => this.entries.update(v => {
-        const entries = Array.from(v);
-        entries.push({ text });
-        return entries;
-    });
-    stop = () => this.entries.update(v => {
-        const entries = Array.from(v);
-        entries.pop();
-        return entries;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
+class NgFluxButton {
+    ref = inject(ElementRef);
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    type = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    direction = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
+    block = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    btnClassNames = computed(() => {
+        const names = [];
+        const direction = this.direction() ?? 'normal';
+        if (direction === 'reversed')
+            names.push(direction);
+        return names;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "btnClassNames" }] : /* istanbul ignore next */ []));
+    classNames = computed(() => [this.theme() ?? 'default', this.size() ?? 'md'].join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classNames" }] : /* istanbul ignore next */ []));
+    get bindClass() { return this.classNames(); }
+    get isBlock() { return this.block(); }
+    get isDisabled() { return this.disabled(); }
+    get tabIndex() { return 1; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxButton, isStandalone: true, selector: "ngf-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.bindClass", "class.block": "this.isBlock", "class.disabled": "this.isDisabled", "tabIndex": "this.tabIndex" } }, ngImport: i0, template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n  <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n    @if (icon(); as ico) {\n      <div class=\"icon\">\n        <i [ngClass]=\"ico\"></i>\n      </div>\n    }\n\n    <div class=\"content\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-button', imports: [NgClass], template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n  <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n    @if (icon(); as ico) {\n      <div class=\"icon\">\n        <i [ngClass]=\"ico\"></i>\n      </div>\n    }\n\n    <div class=\"content\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bindClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], isBlock: [{
+                type: HostBinding,
+                args: ['class.block']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['tabIndex']
+            }] } });
+
+class NgFluxDialogBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxDialogBodyComponent, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-dialog-body', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] }]
         }] });
 
-class NgFluxLoading {
-    internal = inject(NgFluxLoadingInternal);
-    data = computed(() => this.internal.entry(), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    isLoading = computed(() => this.internal.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-    start(text = '') {
-        this.internal.start(text);
-    }
-    stop() {
-        this.internal.stop();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
+class NgFluxDialogFooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxDialogFooterComponent, isStandalone: true, selector: "ngf-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoading, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-dialog-footer', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"] }]
         }] });
 
+class NgFluxDialogRootComponent {
+    injector = inject(Injector);
+    viewContainer = viewChild.required('container', { read: ViewContainerRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxDialogRootComponent, isStandalone: true, selector: "ngf-dialog-root", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-dialog-root', imports: [], template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] }]
+        }], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
 class NgFluxDialogInternal {
-    list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
-    count = computed(() => this.list().length, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
-    isOpen = computed(() => this.count() > 0, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    appRef = inject(ApplicationRef);
+    list = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    count = computed(() => this.list().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.count() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     active = computed(() => {
         const entries = this.cloneList();
         if (!entries.length)
             return null;
         const lastIndex = entries.length - 1;
         return entries[lastIndex];
-    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    root = signal(null, ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    rootRef;
     constructor() {
+        const { appRef } = this;
+        this.rootRef = createComponent(NgFluxDialogRootComponent, {
+            environmentInjector: appRef.injector,
+        });
         const body = document.querySelector('body');
         effect(() => {
             const isOpen = this.isOpen();
@@ -82,6 +127,13 @@ class NgFluxDialogInternal {
             }
         });
     }
+    initialize() {
+        const { appRef, rootRef } = this;
+        appRef.attachView(rootRef.hostView);
+        const elem = rootRef.location.nativeElement;
+        document.body.appendChild(elem);
+    }
+    // ==========================
     cloneList = () => Array.from(this.list());
     indexOf = (item) => {
         const entries = this.list();
@@ -116,10 +168,10 @@ class NgFluxDialogInternal {
     clear = () => {
         this.list.set([]);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -129,6 +181,234 @@ const NGF_DIALOG_CONFIG = new InjectionToken('ngf-dialog-config');
 const NGF_DIALOG_INSTANCE = new InjectionToken('ngf-dialog-instance');
 const NGF_DIALOG_CLOSE_FN = new InjectionToken('ngf-dialog-close-fn');
 
+class NgFluxDialogHeaderComponent {
+    config = inject(NGF_DIALOG_CONFIG);
+    dialogRef = inject(NgFluxDialogRef);
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxDialogHeaderComponent, isStandalone: true, selector: "ngf-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-dialog-header', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass], template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class NgFluxLoadingComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxLoadingComponent, isStandalone: true, selector: "ngf-loading", ngImport: i0, template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-loading', imports: [], template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] }]
+        }] });
+
+class NgFluxLoadingRootComponent {
+    config = inject(NGF_CONFIG);
+    injector = inject(Injector);
+    entries = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    count = computed(() => this.entries().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.count() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    get showLoading() { return this.isLoading(); }
+    viewContainer = viewChild.required('container', { read: ViewContainerRef });
+    componentRef;
+    constructor() {
+        const { config, injector } = this;
+        effect(() => {
+            const viewContainer = this.viewContainer();
+            const component = config.loading?.component ?? NgFluxLoadingComponent;
+            const newInjector = Injector.create({
+                parent: injector,
+                providers: [],
+            });
+            this.componentRef = viewContainer.createComponent(component, {
+                injector: newInjector,
+            });
+        });
+    }
+    entry = computed(() => {
+        const entries = this.entries();
+        return entries.at(entries.length - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+    start = (text = '') => this.entries.update(v => {
+        const entries = Array.from(v);
+        entries.push({ text });
+        return entries;
+    });
+    stop = () => this.entries.update(v => {
+        const entries = Array.from(v);
+        entries.pop();
+        return entries;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxLoadingRootComponent, isStandalone: true, selector: "ngf-loading-root", host: { properties: { "class.show": "this.showLoading" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-loading-root', imports: [], template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showLoading: [{
+                type: HostBinding,
+                args: ['class.show']
+            }], viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+
+class NgFluxPaginationInfo {
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    callback = output();
+    limit = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+    limitOptions = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limitOptions" }] : /* istanbul ignore next */ []));
+    info = computed(() => {
+        const data = this.data();
+        const from = data.from.toLocaleString();
+        const to = data.to.toLocaleString();
+        const total = data.total.toLocaleString();
+        return `${from} - ${to} of ${total}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    disablePrev = computed(() => {
+        const data = this.data();
+        return data.currentPage <= 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disablePrev" }] : /* istanbul ignore next */ []));
+    disableNext = computed(() => {
+        const data = this.data();
+        return data.currentPage >= data.lastPage;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableNext" }] : /* istanbul ignore next */ []));
+    prev() {
+        const data = this.data();
+        this.callback.emit({
+            page: data.currentPage - 1,
+            limit: data.perPage,
+        });
+    }
+    next() {
+        const data = this.data();
+        this.callback.emit({
+            page: data.currentPage + 1,
+            limit: data.perPage,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxPaginationInfo, isStandalone: true, selector: "ngf-pagination-info", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback", limit: "limitChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitOptions(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPaginationInfo, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-pagination-info', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule], template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitOptions(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }, { type: i0.Output, args: ["limitChange"] }], limitOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitOptions", required: true }] }] } });
+
+class NgFluxPagination {
+    config = inject(NGF_CONFIG);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    preload = input(this.config.pagination?.preload ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+    transform = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "transform" }] : /* istanbul ignore next */ []));
+    limit = model(this.config.pagination?.limit ?? 10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+    limitOptions = input(this.config.pagination?.limitOptions ?? [5, 10, 20, 30, 40, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limitOptions" }] : /* istanbul ignore next */ []));
+    callback = output();
+    value = computed(() => {
+        const { config } = this;
+        const data = this.data();
+        const transform = this.transform() ?? config.pagination?.transform;
+        if (!transform)
+            return data;
+        return {
+            currentPage: transform.getCurrentPage(data),
+            lastPage: transform.getLastPage(data),
+            perPage: transform.getPerPage(data),
+            from: transform.getFrom(data),
+            to: transform.getTo(data),
+            total: transform.getTotal(data),
+            data: transform.getData(data),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    constructor() {
+        let init = false;
+        effect(() => {
+            const limit = Number(this.limit());
+            const preload = untracked(this.preload);
+            const { currentPage: page } = untracked(this.value);
+            if (preload || init) {
+                this.callback.emit({ limit, page });
+            }
+            init = true;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: NgFluxPagination, isStandalone: true, selector: "ngf-pagination", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limit: "limitChange", callback: "callback" }, ngImport: i0, template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"], dependencies: [{ kind: "component", type: NgFluxPaginationInfo, selector: "ngf-pagination-info", inputs: ["data", "limit", "limitOptions"], outputs: ["callback", "limitChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-pagination', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgFluxPaginationInfo], template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }, { type: i0.Output, args: ["limitChange"] }], limitOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitOptions", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
+
+class NgFluxLoadingInternal {
+    config = inject(NGF_CONFIG);
+    appRef = inject(ApplicationRef);
+    router = inject(Router, { optional: true });
+    rootRef;
+    constructor() {
+        const { appRef } = this;
+        this.rootRef = createComponent(NgFluxLoadingRootComponent, {
+            environmentInjector: appRef.injector,
+        });
+    }
+    initialize() {
+        const { appRef, rootRef } = this;
+        appRef.attachView(rootRef.hostView);
+        const elem = rootRef.location.nativeElement;
+        document.body.appendChild(elem);
+    }
+    showOnRouteNavigation() {
+        const { config, router } = this;
+        if (router && config.loading?.showOnRouteNavigation) {
+            const root = this.rootRef.instance;
+            const navStart = filter(nav => nav instanceof NavigationStart);
+            router.events.pipe(navStart).subscribe(nav => root.start());
+            const navEnd = filter(nav => nav instanceof NavigationEnd);
+            router.events.pipe(navEnd).subscribe(nav => root.stop());
+            const navCancel = filter(nav => nav instanceof NavigationCancel);
+            router.events.pipe(navCancel).subscribe(nav => root.stop());
+            const navError = filter(nav => nav instanceof NavigationError);
+            router.events.pipe(navError).subscribe(nav => root.stop());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class NgFluxLoading {
+    internal = inject(NgFluxLoadingInternal);
+    root = this.internal.rootRef.instance;
+    data = computed(() => this.root.entry(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.root.isLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    start = (text = '') => this.root.start(text);
+    stop = () => this.root.stop();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoading, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class NgFluxDialogComponent {
     injector = inject(Injector);
     instance = inject(NgFluxDialogInstance);
@@ -144,9 +424,7 @@ class NgFluxDialogComponent {
             const viewContainer = this.viewContainer();
             const newInjector = Injector.create({
                 parent: injector,
-                providers: [
-                    { provide: NGF_DIALOG_DATA, useValue: config?.data ?? null },
-                ]
+                providers: [{ provide: NGF_DIALOG_DATA, useValue: config?.data ?? null }],
             });
             this.componentRef = viewContainer.createComponent(content, {
                 injector: newInjector,
@@ -176,7 +454,8 @@ class NgFluxDialogComponent {
     onAnimationComplete = (e) => {
         switch (e.animationName) {
             case 'ngfDialogOpen':
-                { }
+                {
+                }
                 break;
             case 'ngfDialogClose':
                 {
@@ -194,12 +473,12 @@ class NgFluxDialogComponent {
         const ref = this.componentRef.location;
         ref.nativeElement.classList.add('close');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: NgFluxDialogComponent, isStandalone: true, selector: "ngf-dialog", host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxDialogComponent, isStandalone: true, selector: "ngf-dialog", host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngf-dialog', imports: [], template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"] }]
+            args: [{ selector: 'ngf-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], onBackdropClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -301,96 +580,21 @@ class NgFluxDialogInstance {
     }
 }
 
-class NgFluxDialogHeaderComponent {
-    config = inject(NGF_DIALOG_CONFIG);
-    dialogRef = inject(NgFluxDialogRef);
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxDialogHeaderComponent, isStandalone: true, selector: "ngf-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-dialog-header', imports: [
-                        NgClass,
-                    ], template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
-
-class NgFluxDialogBodyComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: NgFluxDialogBodyComponent, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-dialog-body', imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] }]
-        }] });
-
-class NgFluxDialogFooterComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: NgFluxDialogFooterComponent, isStandalone: true, selector: "ngf-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-dialog-footer', imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"] }]
-        }] });
-
-class NgFluxButton {
-    ref = inject(ElementRef);
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
-    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
-    block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    btnClassNames = computed(() => {
-        const names = [];
-        const direction = this.direction() ?? 'normal';
-        if (direction === 'reversed')
-            names.push(direction);
-        return names;
-    }, ...(ngDevMode ? [{ debugName: "btnClassNames" }] : /* istanbul ignore next */ []));
-    classNames = computed(() => [
-        this.theme() ?? 'default',
-        this.size() ?? 'md',
-    ].join(' '), ...(ngDevMode ? [{ debugName: "classNames" }] : /* istanbul ignore next */ []));
-    get bindClass() { return this.classNames(); }
-    get isBlock() { return this.block(); }
-    get isDisabled() { return this.disabled(); }
-    constructor() {
-        const { ref: { nativeElement } } = this;
-        nativeElement.tabIndex = 1;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxButton, isStandalone: true, selector: "ngf-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.bindClass", "class.block": "this.isBlock", "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n  <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n    @if (icon(); as ico) {\n      <div class=\"icon\">\n        <i [ngClass]=\"ico\"></i>\n      </div>\n    }\n\n    <div class=\"content\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxButton, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-button', imports: [NgClass], template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n  <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n    @if (icon(); as ico) {\n      <div class=\"icon\">\n        <i [ngClass]=\"ico\"></i>\n      </div>\n    }\n\n    <div class=\"content\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bindClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], isBlock: [{
-                type: HostBinding,
-                args: ['class.block']
-            }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
-
 class NgFluxAlertDialog {
     config = inject(NGF_CONFIG);
     dialogRef = inject(NgFluxDialogRef);
     options = inject(NGF_DIALOG_DATA);
     buttons = computed(() => {
         const config = this.config.dialog?.alert || {};
-        return this.options.buttons ?? [
+        return (this.options.buttons ?? [
             Object.assign({
                 text: 'Okay',
                 theme: 'primary',
                 onClick: (e, btn, ref) => ref.close(),
             }, config.okayButton),
-        ];
-    }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+        ]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
     onButtonClick(e, btn) {
         const { dialogRef } = this;
         if (btn.onClick) {
@@ -400,17 +604,17 @@ class NgFluxAlertDialog {
             dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxAlertDialog, isStandalone: true, selector: "ngf-dialog-box-alert", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxAlertDialog, isStandalone: true, selector: "ngf-dialog-box-alert", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}:host .success{color:var(--ngf-success)}:host .error{color:var(--ngf-error)}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-alert', imports: [
                         NgFluxButton,
                         NgFluxDialogHeaderComponent,
                         NgFluxDialogBodyComponent,
                         NgFluxDialogFooterComponent,
-                    ], template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"] }]
+                    ], template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}:host .success{color:var(--ngf-success)}:host .error{color:var(--ngf-error)}\n"] }]
         }] });
 
 class NgFluxConfirmDialog {
@@ -420,72 +624,80 @@ class NgFluxConfirmDialog {
     buttons = computed(() => {
         const config = this.config.dialog?.prompt ?? {};
         return [
-            this.options.cancelButton ?? Object.assign({
-                text: 'Cancel',
-                theme: 'dark',
-                onClick: (e, btn, dialogRef) => dialogRef.close(),
-            }, config.cancelButton),
-            this.options.okayButton ?? Object.assign({
-                text: 'Okay',
-                theme: 'primary',
-                onClick: (e, btn, dialogRef) => dialogRef.close(true),
-            }, config.submitButton),
+            this.options.cancelButton ??
+                Object.assign({
+                    text: 'Cancel',
+                    theme: 'dark',
+                    onClick: (e, btn, dialogRef) => dialogRef.close(),
+                }, config.cancelButton),
+            this.options.okayButton ??
+                Object.assign({
+                    text: 'Okay',
+                    theme: 'primary',
+                    onClick: (e, btn, dialogRef) => dialogRef.close(true),
+                }, config.submitButton),
         ];
-    }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxConfirmDialog, isStandalone: true, selector: "ngf-dialog-box-confirm", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxConfirmDialog, isStandalone: true, selector: "ngf-dialog-box-confirm", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'ngf-dialog-box-confirm', imports: [
+            args: [{ selector: 'ngf-dialog-box-confirm', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         NgFluxButton,
                         NgFluxDialogHeaderComponent,
                         NgFluxDialogFooterComponent,
                         NgFluxDialogBodyComponent,
-                    ], template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"] }]
+                    ], template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"] }]
         }] });
 
 class NgFluxPromptDialog {
     config = inject(NGF_CONFIG);
     dialogRef = inject(NgFluxDialogRef);
     options = inject(NGF_DIALOG_DATA);
-    text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    value = computed(() => this.text().trim(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    text = signal(this.options.defaultValue ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    value = computed(() => this.text().trim(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     buttons = computed(() => {
         const config = this.config.dialog?.prompt ?? {};
         const value = this.value();
         return [
-            this.options.cancelButton ?? Object.assign({
-                text: 'Cancel',
-                theme: 'dark',
-                onClick: (e, btn, dialogRef) => dialogRef.close(),
-            }, config.cancelButton),
-            this.options.submitButton ?? Object.assign({
-                text: 'Submit',
-                theme: 'primary',
-                onClick: (e, btn, dialogRef) => dialogRef.close(value),
-                disabled: () => !value,
-            }, config.submitButton),
+            this.options.cancelButton ??
+                Object.assign({
+                    text: 'Cancel',
+                    theme: 'dark',
+                    onClick: (e, btn, dialogRef) => dialogRef.close(),
+                }, config.cancelButton),
+            this.options.submitButton ??
+                Object.assign({
+                    text: 'Submit',
+                    theme: 'primary',
+                    onClick: (e, btn, dialogRef) => dialogRef.close(value),
+                    disabled: () => !value,
+                }, config.submitButton),
         ];
-    }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxPromptDialog, isStandalone: true, selector: "ngf-dialog-box-prompt", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxPromptDialog, isStandalone: true, selector: "ngf-dialog-box-prompt", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [placeholder]=\"options.placeholder\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'ngf-dialog-box-prompt', imports: [
+            args: [{ selector: 'ngf-dialog-box-prompt', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         FormsModule,
                         NgFluxButton,
                         NgFluxDialogHeaderComponent,
                         NgFluxDialogFooterComponent,
                         NgFluxDialogBodyComponent,
-                    ], template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"] }]
+                    ], template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [placeholder]=\"options.placeholder\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"] }]
         }] });
 
 class NgFluxDialog {
@@ -497,11 +709,7 @@ class NgFluxDialog {
         config.closeOnBackBtn ??= true;
         config.closeOnEsc ??= true;
         const { internal } = this;
-        const root = internal.root();
-        if (!root)
-            throw new Error('"ngf-dialog-root" component not found. ' +
-                'Use "<ngf-root></ngf-root>" in your root component to enable all NgFlux features or ' +
-                'add "<ngf-dialog-root></ngf-dialog-root>" to your root component to enable the NgFluxDialog feature.');
+        const root = internal.rootRef.instance;
         const onClosed = (ins) => {
             internal.remove(ins);
         };
@@ -510,8 +718,7 @@ class NgFluxDialog {
         return instance.events;
     }
     closeAll = () => this.internal.closeAll();
-    alert(title, content, buttons) {
-        const data = { title, content, buttons };
+    alert(data) {
         const dialog = this.open(NgFluxAlertDialog, {
             closeOnBackBtn: false,
             backdropClose: false,
@@ -520,13 +727,13 @@ class NgFluxDialog {
         });
         return dialog.closed;
     }
-    success(title, message, buttons) {
-        message = `<div class="mbi-success">${message}</div>`;
-        return this.alert(title, message, buttons);
+    success(data) {
+        data.content = `<div class="success">${data.content}</div>`;
+        return this.alert(data);
     }
-    error(title, message, buttons) {
-        message = `<div class="mbi-error">${message}</div>`;
-        return this.alert(title, message, buttons);
+    error(data) {
+        data.content = `<div class="error">${data.content}</div>`;
+        return this.alert(data);
     }
     confirm(data) {
         const dialog = this.open(NgFluxConfirmDialog, {
@@ -546,10 +753,10 @@ class NgFluxDialog {
         });
         return dialog.closed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -562,170 +769,18 @@ const provideNgFlux = (config) => {
         NgFluxDialogInternal,
         NgFluxLoading,
         NgFluxLoadingInternal,
+        provideAppInitializer(() => {
+            const dialog = inject(NgFluxDialogInternal);
+            dialog.initialize();
+        }),
+        provideAppInitializer(() => {
+            const loading = inject(NgFluxLoadingInternal);
+            loading.initialize();
+            loading.showOnRouteNavigation();
+        }),
     ]);
 };
 
-class NgFluxDialogRootComponent {
-    internal = inject(NgFluxDialogInternal);
-    injector = inject(Injector);
-    viewContainer = viewChild.required('container', { read: ViewContainerRef });
-    constructor() {
-        const { internal } = this;
-        internal.root.set(this);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: NgFluxDialogRootComponent, isStandalone: true, selector: "ngf-dialog-root", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxDialogRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-dialog-root', imports: [], template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
-
-class NgFluxLoadingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: NgFluxLoadingComponent, isStandalone: true, selector: "ngf-loading", ngImport: i0, template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-loading', imports: [], template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] }]
-        }] });
-
-class NgFluxLoadingRootComponent {
-    config = inject(NGF_CONFIG);
-    internal = inject(NgFluxLoadingInternal);
-    injector = inject(Injector);
-    get isLoading() { return this.internal.isLoading(); }
-    viewContainer = viewChild.required('container', { read: ViewContainerRef });
-    componentRef;
-    constructor() {
-        const { config, injector } = this;
-        effect(() => {
-            const viewContainer = this.viewContainer();
-            const component = config.loading?.component ?? NgFluxLoadingComponent;
-            const newInjector = Injector.create({
-                parent: injector,
-                providers: [],
-            });
-            this.componentRef = viewContainer.createComponent(component, {
-                injector: newInjector,
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: NgFluxLoadingRootComponent, isStandalone: true, selector: "ngf-loading-root", host: { properties: { "class.show": "this.isLoading" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxLoadingRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-loading-root', imports: [], template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isLoading: [{
-                type: HostBinding,
-                args: ['class.show']
-            }], viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
-
-class NgFluxRootComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: NgFluxRootComponent, isStandalone: true, selector: "ngf-root", ngImport: i0, template: "<ng-content></ng-content>\n\n<ngf-dialog-root></ngf-dialog-root>\n<ngf-loading-root></ngf-loading-root>\n", styles: [""], dependencies: [{ kind: "component", type: NgFluxDialogRootComponent, selector: "ngf-dialog-root" }, { kind: "component", type: NgFluxLoadingRootComponent, selector: "ngf-loading-root" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxRootComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-root', imports: [
-                        NgFluxDialogRootComponent,
-                        NgFluxLoadingRootComponent,
-                    ], template: "<ng-content></ng-content>\n\n<ngf-dialog-root></ngf-dialog-root>\n<ngf-loading-root></ngf-loading-root>\n" }]
-        }] });
-
-class NgFluxPaginationInfo {
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    callback = output();
-    limit = model.required(...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
-    limitEntries = input.required(...(ngDevMode ? [{ debugName: "limitEntries" }] : /* istanbul ignore next */ []));
-    info = computed(() => {
-        const data = this.data();
-        const from = data.from.toLocaleString();
-        const to = data.to.toLocaleString();
-        const total = data.total.toLocaleString();
-        return `${from} - ${to} of ${total}`;
-    }, ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
-    disablePrev = computed(() => {
-        const data = this.data();
-        return data.currentPage <= 1;
-    }, ...(ngDevMode ? [{ debugName: "disablePrev" }] : /* istanbul ignore next */ []));
-    disableNext = computed(() => {
-        const data = this.data();
-        return data.currentPage >= data.lastPage;
-    }, ...(ngDevMode ? [{ debugName: "disableNext" }] : /* istanbul ignore next */ []));
-    prev() {
-        const data = this.data();
-        this.callback.emit({
-            page: data.currentPage - 1,
-            limit: data.perPage,
-        });
-    }
-    next() {
-        const data = this.data();
-        this.callback.emit({
-            page: data.currentPage + 1,
-            limit: data.perPage,
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgFluxPaginationInfo, isStandalone: true, selector: "ngf-pagination-info", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, limitEntries: { classPropertyName: "limitEntries", publicName: "limitEntries", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback", limit: "limitChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitEntries(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPaginationInfo, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-pagination-info', imports: [
-                        FormsModule,
-                    ], template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitEntries(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }, { type: i0.Output, args: ["limitChange"] }], limitEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitEntries", required: true }] }] } });
-
-class NgFluxPagination {
-    config = inject(NGF_CONFIG);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    preload = input(this.config.pagination?.preload ?? false, ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
-    transform = input(...(ngDevMode ? [undefined, { debugName: "transform" }] : /* istanbul ignore next */ []));
-    limit = model(this.config.pagination?.limit ?? 10, ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
-    limitEntries = input(this.config.pagination?.limitEntries ?? [5, 10, 20, 30, 40, 50], ...(ngDevMode ? [{ debugName: "limitEntries" }] : /* istanbul ignore next */ []));
-    callback = output();
-    value = computed(() => {
-        const { config } = this;
-        const data = this.data();
-        const transform = this.transform() ?? config.pagination?.transform;
-        if (!transform)
-            return data;
-        return {
-            currentPage: transform.getCurrentPage(data),
-            lastPage: transform.getLastPage(data),
-            perPage: transform.getPerPage(data),
-            from: transform.getFrom(data),
-            to: transform.getTo(data),
-            total: transform.getTotal(data),
-            data: transform.getData(data),
-        };
-    }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    constructor() {
-        let init = false;
-        effect(() => {
-            const limit = Number(this.limit());
-            const preload = untracked(this.preload);
-            const { currentPage: page } = untracked(this.value);
-            if (preload || init) {
-                this.callback.emit({ limit, page });
-            }
-            init = true;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: NgFluxPagination, isStandalone: true, selector: "ngf-pagination", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, limitEntries: { classPropertyName: "limitEntries", publicName: "limitEntries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limit: "limitChange", callback: "callback" }, ngImport: i0, template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitEntries]=\"limitEntries()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitEntries]=\"limitEntries()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"], dependencies: [{ kind: "component", type: NgFluxPaginationInfo, selector: "ngf-pagination-info", inputs: ["data", "limit", "limitEntries"], outputs: ["callback", "limitChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgFluxPagination, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngf-pagination', imports: [
-                        NgFluxPaginationInfo,
-                    ], template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitEntries]=\"limitEntries()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitEntries]=\"limitEntries()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }, { type: i0.Output, args: ["limitChange"] }], limitEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitEntries", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
-
-// export * from './pagination/info/info.component';
-
 /*
  * Public API Surface of ngflux
  */
@@ -734,5 +789,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxRootComponent, provideNgFlux };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, provideNgFlux };
 //# sourceMappingURL=ngflux-ngflux.mjs.map