@ngflux/ngflux 1.0.0

package/fesm2022/ngflux-ngflux.mjs

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