@ngflux/ngflux 2.1.1 → 2.2.0

package/fesm2022/ngflux-ngflux.mjs

@@ -1,17 +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 { TitleStrategy, Router, ActivationEnd, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+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 } from '@angular/common';
+import { NgClass, KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+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 */
@@ -265,6 +282,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             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);
@@ -437,6 +531,609 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             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);
@@ -879,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