@ngflux/ngflux 3.2.2 → 3.2.4

package/fesm2022/ngflux-ngflux.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, Component, inject, ElementRef, computed, HostBinding, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, linkedSignal, output, model, ChangeDetectionStrategy, untracked, booleanAttribute, Directive, viewChildren, TemplateRef, debounced, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from '@angular/core';
+import { InjectionToken, input, Component, inject, ElementRef, computed, HostBinding, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, linkedSignal, model, Directive, output, ChangeDetectionStrategy, untracked, booleanAttribute, viewChildren, TemplateRef, debounced, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { TitleStrategy, Router, ActivationEnd, RouterLink, RouterLinkActive, isActive, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { filter, map, AsyncSubject, of, switchMap, Observable, from } from 'rxjs';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgClass, KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -22,10 +22,10 @@ class NgFluxActions {
     ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
     gap = input(10, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxActions, isStandalone: true, selector: "ngf-actions", inputs: { justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\" [class.wrap]=\"wrap()\" [style.gap.px]=\"gap()\" [style.justify-content]=\"justify()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host>.wrapper{display:flex;flex-direction:row;align-items:center}:host>.wrapper.wrap{flex-wrap:wrap}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxActions, isStandalone: true, selector: "ngf-actions", inputs: { justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\" [class.wrap]=\"wrap()\" [style.gap.px]=\"gap()\" [style.justify-content]=\"justify()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host>.wrapper{display:flex;flex-direction:row;align-items:center}:host>.wrapper.wrap{flex-wrap:wrap}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxActions, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-actions', imports: [], template: "<div class=\"wrapper\" [class.wrap]=\"wrap()\" [style.gap.px]=\"gap()\" [style.justify-content]=\"justify()\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host>.wrapper{display:flex;flex-direction:row;align-items:center}:host>.wrapper.wrap{flex-wrap:wrap}\n"] }]
         }], propDecorators: { justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
@@ -60,10 +60,10 @@ class NgFluxButton {
     get isBlock() { return this.block(); }
     get isDisabled() { return this.disabled(); }
     get tabIndex() { return 1; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: "22.1.1", ngImport: i0, type: NgFluxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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: [{
@@ -81,19 +81,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }] } });
 
 class NgFluxDialogBody {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxDialogBody, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: NgFluxDialogBody, 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: "22.1.1", ngImport: i0, type: NgFluxDialogBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogBody, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-body', imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] }]
         }] });
 
 class NgFluxDialogFooter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxDialogFooter, 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: NgFluxDialogFooter, 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: "22.1.1", ngImport: i0, type: NgFluxDialogFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogFooter, 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"] }]
         }] });
@@ -101,10 +101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 class NgFluxDialogRootComponent {
     injector = inject(Injector);
     viewContainer = viewChild.required('container', { ...(ngDevMode ? { debugName: "viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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.1.1", ngImport: i0, type: NgFluxDialogRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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 }] }] } });
@@ -188,10 +188,10 @@ class NgFluxDialogInternal {
     clear = () => {
         this.list.set([]);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -247,10 +247,10 @@ class RouteTitleStrategy extends TitleStrategy {
         if (title)
             service.setTitle(title);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RouteTitleStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RouteTitleStrategy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RouteTitleStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -275,10 +275,10 @@ class MetaInternal {
                 meta.updateTag({ name: 'keywords', content: keywords });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MetaInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MetaInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: MetaInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -325,10 +325,10 @@ class TabNavController {
             return map;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabNavController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabNavController });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabNavController, decorators: [{
             type: Injectable
         }] });
 
@@ -353,31 +353,169 @@ class TabGroupController {
             return map;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabGroupController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabGroupController });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: TabGroupController, decorators: [{
             type: Injectable
         }] });
 
