@ngflux/ngflux 2.1.0 → 2.2.0

package/fesm2022/ngflux-ngflux.mjs

@@ -1,15 +1,34 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, computed, HostBinding, Component, ChangeDetectionStrategy, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, output, model, untracked, HostListener, makeEnvironmentProviders, provideAppInitializer } from '@angular/core';
-import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
-import { filter, AsyncSubject } from 'rxjs';
-import { NgClass } from '@angular/common';
+import { InjectionToken, input, Component, inject, ElementRef, computed, HostBinding, ChangeDetectionStrategy, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, linkedSignal, output, model, untracked, booleanAttribute, Directive, viewChildren, TemplateRef, debounced, HostListener, makeEnvironmentProviders, provideAppInitializer } 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 } from 'rxjs';
+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';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 const NGF_CONFIG = new InjectionToken('ngf-config');
+// END: Pagination
 
 const NGF_DIALOG_DATA = new InjectionToken('ngf-dialog-data');
 
+class NgFluxActions {
+    justify = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    wrap = input(true, /* @ts-ignore */
+    ...(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.0.6", ngImport: i0, type: NgFluxActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", 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 }] }] } });
+
 class NgFluxButton {
     ref = inject(ElementRef);
     icon = input(/* @ts-ignore */
@@ -40,10 +59,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.0.0", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxButton, isStandalone: true, selector: "ngf-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.bindClass", "class.block": "this.isBlock", "class.disabled": "this.isDisabled", "tabIndex": "this.tabIndex" } }, ngImport: i0, template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n  <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n    @if (icon(); as ico) {\n      <div class=\"icon\">\n        <i [ngClass]=\"ico\"></i>\n      </div>\n    }\n\n    <div class=\"content\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.0", ngImport: i0, type: NgFluxButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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: [{
@@ -61,30 +80,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
             }] } });
 
 class NgFluxDialogBodyComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxDialogBodyComponent, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgFluxDialogBodyComponent, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-body', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] }]
         }] });
 
 class NgFluxDialogFooterComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxDialogFooterComponent, isStandalone: true, selector: "ngf-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgFluxDialogFooterComponent, isStandalone: true, selector: "ngf-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-footer', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"] }]
         }] });
 
 class NgFluxDialogRootComponent {
     injector = inject(Injector);
-    viewContainer = viewChild.required('container', { read: ViewContainerRef });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxDialogRootComponent, isStandalone: true, selector: "ngf-dialog-root", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] });
+    viewContainer = viewChild.required('container', { ...(ngDevMode ? { debugName: "viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: NgFluxDialogRootComponent, isStandalone: true, selector: "ngf-dialog-root", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 }] }] } });
@@ -168,10 +187,10 @@ class NgFluxDialogInternal {
     clear = () => {
         this.list.set([]);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -181,24 +200,183 @@ const NGF_DIALOG_CONFIG = new InjectionToken('ngf-dialog-config');
 const NGF_DIALOG_INSTANCE = new InjectionToken('ngf-dialog-instance');
 const NGF_DIALOG_CLOSE_FN = new InjectionToken('ngf-dialog-close-fn');
 
+class RouteTitleStrategy extends TitleStrategy {
+    config = inject(NGF_CONFIG);
+    service = inject(Title);
+    getChildSnapshot(snapshot) {
+        if (snapshot.firstChild)
+            return this.getChildSnapshot(snapshot.firstChild);
+        return snapshot;
+    }
+    getParentTitle(snapshot) {
+        if (snapshot.parent) {
+            const title = snapshot.parent.title;
+            if (title)
+                return title;
+            return this.getParentTitle(snapshot.parent);
+        }
+        return undefined;
+    }
+    updateTitle(snapshot) {
+        const { config, service } = this;
+        const entries = [];
+        if (config.title?.prefix)
+            entries.push(config.title.prefix);
+        const child = this.getChildSnapshot(snapshot.root);
+        const routeConfig = (child.routeConfig ?? {});
+        let routeTitle = routeConfig.getTitle?.(child.data) ?? this.buildTitle(snapshot);
+        if (routeConfig.addParentTitle) {
+            const parentTitle = this.getParentTitle(child);
+            if (parentTitle) {
+                const separator = routeConfig.parentTitleSeparator ?? ' - ';
+                if (routeTitle) {
+                    routeTitle += separator + parentTitle;
+                }
+                else {
+                    routeTitle = parentTitle;
+                }
+            }
+        }
+        if (routeTitle)
+            entries.push(routeTitle);
+        if (config.title?.suffix)
+            entries.push(config.title.suffix);
+        const separator = config.title?.separator ?? ' | ';
+        const title = entries.join(separator);
+        if (title)
+            service.setTitle(title);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouteTitleStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouteTitleStrategy, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouteTitleStrategy, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MetaInternal {
+    meta = inject(Meta);
+    router = inject(Router);
+    snapshot = this.router.events.pipe(filter(e => e instanceof ActivationEnd), filter(e => !e.snapshot.firstChild), map(e => e.snapshot));
+    initialize() {
+        const { meta, snapshot } = this;
+        const initialDescription = meta.getTag('name="description"')?.content;
+        const initialKeywords = meta.getTag('name="keywords"')?.content;
+        snapshot.subscribe(snap => {
+            const config = (snap.routeConfig ?? {});
+            const description = config.getDescription?.(snap.data) ?? config.description ?? initialDescription;
+            if (description)
+                meta.updateTag({ name: 'description', content: description });
+            let keywords = config.getKeywords?.(snap.data) ?? config.keywords ?? initialKeywords;
+            if (Array.isArray(keywords))
+                keywords = keywords.join(', ');
+            if (keywords)
+                meta.updateTag({ name: 'keywords', content: keywords });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MetaInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MetaInternal, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MetaInternal, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TabNavController {
+    map = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    navs = computed(() => Array.from(this.map().keys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navs" }] : /* istanbul ignore next */ []));
+    selected = linkedSignal({ ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), source: () => ({
+            navs: this.navs(),
+            selectedIndex: this.selectedIndex(),
+        }),
+        computation: (src, prev) => {
+            const { navs, selectedIndex } = src;
+            const value = prev?.value ?? null;
+            let index = Math.min(Math.max(selectedIndex, 0), navs.length - 1);
+            return navs.find(v => v === value) ?? navs.at(index) ?? null;
+        } });
+    selectedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    active = this.selected.asReadonly();
+    activeContent = computed(() => this.active()?.navContent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
+    activate(nav) {
+        const map = this.map();
+        if (!map.has(nav))
+            return;
+        this.selected.set(nav);
+    }
+    add(nav) {
+        this.map.update(v => {
+            const map = new Map(v);
+            map.set(nav, true);
+            return map;
+        });
+    }
+    remove(nav) {
+        this.map.update(v => {
+            if (!v.has(nav))
+                return v;
+            const map = new Map(v);
+            map.delete(nav);
+            return map;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabNavController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabNavController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabNavController, decorators: [{
+            type: Injectable
+        }] });
+
+class TabGroupController {
+    map = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => Array.from(this.map().keys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    add(nav) {
+        this.map.update(v => {
+            const map = new Map(v);
+            map.set(nav, true);
+            return map;
+        });
+    }
+    remove(nav) {
+        this.map.update(v => {
+            if (!v.has(nav))
+                return v;
+            const map = new Map(v);
+            map.delete(nav);
+            return map;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabGroupController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabGroupController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabGroupController, decorators: [{
+            type: Injectable
+        }] });
+
 class NgFluxDialogHeaderComponent {
     config = inject(NGF_DIALOG_CONFIG);
     dialogRef = inject(NgFluxDialogRef);
     icon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxDialogHeaderComponent, isStandalone: true, selector: "ngf-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgFluxDialogHeaderComponent, isStandalone: true, selector: "ngf-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-header', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass], template: "@if (icon(); as ico) {\n  <div class=\"left\">\n    <i [ngClass]=\"ico\"></i>\n  </div>\n}\n\n<div class=\"middle\">\n  <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n  <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 class NgFluxLoadingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: NgFluxLoadingComponent, isStandalone: true, selector: "ngf-loading", ngImport: i0, template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgFluxLoadingComponent, isStandalone: true, selector: "ngf-loading", ngImport: i0, template: "<svg viewBox=\"25 25 50 50\">\n  <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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"] }]
         }] });
@@ -213,7 +391,7 @@ class NgFluxLoadingRootComponent {
     isLoading = computed(() => this.count() > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     get showLoading() { return this.isLoading(); }
-    viewContainer = viewChild.required('container', { read: ViewContainerRef });
+    viewContainer = viewChild.required('container', { ...(ngDevMode ? { debugName: "viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     componentRef;
     constructor() {
         const { config, injector } = this;
@@ -244,10 +422,10 @@ class NgFluxLoadingRootComponent {
         entries.pop();
         return entries;
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxLoadingRootComponent, isStandalone: true, selector: "ngf-loading-root", host: { properties: { "class.show": "this.showLoading" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: NgFluxLoadingRootComponent, isStandalone: true, selector: "ngf-loading-root", host: { properties: { "class.show": "this.showLoading" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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: [{
@@ -295,10 +473,10 @@ class NgFluxPaginationInfo {
             limit: data.perPage,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxPaginationInfo, isStandalone: true, selector: "ngf-pagination-info", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback", limit: "limitChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitOptions(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgFluxPaginationInfo, isStandalone: true, selector: "ngf-pagination-info", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback", limit: "limitChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"block limit\">\n    <div>Per page</div>\n    <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n      @for (entry of limitOptions(); track $index) {\n        <option [value]=\"entry\">{{ entry }}</option>\n      }\n    </select>\n  </div>\n\n  <div class=\"block info\">\n    <div>{{ info() }}</div>\n  </div>\n\n  <div class=\"block nav\">\n    <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n      <i class=\"ngf-icon chevron-left\"></i>\n    </button>\n\n    <button (click)=\"next()\" [disabled]=\"disableNext()\">\n      <i class=\"ngf-icon chevron-right\"></i>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPaginationInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 }] }] } });
@@ -345,14 +523,617 @@ class NgFluxPagination {
             init = true;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: NgFluxPagination, isStandalone: true, selector: "ngf-pagination", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limit: "limitChange", callback: "callback" }, ngImport: i0, template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"], dependencies: [{ kind: "component", type: NgFluxPaginationInfo, selector: "ngf-pagination-info", inputs: ["data", "limit", "limitOptions"], outputs: ["callback", "limitChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: NgFluxPagination, isStandalone: true, selector: "ngf-pagination", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limit: "limitChange", callback: "callback" }, ngImport: i0, template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"], dependencies: [{ kind: "component", type: NgFluxPaginationInfo, selector: "ngf-pagination-info", inputs: ["data", "limit", "limitOptions"], outputs: ["callback", "limitChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPagination, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-pagination', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgFluxPaginationInfo], template: "<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n  [data]=\"value()\"\n  [(limit)]=\"limit\"\n  [limitOptions]=\"limitOptions()\"\n  (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }, { type: i0.Output, args: ["limitChange"] }], limitOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitOptions", required: false }] }], callback: [{ type: i0.Output, args: ["callback"] }] } });
 
+class NgFluxSelectItems {
+    parent = inject(NgFluxSelectItems, {
+        optional: true,
+        skipSelf: true,
+    });
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    transform = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    select = output();
+    getItem(item) {
+        const transform = this.transform();
+        return {
+            label: transform.getLabel(item),
+            value: transform.getValue(item),
+            children: transform.getChildren?.(item) ?? [],
+            disabled: transform.isDisabled?.(item) ?? false,
+        };
+    }
+    onSelect(item) {
+        const info = this.getItem(item);
+        if (info.disabled)
+            return;
+        this.select.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxSelectItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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:200px;overflow:hidden auto}:host.has-parent{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.0.6", ngImport: i0, type: NgFluxSelectItems, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-select-items', imports: [], host: {
+                        '[class.has-parent]': '!!parent',
+                    }, 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:200px;overflow:hidden auto}:host.has-parent{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"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: true }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
+class NgFluxSelect {
+    ref = inject(ElementRef);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    transform = input({
+        getLabel: item => item.label ?? '',
+        getValue: item => item.value,
+        getChildren: item => item.children ?? [],
+        setChildren: (item, children) => item.children = children,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    mapper = computed(() => {
+        const data = this.data();
+        const value = new Map();
+        this.doFlatMap(value, data);
+        return value;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapper" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    vmap = computed(() => {
+        let value = this.value() ?? [];
+        value = Array.isArray(value) ? value : [value];
+        const mapper = this.mapper();
+        const result = new Map();
+        for (let val of value) {
+            const item = mapper.get(val);
+            if (!item)
+                continue;
+            result.set(val, item);
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vmap" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    searchbox = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchbox" }] : /* istanbul ignore next */ []));
+    search = computed(() => {
+        const data = this.data();
+        const text = this.searchbox().toLowerCase();
+        if (!text)
+            return data;
+        return this.doSearch(text, data);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    headerText = computed(() => {
+        const multi = this.multi();
+        const placeholder = this.placeholder() ?? 'Select Item' + (multi ? 's' : '');
+        const items = Array.from(this.vmap().values());
+        if (!items.length)
+            return placeholder;
+        const transform = this.transform();
+        const first = items.splice(0, 1).at(0);
+        let text = transform.getLabel(first);
+        if (items.length)
+            text += ` + ${items.length.toLocaleString()} more`;
+        return text;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerText" }] : /* istanbul ignore next */ []));
+    doFlatMap(map, data) {
+        const transform = this.transform();
+        for (let item of data) {
+            const key = transform.getValue(item);
+            map.set(key, item);
+            const children = transform.getChildren?.(item) ?? [];
+            this.doFlatMap(map, children);
+        }
+    }
+    doSearch(text, data) {
+        const transform = this.transform();
+        const result = [];
+        for (let entry of data) {
+            const item = Object.assign({}, entry);
+            let children = transform.getChildren?.(item) ?? [];
+            children = this.doSearch(text, children);
+            transform.setChildren?.(item, children);
+            if (children.length) {
+                result.push(item);
+                continue;
+            }
+            const label = transform.getLabel(item).toLowerCase();
+            if (label.includes(text))
+                result.push(item);
+        }
+        return result;
+    }
+    toggleOpen() {
+        if (this.multi())
+            return;
+        this.open.update(v => !v);
+    }
+    toggle(item) {
+        const multi = this.multi();
+        const transform = this.transform();
+        const vmap = new Map(this.vmap());
+        const key = transform.getValue(item);
+        if (!key)
+            return;
+        if (!vmap.has(key)) {
+            if (!multi)
+                vmap.clear();
+            vmap.set(key, item);
+        }
+        else {
+            vmap.delete(key);
+        }
+        const values = Array.from(vmap.keys());
+        if (values.length) {
+            this.value.set(multi ? values : values[0]);
+        }
+        else {
+            this.value.set(null);
+        }
+        this.open.set(false);
+    }
+    options = {
+        getSelected: item => {
+            const transform = this.transform();
+            const key = transform.getValue(item);
+            if (!key)
+                return false;
+            return this.vmap().has(key);
+        },
+    };
+    onDocumentClick(e) {
+        if (this.multi())
+            return;
+        const { ref: { nativeElement: elem } } = this;
+        const target = e.target;
+        if (elem.contains(target))
+            return;
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, 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 (!vmap().size) {\n        <div class=\"none\">No item selected</div>\n      } @else {\n        <div class=\"entries\">\n          @for (item of vmap() | keyvalue; track $index) {\n            <div class=\"entries-item\">\n              <div class=\"text\">{{ transform().getLabel(item.value) }}</div>\n              <div class=\"btn\" (click)=\"toggle(item.value)\">\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</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 .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:5}: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"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-select', imports: [
+                        FormsModule,
+                        NgFluxSelectItems,
+                        KeyValuePipe,
+                    ], host: {
+                        '[class.block]': 'block()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    }, 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 (!vmap().size) {\n        <div class=\"none\">No item selected</div>\n      } @else {\n        <div class=\"entries\">\n          @for (item of vmap() | keyvalue; track $index) {\n            <div class=\"entries-item\">\n              <div class=\"text\">{{ transform().getLabel(item.value) }}</div>\n              <div class=\"btn\" (click)=\"toggle(item.value)\">\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</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 .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:5}: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"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class PinInputDirective {
+    ref = inject(ElementRef);
+    elem = this.ref.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PinInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PinInputDirective, isStandalone: true, selector: "[pinInput]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PinInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pinInput]',
+                }]
+        }] });
+
+class NgFluxPinInput {
+    chars = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chars" }] : /* istanbul ignore next */ []));
+    block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    values = computed(() => {
+        const chars = this.chars(), value = this.value() ?? '';
+        return Array.from({ length: chars }, (_, i) => value.charAt(i));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    inputs = viewChildren(PinInputDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
+    onKeyDown(e, index) {
+        const target = e.target;
+        const values = Array.from(this.values());
+        switch (e.key) {
+            case 'Backspace':
+                {
+                    e.preventDefault();
+                    values[index] = '';
+                    this.setFocus(index - 1);
+                }
+                break;
+            case 'Delete':
+                {
+                    e.preventDefault();
+                    values[index] = '';
+                    this.setFocus(index);
+                }
+                break;
+            default: {
+                if (e.key.length !== 1)
+                    return;
+                if (e.ctrlKey || e.altKey || e.metaKey)
+                    return;
+                e.preventDefault();
+                const code = e.key.charCodeAt(0);
+                if (!this.allowed(code))
+                    return;
+                values[index] = e.key;
+                this.setFocus(index + 1);
+            }
+        }
+        this.value.set(values.join(''));
+    }
+    onPaste(e, index) {
+        e.preventDefault();
+        const values = Array.from(this.values());
+        const data = e.clipboardData?.getData('text/plain');
+        if (!data)
+            return;
+        let cursor = 0, lastIndex = index;
+        for (let i = index; i < values.length; i++) {
+            while (cursor < data.length) {
+                const ptr = cursor++;
+                let code = data.charCodeAt(ptr);
+                if (!this.allowed(code))
+                    continue;
+                let char = data.charAt(ptr);
+                values[i] = char;
+                break;
+            }
+            if (cursor >= data.length)
+                break;
+            lastIndex++;
+        }
+        this.value.set(values.join(''));
+        this.setFocus(lastIndex + 1);
+    }
+    setFocus(index) {
+        const maxIndex = this.chars() - 1;
+        index = Math.min(maxIndex, Math.max(index, 0));
+        const input = this.inputs().at(index);
+        input?.elem.focus();
+        input?.elem.select();
+    }
+    allowed = (code) => ((code > 47 && code < 58) || // Numeric (0-9)
+        (code > 64 && code < 91) || // Uppercase (A-Z)
+        (code > 96 && code < 123) // Lowercase (a-z)
+    );
+    focus(options) {
+        const inputs = this.inputs();
+        inputs.at(0)?.elem.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.6", ngImport: i0, type: NgFluxPinInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-pin-input', imports: [
+                        PinInputDirective,
+                    ], host: {
+                        '[class.block]': 'block()',
+                    }, 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"] }]
+        }], propDecorators: { chars: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PinInputDirective), { isSignal: true }] }] } });
+
+class NgFluxTabNavDirective {
+    routerLink = inject(RouterLink);
+    routerLinkActive = inject(RouterLinkActive);
+    ctrl = inject(TabNavController);
+    content = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
+    navContent = computed(() => this.content(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navContent" }] : /* istanbul ignore next */ []));
+    routeActive = toSignal(this.routerLinkActive.isActiveChange, { initialValue: false });
+    active = computed(() => this.ctrl.active() === this, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const { ctrl } = this;
+        effect((onCleanup) => {
+            ctrl.add(this);
+            onCleanup(() => {
+                ctrl.remove(this);
+            });
+        });
+        effect(() => {
+            const active = this.routeActive();
+            if (active)
+                ctrl.activate(this);
+        });
+    }
+    activate(e) {
+        const { ctrl, routerLink, routeActive } = this;
+        if (routerLink.href !== null && !routeActive())
+            return;
+        ctrl.activate(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", ngImport: i0, type: NgFluxTabNavDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngfTabNav]',
+                    hostDirectives: [
+                        { directive: RouterLink, inputs: ['routerLink: link'] },
+                        RouterLinkActive,
+                    ],
+                    host: {
+                        '[class.ngf-tab-nav]': 'true',
+                        '[class.active]': 'active()',
+                        '(click)': 'activate($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
+
+class NgFluxTabContentDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgFluxTabContentDirective, isStandalone: true, selector: "[ngfTabContent]", exportAs: ["content"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngfTabContent]',
+                    exportAs: 'content',
+                }]
+        }] });
+
+class NgFluxTab {
+    ctrl = inject(TabGroupController);
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    navLabel = computed(() => this.label(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+    content = viewChild.required(NgFluxTabContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const { ctrl } = this;
+        effect(onCleanup => {
+            ctrl.add(this);
+            onCleanup(() => {
+                ctrl.remove(this);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", 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.0.6", ngImport: i0, type: NgFluxTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-tab', imports: [
+                        NgFluxTabContentDirective,
+                    ], template: "<ng-template ngfTabContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgFluxTabContentDirective), { isSignal: true }] }] } });
+
+class NgFluxTabNavbar {
+    ctrl = inject(TabNavController);
+    panel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panel" }] : /* istanbul ignore next */ []));
+    selectedIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const { ctrl } = this;
+        effect(() => {
+            const index = this.selectedIndex();
+            ctrl.selectedIndex.set(index);
+        });
+        effect(() => {
+            const panel = this.panel();
+            const content = ctrl.activeContent();
+            panel?.setContent(content?.templateRef);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", 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 }] }] } });
+
+class NgFluxTabPanel {
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    content = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    setContent(tpl) {
+        this.content.set(tpl ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", 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.0.6", 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 }] }] } });
+
+class NgFluxTabGroup {
+    ctrl = inject(TabGroupController);
+    selectedIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    showTabs = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.6", ngImport: i0, type: NgFluxTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-tab-group', providers: [TabGroupController], imports: [
+                        NgFluxTabNavbar,
+                        NgFluxTabNavDirective,
+                        NgFluxTabPanel
+                    ], 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"] }]
+        }], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }] } });
+
+class NgFluxFrameSideMenu {
+    router = inject(Router, { optional: true });
+    parent = inject(NgFluxFrameSideMenu, {
+        optional: true,
+        skipSelf: true,
+    });
+    menu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    expanded = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    map = computed(() => {
+        const { router } = this;
+        const menu = this.menu();
+        const map = new Map();
+        for (let item of menu) {
+            const active = (router && item.href && !item.isExternal) ? isActive(item.href, router) : () => false;
+            map.set(item, active);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    hasParent = computed(() => !!this.parent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasParent" }] : /* istanbul ignore next */ []));
+    target = (item) => item.targetBlank ? '_blank' : null;
+    isExpanded(item) {
+        return this.expanded().has(item);
+    }
+    isActive(item) {
+        return this.map().get(item)?.() ?? false;
+    }
+    toggle(e, item) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.expanded.update(v => {
+            const map = new Map(v);
+            if (!map.has(item)) {
+                map.set(item, true);
+            }
+            else {
+                map.delete(item);
+            }
+            return map;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxFrameSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: .8rem;--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: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.0.6", ngImport: i0, type: NgFluxFrameSideMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-frame-side-menu', imports: [
+                        RouterLink,
+                        RouterLinkActive,
+                    ], host: {
+                        '[class.has-parent]': 'hasParent()',
+                    }, 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: .8rem;--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: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"] }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }] } });
+
+class NgFluxFrameHeaderMenu {
+    menu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    target = (item) => item.targetBlank ? '_blank' : null;
+    toggle(e) {
+        e.stopPropagation();
+        this.open.update(v => !v);
+    }
+    onDocumentClick(e) {
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxFrameHeaderMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: "<div class=\"toggle\" (click)=\"toggle($event)\">\n  @let icons = ['ngf-icon', open() ? 'close' : 'menu'];\n  <i [className]=\"icons.join(' ')\"></i>\n</div>\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.0.6", ngImport: i0, type: NgFluxFrameHeaderMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-frame-header-menu', imports: [RouterLink], host: {
+                        '(document:click)': 'onDocumentClick($event)',
+                    }, template: "<div class=\"toggle\" (click)=\"toggle($event)\">\n  @let icons = ['ngf-icon', open() ? 'close' : 'menu'];\n  <i [className]=\"icons.join(' ')\"></i>\n</div>\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"] }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }] } });
+
+class NgFluxFrame {
+    leftRef = viewChild.required('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftRef" }] : /* istanbul ignore next */ []));
+    viewport = input(false, { ...(ngDevMode ? { debugName: "viewport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    options = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    title = computed(() => this.options().title?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    icon = computed(() => this.options().icon?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    image = computed(() => this.options().image?.() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    toolbarItems = computed(() => this.options().toolbarItems?.() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarItems" }] : /* istanbul ignore next */ []));
+    headerMenu = computed(() => this.options().headerMenu?.() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerMenu" }] : /* istanbul ignore next */ []));
+    drawer = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawer" }] : /* istanbul ignore next */ []));
+    search = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    searchText = debounced(this.search, 300);
+    sideMenu = computed(() => {
+        const menu = this.options().sideMenu?.() ?? [];
+        const text = (this.searchText.value() ?? '').trim().toLowerCase();
+        if (!text)
+            return menu;
+        return this.searchMenu(text, menu);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideMenu" }] : /* istanbul ignore next */ []));
+    searchMenu(text, menu) {
+        const result = [];
+        for (let entry of menu ?? []) {
+            const item = Object.assign({}, entry);
+            item.children = this.searchMenu(text, item.children);
+            if (item.children.length) {
+                result.push(item);
+                continue;
+            }
+            const itemText = item.text.toLowerCase();
+            if (itemText.includes(text))
+                result.push(item);
+        }
+        return result;
+    }
+    toggleDrawer(e) {
+        e?.stopPropagation();
+        this.drawer.update(v => !v);
+    }
+    closeDrawer(e) {
+        e?.stopPropagation();
+        this.drawer.set(false);
+    }
+    onDocumentClick(e) {
+        const target = e.target;
+        const left = this.leftRef().nativeElement;
+        if (left.contains(target))
+            return;
+        this.drawer.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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;margin-right:calc(var(--left-width) * -1);transition:all .3s ease-in-out;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-right{margin-left: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.0.6", ngImport: i0, type: NgFluxFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-frame', imports: [
+                        FormsModule,
+                        NgFluxFrameHeaderMenu,
+                        NgFluxFrameSideMenu,
+                    ], host: {
+                        '[class.viewport]': 'viewport()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    }, 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;margin-right:calc(var(--left-width) * -1);transition:all .3s ease-in-out;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-right{margin-left: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"] }]
+        }], propDecorators: { leftRef: [{ type: i0.ViewChild, args: ['left', { isSignal: true }] }], viewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewport", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
 class NgFluxLoadingInternal {
     config = inject(NGF_CONFIG);
     appRef = inject(ApplicationRef);
@@ -384,10 +1165,10 @@ class NgFluxLoadingInternal {
             router.events.pipe(navError).subscribe(nav => root.stop());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -401,10 +1182,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.0.0", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxLoading, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -415,7 +1196,7 @@ class NgFluxDialogComponent {
     onClosed = inject(NGF_DIALOG_CLOSE_FN);
     content = inject(NGF_DIALOG_CONTENT);
     config = inject(NGF_DIALOG_CONFIG);
-    viewContainer = viewChild.required('container', { read: ViewContainerRef });
+    viewContainer = viewChild.required('container', { ...(ngDevMode ? { debugName: "viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     componentRef;
     data;
     constructor() {
@@ -473,10 +1254,10 @@ class NgFluxDialogComponent {
         const ref = this.componentRef.location;
         ref.nativeElement.classList.add('close');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: NgFluxDialogComponent, isStandalone: true, selector: "ngf-dialog", host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", 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.0.0", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-template #container></ng-template>\n  </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], onBackdropClick: [{
@@ -604,10 +1385,10 @@ class NgFluxAlertDialog {
             dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxAlertDialog, isStandalone: true, selector: "ngf-dialog-box-alert", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}:host .success{color:var(--ngf-success)}:host .error{color:var(--ngf-error)}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgFluxAlertDialog, isStandalone: true, selector: "ngf-dialog-box-alert", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    @switch (btn) {\n      @case ('flex') {<div ngf-flex-x></div>}\n\n      @default {\n        <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n          <span>{{ btn.text }}</span>\n        </ngf-button>\n      }\n    }\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}:host .success{color:var(--ngf-success)}:host .error{color:var(--ngf-error)}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-alert', imports: [
                         NgFluxButton,
@@ -642,10 +1423,10 @@ class NgFluxConfirmDialog {
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxConfirmDialog, isStandalone: true, selector: "ngf-dialog-box-confirm", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgFluxConfirmDialog, isStandalone: true, selector: "ngf-dialog-box-confirm", ngImport: i0, template: "@if (options.title) {\n  <ngf-dialog-header>\n    <h1 ngf-dialog-title>{{ options.title }}</h1>\n  </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n  <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-confirm', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         NgFluxButton,
@@ -686,10 +1467,10 @@ class NgFluxPromptDialog {
     onButtonClick(e, btn) {
         btn.onClick?.call(null, e, btn, this.dialogRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: NgFluxPromptDialog, isStandalone: true, selector: "ngf-dialog-box-prompt", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [placeholder]=\"options.placeholder\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgFluxPromptDialog, isStandalone: true, selector: "ngf-dialog-box-prompt", ngImport: i0, template: "<ngf-dialog-header>\n  <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n  <div class=\"content\" [innerHTML]=\"options.content\"></div>\n  <input type=\"text\" name=\"text\" [placeholder]=\"options.placeholder\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n  @for (btn of buttons(); track $index) {\n    <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n      <span>{{ btn.text }}</span>\n    </ngf-button>\n  }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeaderComponent, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooterComponent, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBodyComponent, selector: "ngf-dialog-body" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
             type: Component,
             args: [{ selector: 'ngf-dialog-box-prompt', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         FormsModule,
@@ -753,10 +1534,10 @@ class NgFluxDialog {
         });
         return dialog.closed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgFluxDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgFluxDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -765,10 +1546,16 @@ const provideNgFlux = (config) => {
     config ??= {};
     return makeEnvironmentProviders([
         { provide: NGF_CONFIG, useValue: config },
+        { provide: TitleStrategy, useClass: RouteTitleStrategy },
         NgFluxDialog,
         NgFluxDialogInternal,
         NgFluxLoading,
         NgFluxLoadingInternal,
+        MetaInternal,
+        provideAppInitializer(() => {
+            const meta = inject(MetaInternal);
+            meta.initialize();
+        }),
         provideAppInitializer(() => {
             const dialog = inject(NgFluxDialogInternal);
             dialog.initialize();
@@ -789,5 +1576,5 @@ const provideNgFlux = (config) => {
  * Generated bundle index. Do not edit.
  */
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, provideNgFlux };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
 //# sourceMappingURL=ngflux-ngflux.mjs.map