+class NgFluxToastController {
+    config = inject(NGF_CONFIG);
+    data = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    map = computed(() => {
+        const data = this.data();
+        const map = new Map();
+        for (const [item] of data.entries()) {
+            const key = item.placement;
+            const entries = map.get(key) ?? [];
+            entries.push(item);
+            map.set(key, entries);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    add = (options) => this.data.update(v => {
+        const data = new Map(v);
+        data.set(options, true);
+        return data;
+    });
+    remove = (options) => this.data.update(v => {
+        const data = new Map(v);
+        data.delete(options);
+        return data;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NgFluxThemeDirective {
+    ngfTheme = model('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngfTheme" }] : /* istanbul ignore next */ []));
+    className = computed(() => `ngf-theme-${this.ngfTheme()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxThemeDirective, isStandalone: true, selector: "[ngfTheme]", inputs: { ngfTheme: { classPropertyName: "ngfTheme", publicName: "ngfTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngfTheme: "ngfThemeChange" }, host: { properties: { "class": "className()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngfTheme]',
+                    host: {
+                        '[class]': 'className()',
+                    },
+                }]
+        }], propDecorators: { ngfTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngfTheme", required: false }] }, { type: i0.Output, args: ["ngfThemeChange"] }] } });
+
+class NgFluxToastComponent {
+    ctrl = inject(NgFluxToastController);
+    theme = inject(NgFluxThemeDirective);
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const { ctrl } = this;
+        effect(() => {
+            const options = this.options();
+            this.theme.ngfTheme.set(options.theme);
+        });
+        effect(onCleanup => {
+            const options = this.options();
+            if (!options.timeout)
+                return;
+            const timeout = setTimeout(() => ctrl.remove(options), options.timeout);
+            onCleanup(() => clearTimeout(timeout));
+        });
+    }
+    close() {
+        const options = this.options();
+        this.ctrl.remove(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxToastComponent, isStandalone: true, selector: "ngf-toast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: NgFluxThemeDirective }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\" [innerHTML]=\"options().content\"></div>\n\n  <div class=\"close-btn\" (click)=\"close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n</div>\n", styles: [":host{display:block;box-shadow:0 0 3px #000000b3;visibility:visible!important;padding:5px 10px;font-size:.8rem;transition:opacity .5s ease-in-out;opacity:0}:host .wrapper{display:flex;flex-direction:row;align-items:center;gap:10px}:host .wrapper>.content{display:block;flex:1 0 0;font-weight:500}:host .wrapper>.close-btn{display:block;cursor:pointer;padding:5px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast', imports: [], hostDirectives: [
+                        NgFluxThemeDirective,
+                    ], template: "<div class=\"wrapper\">\n  <div class=\"content\" [innerHTML]=\"options().content\"></div>\n\n  <div class=\"close-btn\" (click)=\"close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n</div>\n", styles: [":host{display:block;box-shadow:0 0 3px #000000b3;visibility:visible!important;padding:5px 10px;font-size:.8rem;transition:opacity .5s ease-in-out;opacity:0}:host .wrapper{display:flex;flex-direction:row;align-items:center;gap:10px}:host .wrapper>.content{display:block;flex:1 0 0;font-weight:500}:host .wrapper>.close-btn{display:block;cursor:pointer;padding:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
+
+class NgFluxToastGroupComponent {
+    placement = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxToastGroupComponent, isStandalone: true, selector: "ngf-toast-group", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "placement()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  @for (item of items(); track item) {\n    <ngf-toast [options]=\"item\" animate.enter=\"fade-in\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;position:absolute;width:calc(100% - 2 * var(--ngf-toast-x));transition:opacity .5s ease-in-out;max-width:300px;--flex-direction: column}:host.topLeft{inset:var(--ngf-toast-y) auto auto var(--ngf-toast-x)}:host.topCenter{inset:var(--ngf-toast-y) auto auto 50%;transform:translate(-50%)}:host.topRight{inset:var(--ngf-toast-y) var(--ngf-toast-x) auto auto}:host.bottomLeft{inset:auto auto var(--ngf-toast-y) var(--ngf-toast-x);--flex-direction: column-reverse}:host.bottomCenter{inset:auto auto var(--ngf-toast-y) 50%;transform:translate(-50%);--flex-direction: column-reverse}:host.bottomRight{inset:auto var(--ngf-toast-x) var(--ngf-toast-y) auto;--flex-direction: column-reverse}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;gap:10px}:host .wrapper .fade-in{opacity:1}:host .wrapper .fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: NgFluxToastComponent, selector: "ngf-toast", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast-group', imports: [
+                        NgFluxToastComponent,
+                    ], host: {
+                        '[class]': 'placement()',
+                    }, template: "<div class=\"wrapper\">\n  @for (item of items(); track item) {\n    <ngf-toast [options]=\"item\" animate.enter=\"fade-in\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;position:absolute;width:calc(100% - 2 * var(--ngf-toast-x));transition:opacity .5s ease-in-out;max-width:300px;--flex-direction: column}:host.topLeft{inset:var(--ngf-toast-y) auto auto var(--ngf-toast-x)}:host.topCenter{inset:var(--ngf-toast-y) auto auto 50%;transform:translate(-50%)}:host.topRight{inset:var(--ngf-toast-y) var(--ngf-toast-x) auto auto}:host.bottomLeft{inset:auto auto var(--ngf-toast-y) var(--ngf-toast-x);--flex-direction: column-reverse}:host.bottomCenter{inset:auto auto var(--ngf-toast-y) 50%;transform:translate(-50%);--flex-direction: column-reverse}:host.bottomRight{inset:auto var(--ngf-toast-x) var(--ngf-toast-y) auto;--flex-direction: column-reverse}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;gap:10px}:host .wrapper .fade-in{opacity:1}:host .wrapper .fade-out{opacity:0}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+
+class NgFluxToastRootComponent {
+    ctrl = inject(NgFluxToastController);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxToastRootComponent, isStandalone: true, selector: "ngf-toast-root", ngImport: i0, template: "<div class=\"wrapper\">\n  @for (item of ctrl.map() | keyvalue; track item.key) {\n    <ngf-toast-group [placement]=\"item.key\" [items]=\"item.value\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;visibility:hidden;height:0px!important}:host .wrapper{display:block;position:fixed;visibility:hidden;z-index:var(--ngf-toast-z-index)!important;inset:0}:host .wrapper .fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: NgFluxToastGroupComponent, selector: "ngf-toast-group", inputs: ["placement", "items"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast-root', imports: [
+                        KeyValuePipe,
+                        NgFluxToastGroupComponent,
+                    ], template: "<div class=\"wrapper\">\n  @for (item of ctrl.map() | keyvalue; track item.key) {\n    <ngf-toast-group [placement]=\"item.key\" [items]=\"item.value\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;visibility:hidden;height:0px!important}:host .wrapper{display:block;position:fixed;visibility:hidden;z-index:var(--ngf-toast-z-index)!important;inset:0}:host .wrapper .fade-out{opacity:0}\n"] }]
+        }] });
+
+class NgFluxToastInitializer {
+    appRef = inject(ApplicationRef);
+    rootRef;
+    constructor() {
+        const { appRef } = this;
+        this.rootRef = createComponent(NgFluxToastRootComponent, {
+            environmentInjector: appRef.injector,
+        });
+    }
+    initialize() {
+        const { appRef, rootRef } = this;
+        appRef.attachView(rootRef.hostView);
+        const elem = rootRef.location.nativeElement;
+        document.body.appendChild(elem);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class NgFluxDialogHeader {
     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.1.1", ngImport: i0, type: NgFluxDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxDialogHeader, 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxDialogHeader, 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: "22.1.1", ngImport: i0, type: NgFluxDialogHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogHeader, 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 NgFluxLoadingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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.1.1", ngImport: i0, type: NgFluxLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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"] }]
         }] });
@@ -423,10 +561,10 @@ class NgFluxLoadingRootComponent {
         entries.pop();
         return entries;
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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.1.1", ngImport: i0, type: NgFluxLoadingRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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: [{
@@ -474,10 +612,10 @@ class NgFluxPaginationInfo {
             limit: data.perPage,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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.1.1", ngImport: i0, type: NgFluxPaginationInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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 }] }] } });
@@ -524,10 +662,10 @@ class NgFluxPagination {
             init = true;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", 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.1.1", ngImport: i0, type: NgFluxPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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"] }] } });
@@ -559,10 +697,10 @@ class NgFluxSelectItems {
             return;
         this.select.emit(item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelectItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxSelectItems, isStandalone: true, selector: "ngf-select-items", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { select: "select" }, host: { properties: { "class.has-parent": "!!parent" } }, ngImport: i0, template: "<ul class=\"wrapper\">\n  @for (entry of data(); track $index) {\n    @let item = getItem(entry);\n\n    <li [class.disabled]=\"item.disabled\" [class.has-parent]=\"!!parent\" [class.active]=\"options().getSelected(entry)\">\n      <div class=\"text\" (click)=\"onSelect(entry)\">\n        <span>{{ item.label }}</span>\n      </div>\n\n      @if (item.children?.length) {\n        <ngf-select-items [data]=\"item.children\" [options]=\"options()\" [transform]=\"transform()\" (select)=\"onSelect($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block;position:relative;max-height:150px;overflow:hidden auto}:host.has-parent{max-height:auto;padding:0 0 0 10px}:host.has-parent:before{display:block;position:absolute;inset:0 auto 0 5px;background-color:#0003;content:\"\";width:1px}:host>.wrapper{display:block;list-style:none;font-size:.9rem;padding:0;margin:0}:host>.wrapper>li{display:block;cursor:pointer;--background-color: transparent;--color: inherit}:host>.wrapper>li>.text{padding:5px;background-color:var(--background-color)!important;color:var(--color)!important}:host>.wrapper>li>.text:hover{--background-color: rgba(var(--ngf-primary-rgb), .1)}:host>.wrapper>li.disabled{pointer-events:none;cursor:not-allowed;--color: #666}:host>.wrapper>li.active>.text{--background-color: var(--ngf-primary);--color: #FFF}:host>.wrapper>li.has-parent{position:relative}:host>.wrapper>li.has-parent:before{display:block;position:absolute;inset:50% 100% auto -4px;transform:translateY(-50%);background-color:#0003;content:\"\";height:1px}\n"], dependencies: [{ kind: "component", type: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxSelectItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxSelectItems, isStandalone: true, selector: "ngf-select-items", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { select: "select" }, host: { properties: { "class.has-parent": "!!parent" } }, ngImport: i0, template: "<ul class=\"wrapper\">\n  @for (entry of data(); track $index) {\n    @let item = getItem(entry);\n\n    <li [class.disabled]=\"item.disabled\" [class.has-parent]=\"!!parent\" [class.active]=\"options().getSelected(entry)\">\n      <div class=\"text\" (click)=\"onSelect(entry)\">\n        <span>{{ item.label }}</span>\n      </div>\n\n      @if (item.children?.length) {\n        <ngf-select-items [data]=\"item.children\" [options]=\"options()\" [transform]=\"transform()\" (select)=\"onSelect($event)\" />\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block;position:relative;max-height:150px;overflow:hidden auto}:host.has-parent{max-height:auto;padding:0 0 0 10px}:host.has-parent:before{display:block;position:absolute;inset:0 auto 0 5px;background-color:#0003;content:\"\";width:1px}:host>.wrapper{display:block;list-style:none;font-size:.9rem;padding:0;margin:0}:host>.wrapper>li{display:block;cursor:pointer;--background-color: transparent;--color: inherit}:host>.wrapper>li>.text{padding:5px;background-color:var(--background-color)!important;color:var(--color)!important}:host>.wrapper>li>.text:hover{--background-color: rgba(var(--ngf-primary-rgb), .1)}:host>.wrapper>li.disabled{pointer-events:none;cursor:not-allowed;--color: #666}:host>.wrapper>li.active>.text{--background-color: var(--ngf-primary);--color: #FFF}:host>.wrapper>li.has-parent{position:relative}:host>.wrapper>li.has-parent:before{display:block;position:absolute;inset:50% 100% auto -4px;transform:translateY(-50%);background-color:#0003;content:\"\";height:1px}\n"], dependencies: [{ kind: "component", type: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelectItems, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxSelectItems, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-select-items', imports: [], host: {
                         '[class.has-parent]': '!!parent',
@@ -720,10 +858,10 @@ class NgFluxSelect {
             return;
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxSelect, isStandalone: true, selector: "ngf-select", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.block": "block()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"header\" [class.single]=\"!multi()\" (click)=\"toggleOpen()\">\n    <div class=\"text\">{{ headerText() }}</div>\n    @if (!multi()) {\n      @let icons = ['ngf-icon', (open() ? 'arrow-drop-up' : 'arrow-drop-down')];\n      <i [className]=\"icons.join(' ')\"></i>\n    }\n  </div>\n\n  <div class=\"body\" [class.single]=\"!multi()\" [class.show]=\"open()\">\n    <div class=\"searchbox\">\n      <input type=\"text\" placeholder=\"Search Items\" [(ngModel)]=\"searchbox\">\n\n      @if (searchbox().length) {\n        <div class=\"clear\" (click)=\"searchbox.set('')\">\n          <i class=\"ngf-icon close\"></i>\n        </div>\n      }\n    </div>\n\n    <ngf-select-items [data]=\"search()\" [options]=\"options\" [transform]=\"transform()\" (select)=\"toggle($event)\" />\n  </div>\n\n  @if (multi()) {\n    <div class=\"footer\">\n      @if (!items().length) {\n        <div class=\"none\">No item selected</div>\n      } @else {\n        <div class=\"entries\">\n          @for (item of items(); track $index) {\n            <div class=\"entries-item\">\n              <div class=\"text\">{{ transform().getLabel(item) }}</div>\n              <div class=\"btn\" (click)=\"toggle(item)\">\n                <i class=\"ngf-icon close\"></i>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (multi()) {\n    <div class=\"clear-btn\" (click)=\"value.set(null)\">\n      <span>Clear All</span>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overlay\">\n      <div class=\"text\">{{ loadingText() }}</div>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block;border:var(--border)!important;border-radius:3px;width:200px;font-size:.8rem;--border: 1px solid rgba(0, 0, 0, .2);--height: 40px}:host.block{display:block;width:100%}:host>.wrapper{display:block;position:relative}:host>.wrapper .overlay{display:flex;position:absolute;flex-direction:column;justify-content:center;align-items:center;background-color:#ffffffe6;font-weight:600;color:#444;inset:0;z-index:10}:host>.wrapper .header{display:flex;flex-direction:row;align-items:center;border-bottom:var(--border)!important;height:var(--height)!important;padding:0 10px;font-weight:500;color:#333;gap:10px}:host>.wrapper .header.single{cursor:pointer;--border: none}:host>.wrapper .header>.text{flex:1 0 0;width:0px;overflow:hidden;text-overflow:ellipsis}:host>.wrapper .header .ngf-icon{font-size:1.8em}:host>.wrapper .body{display:block;background-color:#fff;font-size:1em}:host>.wrapper .body.single{display:none;position:absolute;inset:100% 0 auto;box-shadow:0 0 3px #000000b3;z-index:15}:host>.wrapper .body.single.show{display:block!important}:host>.wrapper .body>.searchbox{display:block;position:relative;border-bottom:var(--border)!important;padding:7px}:host>.wrapper .body>.searchbox>input{display:block;width:100%!important;border:var(--border)!important;background-color:#fff;font-size:.9rem;padding:5px}:host>.wrapper .body>.searchbox>input:focus{box-shadow:none!important;outline:none!important}:host>.wrapper .body>.searchbox>.clear{display:block;position:absolute;inset:50% 15px auto auto;transform:translateY(-50%);cursor:pointer}:host>.wrapper .body>.searchbox>.clear .ngf-icon{font-size:1em}:host>.wrapper .footer{display:block;border-top:var(--border)!important;font-size:.9em;padding:5px}:host>.wrapper .footer .none{text-align:center;color:#666}:host>.wrapper .footer .entries{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}:host>.wrapper .footer .entries-item{display:flex;flex-direction:row;align-items:center;padding:0 3px;border-radius:2px;background-color:var(--ngf-primary);color:#fff;gap:5px}:host>.wrapper .footer .entries-item .btn{cursor:pointer}:host>.wrapper .footer .entries-item .btn .ngf-icon{font-size:1em}:host>.wrapper>.clear-btn{display:block;border-top:var(--border)!important;font-size:.8em;padding:3px;text-align:center;background-color:#444;color:#fff;cursor:pointer}\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: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxSelect, isStandalone: true, selector: "ngf-select", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.block": "block()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"header\" [class.single]=\"!multi()\" (click)=\"toggleOpen()\">\n    <div class=\"text\">{{ headerText() }}</div>\n    @if (!multi()) {\n      @let icons = ['ngf-icon', (open() ? 'arrow-drop-up' : 'arrow-drop-down')];\n      <i [className]=\"icons.join(' ')\"></i>\n    }\n  </div>\n\n  <div class=\"body\" [class.single]=\"!multi()\" [class.show]=\"open()\">\n    <div class=\"searchbox\">\n      <input type=\"text\" placeholder=\"Search Items\" [(ngModel)]=\"searchbox\">\n\n      @if (searchbox().length) {\n        <div class=\"clear\" (click)=\"searchbox.set('')\">\n          <i class=\"ngf-icon close\"></i>\n        </div>\n      }\n    </div>\n\n    <ngf-select-items [data]=\"search()\" [options]=\"options\" [transform]=\"transform()\" (select)=\"toggle($event)\" />\n  </div>\n\n  @if (multi()) {\n    <div class=\"footer\">\n      @if (!items().length) {\n        <div class=\"none\">No item selected</div>\n      } @else {\n        <div class=\"entries\">\n          @for (item of items(); track $index) {\n            <div class=\"entries-item\">\n              <div class=\"text\">{{ transform().getLabel(item) }}</div>\n              <div class=\"btn\" (click)=\"toggle(item)\">\n                <i class=\"ngf-icon close\"></i>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (multi()) {\n    <div class=\"clear-btn\" (click)=\"value.set(null)\">\n      <span>Clear All</span>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overlay\">\n      <div class=\"text\">{{ loadingText() }}</div>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block;border:var(--border)!important;border-radius:3px;width:200px;font-size:.8rem;--border: 1px solid rgba(0, 0, 0, .2);--height: 40px}:host.block{display:block;width:100%}:host>.wrapper{display:block;position:relative}:host>.wrapper .overlay{display:flex;position:absolute;flex-direction:column;justify-content:center;align-items:center;background-color:#ffffffe6;font-weight:600;color:#444;inset:0;z-index:10}:host>.wrapper .header{display:flex;flex-direction:row;align-items:center;border-bottom:var(--border)!important;height:var(--height)!important;padding:0 10px;font-weight:500;color:#333;gap:10px}:host>.wrapper .header.single{cursor:pointer;--border: none}:host>.wrapper .header>.text{flex:1 0 0;width:0px;overflow:hidden;text-overflow:ellipsis}:host>.wrapper .header .ngf-icon{font-size:1.8em}:host>.wrapper .body{display:block;background-color:#fff;font-size:1em}:host>.wrapper .body.single{display:none;position:absolute;inset:100% 0 auto;box-shadow:0 0 3px #000000b3;z-index:15}:host>.wrapper .body.single.show{display:block!important}:host>.wrapper .body>.searchbox{display:block;position:relative;border-bottom:var(--border)!important;padding:7px}:host>.wrapper .body>.searchbox>input{display:block;width:100%!important;border:var(--border)!important;background-color:#fff;font-size:.9rem;padding:5px}:host>.wrapper .body>.searchbox>input:focus{box-shadow:none!important;outline:none!important}:host>.wrapper .body>.searchbox>.clear{display:block;position:absolute;inset:50% 15px auto auto;transform:translateY(-50%);cursor:pointer}:host>.wrapper .body>.searchbox>.clear .ngf-icon{font-size:1em}:host>.wrapper .footer{display:block;border-top:var(--border)!important;font-size:.9em;padding:5px}:host>.wrapper .footer .none{text-align:center;color:#666}:host>.wrapper .footer .entries{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}:host>.wrapper .footer .entries-item{display:flex;flex-direction:row;align-items:center;padding:0 3px;border-radius:2px;background-color:var(--ngf-primary);color:#fff;gap:5px}:host>.wrapper .footer .entries-item .btn{cursor:pointer}:host>.wrapper .footer .entries-item .btn .ngf-icon{font-size:1em}:host>.wrapper>.clear-btn{display:block;border-top:var(--border)!important;font-size:.8em;padding:3px;text-align:center;background-color:#444;color:#fff;cursor:pointer}\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: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxSelect, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-select', imports: [
                         FormsModule,
@@ -737,10 +875,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 class PinInputDirective {
     ref = inject(ElementRef);
     elem = this.ref.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PinInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: PinInputDirective, isStandalone: true, selector: "[pinInput]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PinInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: PinInputDirective, isStandalone: true, selector: "[pinInput]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PinInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PinInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pinInput]',
@@ -832,10 +970,10 @@ class NgFluxPinInput {
         const inputs = this.inputs();
         inputs.at(0)?.elem.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxPinInput, isStandalone: true, selector: "ngf-pin-input", inputs: { chars: { classPropertyName: "chars", publicName: "chars", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.block": "block()" } }, viewQueries: [{ propertyName: "inputs", predicate: PinInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  @for (val of values(); track $index) {\n    <input type=\"text\" pinInput [value]=\"val\" (keydown)=\"onKeyDown($event, $index)\" (paste)=\"onPaste($event, $index)\">\n  }\n</div>\n", styles: [":host{display:inline-block;width:200px;--padding-y: 10px;--border: 1px solid rgba(0, 0, 0, .2);--background-color: #FFF;--color: inherit;--gap: 5px}:host.block{display:block;width:100%}:host>.wrapper{display:flex;flex-direction:row;gap:var(--gap)!important}:host>.wrapper>input{display:block;flex:1 0 0;width:0px;text-align:center;font-size:1em;color:var(--color)!important;padding:var(--padding-y) 0px var(--padding-y) 0px!important;background-color:var(--background-color)!important;border:var(--border)!important}:host>.wrapper>input:focus{outline:var(--border);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: PinInputDirective, selector: "[pinInput]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxPinInput, isStandalone: true, selector: "ngf-pin-input", inputs: { chars: { classPropertyName: "chars", publicName: "chars", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.block": "block()" } }, viewQueries: [{ propertyName: "inputs", predicate: PinInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  @for (val of values(); track $index) {\n    <input type=\"text\" pinInput [value]=\"val\" (keydown)=\"onKeyDown($event, $index)\" (paste)=\"onPaste($event, $index)\">\n  }\n</div>\n", styles: [":host{display:inline-block;width:200px;--padding-y: 10px;--border: 1px solid rgba(0, 0, 0, .2);--background-color: #FFF;--color: inherit;--gap: 5px}:host.block{display:block;width:100%}:host>.wrapper{display:flex;flex-direction:row;gap:var(--gap)!important}:host>.wrapper>input{display:block;flex:1 0 0;width:0px;text-align:center;font-size:1em;color:var(--color)!important;padding:var(--padding-y) 0px var(--padding-y) 0px!important;background-color:var(--background-color)!important;border:var(--border)!important}:host>.wrapper>input:focus{outline:var(--border);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: PinInputDirective, selector: "[pinInput]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPinInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPinInput, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-pin-input', imports: [
                         PinInputDirective,
@@ -871,10 +1009,10 @@ class NgFluxForm {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxForm, isStandalone: true, selector: "form", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, host: { listeners: { "submit": "submit($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxForm, isStandalone: true, selector: "form", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, host: { listeners: { "submit": "submit($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxForm, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form',
@@ -915,10 +1053,10 @@ class NgFluxTabNavDirective {
             return;
         ctrl.activate(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabNavDirective, isStandalone: true, selector: "[ngfTabNav]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "activate($event)" }, properties: { "class.ngf-tab-nav": "true", "class.active": "active()" } }, hostDirectives: [{ directive: i1$1.RouterLink, inputs: ["routerLink", "link"] }, { directive: i1$1.RouterLinkActive }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxTabNavDirective, isStandalone: true, selector: "[ngfTabNav]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "activate($event)" }, properties: { "class.ngf-tab-nav": "true", "class.active": "active()" } }, hostDirectives: [{ directive: i1$1.RouterLink, inputs: ["routerLink", "link"] }, { directive: i1$1.RouterLinkActive }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabNavDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngfTabNav]',
@@ -936,10 +1074,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 
 class NgFluxTabContentDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxTabContentDirective, isStandalone: true, selector: "[ngfTabContent]", exportAs: ["content"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: NgFluxTabContentDirective, isStandalone: true, selector: "[ngfTabContent]", exportAs: ["content"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngfTabContent]',
@@ -964,10 +1102,10 @@ class NgFluxTab {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NgFluxTab, isStandalone: true, selector: "ngf-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: NgFluxTabContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template ngfTabContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgFluxTabContentDirective, selector: "[ngfTabContent]", exportAs: ["content"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: NgFluxTab, isStandalone: true, selector: "ngf-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: NgFluxTabContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template ngfTabContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgFluxTabContentDirective, selector: "[ngfTabContent]", exportAs: ["content"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTab, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-tab', imports: [
                         NgFluxTabContentDirective,
@@ -992,10 +1130,10 @@ class NgFluxTabNavbar {
             panel?.setContent(content?.templateRef);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabNavbar, isStandalone: true, selector: "ngf-tab-navbar", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabNavController], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-content select=\"[ngfTabNav]\"></ng-content>\n</div>\n", styles: [":host{display:block;border-bottom:1px solid #CCC;overflow:auto hidden}:host>.wrapper{display:flex;flex-direction:row}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxTabNavbar, isStandalone: true, selector: "ngf-tab-navbar", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabNavController], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-content select=\"[ngfTabNav]\"></ng-content>\n</div>\n", styles: [":host{display:block;border-bottom:1px solid #CCC;overflow:auto hidden}:host>.wrapper{display:flex;flex-direction:row}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-tab-navbar', providers: [TabNavController], imports: [], template: "<div class=\"wrapper\">\n  <ng-content select=\"[ngfTabNav]\"></ng-content>\n</div>\n", styles: [":host{display:block;border-bottom:1px solid #CCC;overflow:auto hidden}:host>.wrapper{display:flex;flex-direction:row}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }] } });
@@ -1008,10 +1146,10 @@ class NgFluxTabPanel {
     setContent(tpl) {
         this.content.set(tpl ?? null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabPanel, isStandalone: true, selector: "ngf-tab-panel", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n</div>\n", styles: [".wrapper{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxTabPanel, isStandalone: true, selector: "ngf-tab-panel", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n</div>\n", styles: [".wrapper{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabPanel, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-tab-panel', imports: [NgTemplateOutlet], template: "<div class=\"wrapper\">\n  <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n</div>\n", styles: [".wrapper{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -1021,10 +1159,10 @@ class NgFluxTabGroup {
     selectedIndex = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
     showTabs = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxTabGroup, isStandalone: true, selector: "ngf-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabGroupController], ngImport: i0, template: "<ngf-tab-navbar [panel]=\"panel\" [selectedIndex]=\"selectedIndex()\">\n  @for (tab of ctrl.tabs(); track $index) {\n    <div ngfTabNav [content]=\"tab.content()\">\n      <span>{{ tab.navLabel() }}</span>\n    </div>\n  }\n</ngf-tab-navbar>\n\n<ngf-tab-panel #panel></ngf-tab-panel>\n\n@if (showTabs) {\n  <ng-content select=\"ngf-tab\"></ng-content>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: NgFluxTabNavbar, selector: "ngf-tab-navbar", inputs: ["panel", "selectedIndex"] }, { kind: "directive", type: NgFluxTabNavDirective, selector: "[ngfTabNav]", inputs: ["content"] }, { kind: "component", type: NgFluxTabPanel, selector: "ngf-tab-panel", inputs: ["label"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxTabGroup, isStandalone: true, selector: "ngf-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabGroupController], ngImport: i0, template: "<ngf-tab-navbar [panel]=\"panel\" [selectedIndex]=\"selectedIndex()\">\n  @for (tab of ctrl.tabs(); track $index) {\n    <div ngfTabNav [content]=\"tab.content()\">\n      <span>{{ tab.navLabel() }}</span>\n    </div>\n  }\n</ngf-tab-navbar>\n\n<ngf-tab-panel #panel></ngf-tab-panel>\n\n@if (showTabs) {\n  <ng-content select=\"ngf-tab\"></ng-content>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: NgFluxTabNavbar, selector: "ngf-tab-navbar", inputs: ["panel", "selectedIndex"] }, { kind: "directive", type: NgFluxTabNavDirective, selector: "[ngfTabNav]", inputs: ["content"] }, { kind: "component", type: NgFluxTabPanel, selector: "ngf-tab-panel", inputs: ["label"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxTabGroup, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-tab-group', providers: [TabGroupController], imports: [
                         NgFluxTabNavbar,
@@ -1077,10 +1215,10 @@ class NgFluxFrameSideMenu {
             return map;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrameSideMenu, isStandalone: true, selector: "ngf-frame-side-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-parent": "hasParent()" } }, ngImport: i0, template: "@if (menu().length) {\n  <ul class=\"wrapper\">\n    @for (item of menu(); track $index) {\n      <li routerLinkActive=\"active\">\n        @if(item.isExternal) {\n          <a [href]=\"item.href ?? null\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n            <div class=\"icon\">\n              @if (item.icon) {<i [className]=\"item.icon\"></i>}\n            </div>\n\n            <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n            @if (item.children?.length) {\n              @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n              <div class=\"toggle\" (click)=\"toggle($event, item)\">\n                <i [className]=\"icons.join(' ')\"></i>\n              </div>\n            }\n          </a>\n        } @else {\n          <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n            <div class=\"icon\">\n              @if (item.icon) {<i [className]=\"item.icon\"></i>}\n            </div>\n\n            <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n            @if (item.children?.length) {\n              @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n              <div class=\"toggle\" (click)=\"toggle($event, item)\">\n                <i [className]=\"icons.join(' ')\"></i>\n              </div>\n            }\n          </a>\n        }\n\n        @if (item.children?.length && (isActive(item) || isExpanded(item))) {\n          <ngf-frame-side-menu [menu]=\"item.children\" />\n        }\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;font-size:var(--font-size)!important;--color: #333;--bg-color: transparent;--font-size: .9rem;--active-color: var(--ngf-primary);--active-bg-color: rgba(var(--ngf-primary-rgb), .1);--hover-color: var(--ngf-primary);--hover-bg-color: rgba(var(--ngf-primary-rgb), .1)}:host.has-parent{padding:0 0 0 20px}:host .wrapper{display:block;list-style:none;padding:0;margin:0}:host .wrapper>li{display:block;background-color:var(--bg-color)!important;padding:0;margin:0}:host .wrapper>li:hover{--bg-color: var(--hover-bg-color)}:host .wrapper>li.active{--color: var(--active-color);--bg-color: var(--active-bg-color)}:host .wrapper>li>a{display:flex;flex-direction:row;align-items:center;padding:10px 5px;text-decoration:none!important;cursor:pointer;width:100%;gap:5px}:host .wrapper>li>a,:host .wrapper>li>a:link{color:var(--color)!important}:host .wrapper>li>a>.icon{display:block;width:13px}:host .wrapper>li>a>.icon .ngf-icon{font-size:1em}:host .wrapper>li>a>.text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 0 0;width:0px}:host .wrapper>li>a>.toggle{display:block;cursor:pointer}:host .wrapper>li>a>.toggle .ngf-icon{font-size:1em}\n"], dependencies: [{ kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrameSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxFrameSideMenu, isStandalone: true, selector: "ngf-frame-side-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-parent": "hasParent()" } }, ngImport: i0, template: "@if (menu().length) {\n  <ul class=\"wrapper\">\n    @for (item of menu(); track $index) {\n      <li routerLinkActive=\"active\">\n        @if(item.isExternal) {\n          <a [href]=\"item.href ?? null\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n            <div class=\"icon\">\n              @if (item.icon) {<i [className]=\"item.icon\"></i>}\n            </div>\n\n            <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n            @if (item.children?.length) {\n              @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n              <div class=\"toggle\" (click)=\"toggle($event, item)\">\n                <i [className]=\"icons.join(' ')\"></i>\n              </div>\n            }\n          </a>\n        } @else {\n          <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n            <div class=\"icon\">\n              @if (item.icon) {<i [className]=\"item.icon\"></i>}\n            </div>\n\n            <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n            @if (item.children?.length) {\n              @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n              <div class=\"toggle\" (click)=\"toggle($event, item)\">\n                <i [className]=\"icons.join(' ')\"></i>\n              </div>\n            }\n          </a>\n        }\n\n        @if (item.children?.length && (isActive(item) || isExpanded(item))) {\n          <ngf-frame-side-menu [menu]=\"item.children\" />\n        }\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;font-size:var(--font-size)!important;--color: #333;--bg-color: transparent;--font-size: .9rem;--active-color: var(--ngf-primary);--active-bg-color: rgba(var(--ngf-primary-rgb), .1);--hover-color: var(--ngf-primary);--hover-bg-color: rgba(var(--ngf-primary-rgb), .1)}:host.has-parent{padding:0 0 0 20px}:host .wrapper{display:block;list-style:none;padding:0;margin:0}:host .wrapper>li{display:block;background-color:var(--bg-color)!important;padding:0;margin:0}:host .wrapper>li:hover{--bg-color: var(--hover-bg-color)}:host .wrapper>li.active{--color: var(--active-color);--bg-color: var(--active-bg-color)}:host .wrapper>li>a{display:flex;flex-direction:row;align-items:center;padding:10px 5px;text-decoration:none!important;cursor:pointer;width:100%;gap:5px}:host .wrapper>li>a,:host .wrapper>li>a:link{color:var(--color)!important}:host .wrapper>li>a>.icon{display:block;width:13px}:host .wrapper>li>a>.icon .ngf-icon{font-size:1em}:host .wrapper>li>a>.text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 0 0;width:0px}:host .wrapper>li>a>.toggle{display:block;cursor:pointer}:host .wrapper>li>a>.toggle .ngf-icon{font-size:1em}\n"], dependencies: [{ kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameSideMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrameSideMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-frame-side-menu', imports: [
                         RouterLink,
@@ -1103,10 +1241,10 @@ class NgFluxFrameHeaderMenu {
     onDocumentClick(e) {
         this.open.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameHeaderMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrameHeaderMenu, isStandalone: true, selector: "ngf-frame-header-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "@if (menu().length) {\n  <div class=\"toggle\" (click)=\"toggle($event)\">\n    @let icons = ['ngf-icon', open() ? 'close' : 'menu'];\n    <i [className]=\"icons.join(' ')\"></i>\n  </div>\n}\n\n<div class=\"wrapper\" [class.open]=\"open()\">\n  @if (menu().length) {\n    <ul class=\"menu\">\n      @for (item of menu(); track $index) {\n        <li>\n          @if (item.isExternal) {\n            <a [href]=\"item.href\" [attr.target]=\"target(item)\">\n              @if (item.icon) {\n                <div class=\"icon\">\n                  <i [className]=\"item.icon\"></i>\n                </div>\n              }\n\n              <div class=\"text\">{{ item.text }}</div>\n            </a>\n          } @else {\n            <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\">\n              @if (item.icon) {\n                <div class=\"icon\">\n                  <i [className]=\"item.icon\"></i>\n                </div>\n              }\n\n              <div class=\"text\">{{ item.text }}</div>\n            </a>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:end;container:main/inline-size scroll-state!important;align-self:stretch;--border: 1px solid #DDD}:host .toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;border-left:var(--border)!important;border-right:var(--border)!important;padding:0 10px;cursor:pointer}@container main (min-width: 576px){:host .toggle{display:none}}:host .wrapper{display:none;position:relative}:host .wrapper.open{display:block}@container main (min-width: 576px){:host .wrapper{display:block}}:host .wrapper>.menu{display:block;position:absolute;inset:100% 0 auto auto;box-shadow:0 3px 3px #00000080;background-color:#fff;list-style:none;height:auto;padding:0;margin:0}@container main (min-width: 576px){:host .wrapper>.menu{display:flex;flex-direction:row;align-items:center;justify-content:end;position:static;background-color:transparent;box-shadow:none;height:100%;inset:auto;gap:15px}}:host .wrapper>.menu>li{display:block;padding:0;margin:0}:host .wrapper>.menu>li>a{display:flex;flex-direction:row;align-items:center;text-decoration:none!important;padding:7px 20px;gap:5px}@container main (min-width: 576px){:host .wrapper>.menu>li>a{padding:0}}:host .wrapper>.menu>li>a>.icon{display:block}:host .wrapper>.menu>li>a>.icon>*{font-size:1.2em}:host .wrapper>.menu>li>a>.text{display:block;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrameHeaderMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxFrameHeaderMenu, isStandalone: true, selector: "ngf-frame-header-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "@if (menu().length) {\n  <div class=\"toggle\" (click)=\"toggle($event)\">\n    @let icons = ['ngf-icon', open() ? 'close' : 'menu'];\n    <i [className]=\"icons.join(' ')\"></i>\n  </div>\n}\n\n<div class=\"wrapper\" [class.open]=\"open()\">\n  @if (menu().length) {\n    <ul class=\"menu\">\n      @for (item of menu(); track $index) {\n        <li>\n          @if (item.isExternal) {\n            <a [href]=\"item.href\" [attr.target]=\"target(item)\">\n              @if (item.icon) {\n                <div class=\"icon\">\n                  <i [className]=\"item.icon\"></i>\n                </div>\n              }\n\n              <div class=\"text\">{{ item.text }}</div>\n            </a>\n          } @else {\n            <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\">\n              @if (item.icon) {\n                <div class=\"icon\">\n                  <i [className]=\"item.icon\"></i>\n                </div>\n              }\n\n              <div class=\"text\">{{ item.text }}</div>\n            </a>\n          }\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:end;container:main/inline-size scroll-state!important;align-self:stretch;--border: 1px solid #DDD}:host .toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;border-left:var(--border)!important;border-right:var(--border)!important;padding:0 10px;cursor:pointer}@container main (min-width: 576px){:host .toggle{display:none}}:host .wrapper{display:none;position:relative}:host .wrapper.open{display:block}@container main (min-width: 576px){:host .wrapper{display:block}}:host .wrapper>.menu{display:block;position:absolute;inset:100% 0 auto auto;box-shadow:0 3px 3px #00000080;background-color:#fff;list-style:none;height:auto;padding:0;margin:0}@container main (min-width: 576px){:host .wrapper>.menu{display:flex;flex-direction:row;align-items:center;justify-content:end;position:static;background-color:transparent;box-shadow:none;height:100%;inset:auto;gap:15px}}:host .wrapper>.menu>li{display:block;padding:0;margin:0}:host .wrapper>.menu>li>a{display:flex;flex-direction:row;align-items:center;text-decoration:none!important;padding:7px 20px;gap:5px}@container main (min-width: 576px){:host .wrapper>.menu>li>a{padding:0}}:host .wrapper>.menu>li>a>.icon{display:block}:host .wrapper>.menu>li>a>.icon>*{font-size:1.2em}:host .wrapper>.menu>li>a>.text{display:block;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameHeaderMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrameHeaderMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-frame-header-menu', imports: [RouterLink], host: {
                         '(document:click)': 'onDocumentClick($event)',
@@ -1172,10 +1310,10 @@ class NgFluxFrame {
             return;
         this.drawer.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrame, isStandalone: true, selector: "ngf-frame", inputs: { viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.viewport": "viewport()" } }, viewQueries: [{ propertyName: "leftRef", first: true, predicate: ["left"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame\">\n  <!-- BEGIN: Frame Header -->\n  <div class=\"frame-header\">\n    @if (image()) {\n      <img [src]=\"image()\" alt=\"\" class=\"image\">\n    } @else if (icon()) {\n      <div class=\"icon\">\n        <i [className]=\"icon()\"></i>\n      </div>\n    }\n\n    @if (title()) {<h1>{{ title() }}</h1>}\n\n    <ngf-frame-header-menu [menu]=\"headerMenu()\" />\n  </div>\n  <!-- END: Frame Header -->\n\n  <div class=\"frame-body\">\n    <!-- BEGIN: Left Sidebar -->\n    <div #left class=\"frame-body-left\" [class.drawer]=\"drawer()\">\n      <div class=\"btn-row\">\n        <div class=\"close-btn\" (click)=\"closeDrawer($event)\">\n          <i class=\"ngf-icon close\"></i>\n        </div>\n      </div>\n\n      <div class=\"search-form\">\n        <input type=\"text\" placeholder=\"Search menu\" [(ngModel)]=\"search\">\n\n        @if (search()) {\n          <div class=\"clear\" (click)=\"search.set('')\">\n            <i class=\"ngf-icon close\"></i>\n          </div>\n        }\n      </div>\n\n      <div class=\"menu-pane\">\n        <ngf-frame-side-menu [menu]=\"sideMenu()\" />\n      </div>\n    </div>\n    <!-- END: Left Sidebar -->\n\n    <div class=\"frame-body-overlay\" [class.drawer]=\"drawer()\"></div>\n\n    <!-- BEGIN: Right Sidebar -->\n    <div class=\"frame-body-right\" [class.drawer]=\"drawer()\">\n      <div class=\"frame-toolbar\">\n        <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n          <i class=\"ngf-icon menu\"></i>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <!--\n          <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n            <i class=\"ngf-icon close\"></i>\n          </div>\n        -->\n      </div>\n\n      <div class=\"frame-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <!-- END: Right Sidebar -->\n  </div>\n</div>\n", styles: [":host{display:block;border:var(--border)!important;font-size:1rem;color:#333;--border: 1px solid #CCC;--left-width: 100%}:host .frame{display:block;position:relative;container:frame/inline-size;overflow:hidden}:host .frame-header{display:flex;flex-direction:row;box-shadow:0 0 5px #00000080;background-color:#fff;align-items:center;position:relative;padding:0 20px;height:40px;z-index:20;gap:15px}:host .frame-header>.image{display:block;object-position:center;object-fit:cover;aspect-ratio:1;height:80%}:host .frame-header>.icon{display:block}:host .frame-header>.icon>*{font-size:1.5em}:host .frame-header>h1{display:block;font-size:1.1em;font-weight:600;color:inherit;margin:0}:host .frame-header>ngf-frame-header-menu{flex:1 0 0}:host .frame-body{display:flex;flex-direction:row;position:relative;min-height:100px}@container frame (min-width: 375px){:host .frame-body{--left-width: 200px}}@container frame (min-width: 992px){:host .frame-body{--left-width: 250px}}:host .frame-body-left{display:flex;flex-direction:column;position:relative;width:var(--left-width)!important;box-shadow:0 0 5px #00000080;margin-left:calc(var(--left-width) * -1);transition:all .3s ease-in-out;background-color:#fff;z-index:15}:host .frame-body-left.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-left{margin-left:0}}:host .frame-body-left .btn-row{display:flex;flex-direction:row;align-items:center;justify-content:end;border-bottom:var(--border)!important;padding:2px}@container frame (min-width: 375px){:host .frame-body-left .btn-row{display:none}}:host .frame-body-left .btn-row .close-btn{display:block;cursor:pointer;padding:0 3px}:host .frame-body-left .search-form{display:block;position:relative;border-bottom:var(--border)!important;padding:10px}:host .frame-body-left .search-form>input{display:block;background-color:#fff;border:var(--border)!important;border-radius:3px;padding:10px;width:100%}:host .frame-body-left .search-form>input:focus{outline:var(--border)!important;box-shadow:none}:host .frame-body-left .search-form>.clear{display:block;position:absolute;inset:50% 20px auto auto;transform:translateY(-50%);cursor:pointer;z-index:5}:host .frame-body-left .menu-pane{display:block;flex:1 1 auto;overflow:hidden auto}:host .frame-body-overlay{display:none;position:absolute;inset:0;background-color:#0003;z-index:10}:host .frame-body-overlay.drawer{display:block}@container frame (min-width: 768px){:host .frame-body-overlay{display:none}}:host .frame-body-right{display:flex;flex-direction:column;background-color:#eee;transition:all .3s ease-in-out;margin-right:0;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-right:calc(var(--left-width) * -1)}@container frame (min-width: 768px){:host .frame-body-right{margin-right:0}}:host .frame-toolbar{display:flex;flex-direction:row;border-bottom:var(--border)!important;background-color:#fff;height:30px}:host .frame-toolbar>.spacer{display:block;flex:1 0 0;width:0px}:host .frame-toolbar>.drawer-btn{display:block;position:relative;border-right:var(--border)!important;cursor:pointer;width:30px}@container frame (min-width: 768px){:host .frame-toolbar>.drawer-btn{display:none}}:host .frame-toolbar>.drawer-btn>.ngf-icon{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:1em}:host .frame-content{display:block;flex:1 1 auto;overflow:hidden auto}\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: NgFluxFrameHeaderMenu, selector: "ngf-frame-header-menu", inputs: ["menu"] }, { kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxFrame, isStandalone: true, selector: "ngf-frame", inputs: { viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.viewport": "viewport()" } }, viewQueries: [{ propertyName: "leftRef", first: true, predicate: ["left"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame\">\n  <!-- BEGIN: Frame Header -->\n  <div class=\"frame-header\">\n    @if (image()) {\n      <img [src]=\"image()\" alt=\"\" class=\"image\">\n    } @else if (icon()) {\n      <div class=\"icon\">\n        <i [className]=\"icon()\"></i>\n      </div>\n    }\n\n    @if (title()) {<h1>{{ title() }}</h1>}\n\n    <ngf-frame-header-menu [menu]=\"headerMenu()\" />\n  </div>\n  <!-- END: Frame Header -->\n\n  <div class=\"frame-body\">\n    <!-- BEGIN: Left Sidebar -->\n    <div #left class=\"frame-body-left\" [class.drawer]=\"drawer()\">\n      <div class=\"btn-row\">\n        <div class=\"close-btn\" (click)=\"closeDrawer($event)\">\n          <i class=\"ngf-icon close\"></i>\n        </div>\n      </div>\n\n      <div class=\"search-form\">\n        <input type=\"text\" placeholder=\"Search menu\" [(ngModel)]=\"search\">\n\n        @if (search()) {\n          <div class=\"clear\" (click)=\"search.set('')\">\n            <i class=\"ngf-icon close\"></i>\n          </div>\n        }\n      </div>\n\n      <div class=\"menu-pane\">\n        <ngf-frame-side-menu [menu]=\"sideMenu()\" />\n      </div>\n    </div>\n    <!-- END: Left Sidebar -->\n\n    <div class=\"frame-body-overlay\" [class.drawer]=\"drawer()\"></div>\n\n    <!-- BEGIN: Right Sidebar -->\n    <div class=\"frame-body-right\" [class.drawer]=\"drawer()\">\n      <div class=\"frame-toolbar\">\n        <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n          <i class=\"ngf-icon menu\"></i>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <!--\n          <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n            <i class=\"ngf-icon close\"></i>\n          </div>\n        -->\n      </div>\n\n      <div class=\"frame-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <!-- END: Right Sidebar -->\n  </div>\n</div>\n", styles: [":host{display:block;border:var(--border)!important;font-size:1rem;color:#333;--border: 1px solid #CCC;--left-width: 100%}:host .frame{display:block;position:relative;container:frame/inline-size;overflow:hidden}:host .frame-header{display:flex;flex-direction:row;box-shadow:0 0 5px #00000080;background-color:#fff;align-items:center;position:relative;padding:0 20px;height:40px;z-index:20;gap:15px}:host .frame-header>.image{display:block;object-position:center;object-fit:cover;aspect-ratio:1;height:80%}:host .frame-header>.icon{display:block}:host .frame-header>.icon>*{font-size:1.5em}:host .frame-header>h1{display:block;font-size:1.1em;font-weight:600;color:inherit;margin:0}:host .frame-header>ngf-frame-header-menu{flex:1 0 0}:host .frame-body{display:flex;flex-direction:row;position:relative;min-height:100px}@container frame (min-width: 375px){:host .frame-body{--left-width: 200px}}@container frame (min-width: 992px){:host .frame-body{--left-width: 250px}}:host .frame-body-left{display:flex;flex-direction:column;position:relative;width:var(--left-width)!important;box-shadow:0 0 5px #00000080;margin-left:calc(var(--left-width) * -1);transition:all .3s ease-in-out;background-color:#fff;z-index:15}:host .frame-body-left.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-left{margin-left:0}}:host .frame-body-left .btn-row{display:flex;flex-direction:row;align-items:center;justify-content:end;border-bottom:var(--border)!important;padding:2px}@container frame (min-width: 375px){:host .frame-body-left .btn-row{display:none}}:host .frame-body-left .btn-row .close-btn{display:block;cursor:pointer;padding:0 3px}:host .frame-body-left .search-form{display:block;position:relative;border-bottom:var(--border)!important;padding:10px}:host .frame-body-left .search-form>input{display:block;background-color:#fff;border:var(--border)!important;border-radius:3px;padding:10px;width:100%}:host .frame-body-left .search-form>input:focus{outline:var(--border)!important;box-shadow:none}:host .frame-body-left .search-form>.clear{display:block;position:absolute;inset:50% 20px auto auto;transform:translateY(-50%);cursor:pointer;z-index:5}:host .frame-body-left .menu-pane{display:block;flex:1 1 auto;overflow:hidden auto}:host .frame-body-overlay{display:none;position:absolute;inset:0;background-color:#0003;z-index:10}:host .frame-body-overlay.drawer{display:block}@container frame (min-width: 768px){:host .frame-body-overlay{display:none}}:host .frame-body-right{display:flex;flex-direction:column;background-color:#eee;transition:all .3s ease-in-out;margin-right:0;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-right:calc(var(--left-width) * -1)}@container frame (min-width: 768px){:host .frame-body-right{margin-right:0}}:host .frame-toolbar{display:flex;flex-direction:row;border-bottom:var(--border)!important;background-color:#fff;height:30px}:host .frame-toolbar>.spacer{display:block;flex:1 0 0;width:0px}:host .frame-toolbar>.drawer-btn{display:block;position:relative;border-right:var(--border)!important;cursor:pointer;width:30px}@container frame (min-width: 768px){:host .frame-toolbar>.drawer-btn{display:none}}:host .frame-toolbar>.drawer-btn>.ngf-icon{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:1em}:host .frame-content{display:block;flex:1 1 auto;overflow:hidden auto}\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: NgFluxFrameHeaderMenu, selector: "ngf-frame-header-menu", inputs: ["menu"] }, { kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFrame, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-frame', imports: [
                         FormsModule,
@@ -1213,10 +1351,10 @@ class NgFluxFormMessage {
         return errors.at(0)?.message ?? '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFormMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFormMessage, isStandalone: true, selector: "ngf-form-message", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "show()" } }, ngImport: i0, template: "@if (fieldState().pending()) {\n  <div class=\"pending\">{{ pending() }}</div>\n} @else if (errorMessage(); as msg) {\n  <div class=\"error\">{{ msg }}</div>\n}\n", styles: [":host{display:none;font-size:.8em}:host.show{display:block}:host>.pending{display:block;color:#666}:host>.error{display:block;color:red}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFormMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxFormMessage, isStandalone: true, selector: "ngf-form-message", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "show()" } }, ngImport: i0, template: "@if (fieldState().pending()) {\n  <div class=\"pending\">{{ pending() }}</div>\n} @else if (errorMessage(); as msg) {\n  <div class=\"error\">{{ msg }}</div>\n}\n", styles: [":host{display:none;font-size:.8em}:host.show{display:block}:host>.pending{display:block;color:#666}:host>.error{display:block;color:red}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFormMessage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxFormMessage, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-form-message', imports: [], host: {
                         '[class.show]': 'show()',
@@ -1254,10 +1392,10 @@ class NgFluxLoadingInternal {
             router.events.pipe(navError).subscribe(nav => root.stop());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1271,10 +1409,10 @@ class NgFluxLoading {
     ...(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.1.1", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxLoading, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1342,10 +1480,10 @@ class NgFluxDialogComponent {
         const ref = this.componentRef.location;
         ref.nativeElement.classList.add('close');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", 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: "22.1.1", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [], host: {
                         '(click)': 'onBackdropClick($event)',
@@ -1471,10 +1609,10 @@ class NgFluxAlertDialog {
             dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-alert', imports: [
                         NgFluxButton,
@@ -1509,10 +1647,10 @@ class NgFluxConfirmDialog {
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-confirm', imports: [
                         NgFluxButton,
@@ -1553,10 +1691,10 @@ class NgFluxPromptDialog {
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-prompt', imports: [
                         FormsModule,
@@ -1609,7 +1747,7 @@ class NgFluxDialog {
             closeOnEsc: false,
             data
         });
-        return dialog.closed;
+        return dialog.closed.pipe(map(resp => resp ?? false));
     }
     prompt(data) {
         const dialog = this.open(NgFluxPromptDialog, {
@@ -1620,14 +1758,76 @@ class NgFluxDialog {
         });
         return dialog.closed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+class NgFluxToast {
+    config = inject(NGF_CONFIG);
+    ctrl = inject(NgFluxToastController);
+    show(options) {
+        const config = this.config.toast;
+        options.placement ??= config?.placement ?? 'topRight';
+        options.showCloseButton ??= config?.showCloseButton ?? true;
+        options.timeout ??= Math.max(config?.timeout ?? 5000, 0);
+        options.theme ??= config?.theme ?? 'info';
+        this.ctrl.add(options);
+    }
+    showDefault(options) {
+        const opts = { ...options, theme: 'default' };
+        return this.show(opts);
+    }
+    showPrimary(options) {
+        const opts = { ...options, theme: 'primary' };
+        return this.show(opts);
+    }
+    showSecondary(options) {
+        const opts = { ...options, theme: 'secondary' };
+        return this.show(opts);
+    }
+    showError(options) {
+        const opts = { ...options, theme: 'error' };
+        return this.show(opts);
+    }
+    showDanger(options) {
+        const opts = { ...options, theme: 'danger' };
+        return this.show(opts);
+    }
+    showSuccess(options) {
+        const opts = { ...options, theme: 'success' };
+        return this.show(opts);
+    }
+    showWarning(options) {
+        const opts = { ...options, theme: 'warning' };
+        return this.show(opts);
+    }
+    showInfo(options) {
+        const opts = { ...options, theme: 'info' };
+        return this.show(opts);
+    }
+    showLight(options) {
+        const opts = { ...options, theme: 'light' };
+        return this.show(opts);
+    }
+    showDark(options) {
+        const opts = { ...options, theme: 'dark' };
+        return this.show(opts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastInstance {
+}
+
 const provideNgFlux = (config) => {
     config ??= {};
     return makeEnvironmentProviders([
@@ -1638,6 +1838,9 @@ const provideNgFlux = (config) => {
         NgFluxLoading,
         NgFluxLoadingInternal,
         MetaInternal,
+        NgFluxToast,
+        NgFluxToastController,
+        NgFluxToastInitializer,
         provideAppInitializer(() => {
             const meta = inject(MetaInternal);
             meta.initialize();
@@ -1651,6 +1854,10 @@ const provideNgFlux = (config) => {
             loading.initialize();
             loading.showOnRouteNavigation();
         }),
+        provideAppInitializer(() => {
+            const toast = inject(NgFluxToastInitializer);
+            toast.initialize();
+        }),
     ]);
 };
 
@@ -1710,5 +1917,5 @@ var NgFlux;
  * Generated bundle index. Do not edit.
  */
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, NgFluxThemeDirective, NgFluxToast, ToastInstance, provideNgFlux };
 //# sourceMappingURL=ngflux-ngflux.mjs.map