@ngflux/ngflux 3.2.3 → 3.2.4

package/fesm2022/ngflux-ngflux.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, Component, inject, ElementRef, computed, HostBinding, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, linkedSignal, output, model, ChangeDetectionStrategy, untracked, booleanAttribute, Directive, viewChildren, TemplateRef, debounced, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from '@angular/core';
+import { InjectionToken, input, Component, inject, ElementRef, computed, HostBinding, Injector, viewChild, ViewContainerRef, ApplicationRef, signal, createComponent, effect, Injectable, linkedSignal, model, Directive, output, ChangeDetectionStrategy, untracked, booleanAttribute, viewChildren, TemplateRef, debounced, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { TitleStrategy, Router, ActivationEnd, RouterLink, RouterLinkActive, isActive, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
 import { filter, map, AsyncSubject, of, switchMap, Observable, from } from 'rxjs';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgClass, KeyValuePipe, NgTemplateOutlet } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -360,6 +360,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             type: Injectable
         }] });
 
+class NgFluxToastController {
+    config = inject(NGF_CONFIG);
+    data = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    map = computed(() => {
+        const data = this.data();
+        const map = new Map();
+        for (const [item] of data.entries()) {
+            const key = item.placement;
+            const entries = map.get(key) ?? [];
+            entries.push(item);
+            map.set(key, entries);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    add = (options) => this.data.update(v => {
+        const data = new Map(v);
+        data.set(options, true);
+        return data;
+    });
+    remove = (options) => this.data.update(v => {
+        const data = new Map(v);
+        data.delete(options);
+        return data;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastController, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NgFluxThemeDirective {
+    ngfTheme = model('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngfTheme" }] : /* istanbul ignore next */ []));
+    className = computed(() => `ngf-theme-${this.ngfTheme()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxThemeDirective, isStandalone: true, selector: "[ngfTheme]", inputs: { ngfTheme: { classPropertyName: "ngfTheme", publicName: "ngfTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngfTheme: "ngfThemeChange" }, host: { properties: { "class": "className()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngfTheme]',
+                    host: {
+                        '[class]': 'className()',
+                    },
+                }]
+        }], propDecorators: { ngfTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngfTheme", required: false }] }, { type: i0.Output, args: ["ngfThemeChange"] }] } });
+
+class NgFluxToastComponent {
+    ctrl = inject(NgFluxToastController);
+    theme = inject(NgFluxThemeDirective);
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const { ctrl } = this;
+        effect(() => {
+            const options = this.options();
+            this.theme.ngfTheme.set(options.theme);
+        });
+        effect(onCleanup => {
+            const options = this.options();
+            if (!options.timeout)
+                return;
+            const timeout = setTimeout(() => ctrl.remove(options), options.timeout);
+            onCleanup(() => clearTimeout(timeout));
+        });
+    }
+    close() {
+        const options = this.options();
+        this.ctrl.remove(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: NgFluxToastComponent, isStandalone: true, selector: "ngf-toast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: NgFluxThemeDirective }], ngImport: i0, template: "<div class=\"wrapper\">\n  <div class=\"content\" [innerHTML]=\"options().content\"></div>\n\n  <div class=\"close-btn\" (click)=\"close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n</div>\n", styles: [":host{display:block;box-shadow:0 0 3px #000000b3;visibility:visible!important;padding:5px 10px;font-size:.8rem;transition:opacity .5s ease-in-out;opacity:0}:host .wrapper{display:flex;flex-direction:row;align-items:center;gap:10px}:host .wrapper>.content{display:block;flex:1 0 0;font-weight:500}:host .wrapper>.close-btn{display:block;cursor:pointer;padding:5px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast', imports: [], hostDirectives: [
+                        NgFluxThemeDirective,
+                    ], template: "<div class=\"wrapper\">\n  <div class=\"content\" [innerHTML]=\"options().content\"></div>\n\n  <div class=\"close-btn\" (click)=\"close()\">\n    <i class=\"ngf-icon close\"></i>\n  </div>\n</div>\n", styles: [":host{display:block;box-shadow:0 0 3px #000000b3;visibility:visible!important;padding:5px 10px;font-size:.8rem;transition:opacity .5s ease-in-out;opacity:0}:host .wrapper{display:flex;flex-direction:row;align-items:center;gap:10px}:host .wrapper>.content{display:block;flex:1 0 0;font-weight:500}:host .wrapper>.close-btn{display:block;cursor:pointer;padding:5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
+
+class NgFluxToastGroupComponent {
+    placement = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxToastGroupComponent, isStandalone: true, selector: "ngf-toast-group", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "placement()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  @for (item of items(); track item) {\n    <ngf-toast [options]=\"item\" animate.enter=\"fade-in\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;position:absolute;width:calc(100% - 2 * var(--ngf-toast-x));transition:opacity .5s ease-in-out;max-width:300px;--flex-direction: column}:host.topLeft{inset:var(--ngf-toast-y) auto auto var(--ngf-toast-x)}:host.topCenter{inset:var(--ngf-toast-y) auto auto 50%;transform:translate(-50%)}:host.topRight{inset:var(--ngf-toast-y) var(--ngf-toast-x) auto auto}:host.bottomLeft{inset:auto auto var(--ngf-toast-y) var(--ngf-toast-x);--flex-direction: column-reverse}:host.bottomCenter{inset:auto auto var(--ngf-toast-y) 50%;transform:translate(-50%);--flex-direction: column-reverse}:host.bottomRight{inset:auto var(--ngf-toast-x) var(--ngf-toast-y) auto;--flex-direction: column-reverse}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;gap:10px}:host .wrapper .fade-in{opacity:1}:host .wrapper .fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: NgFluxToastComponent, selector: "ngf-toast", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast-group', imports: [
+                        NgFluxToastComponent,
+                    ], host: {
+                        '[class]': 'placement()',
+                    }, template: "<div class=\"wrapper\">\n  @for (item of items(); track item) {\n    <ngf-toast [options]=\"item\" animate.enter=\"fade-in\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;position:absolute;width:calc(100% - 2 * var(--ngf-toast-x));transition:opacity .5s ease-in-out;max-width:300px;--flex-direction: column}:host.topLeft{inset:var(--ngf-toast-y) auto auto var(--ngf-toast-x)}:host.topCenter{inset:var(--ngf-toast-y) auto auto 50%;transform:translate(-50%)}:host.topRight{inset:var(--ngf-toast-y) var(--ngf-toast-x) auto auto}:host.bottomLeft{inset:auto auto var(--ngf-toast-y) var(--ngf-toast-x);--flex-direction: column-reverse}:host.bottomCenter{inset:auto auto var(--ngf-toast-y) 50%;transform:translate(-50%);--flex-direction: column-reverse}:host.bottomRight{inset:auto var(--ngf-toast-x) var(--ngf-toast-y) auto;--flex-direction: column-reverse}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;gap:10px}:host .wrapper .fade-in{opacity:1}:host .wrapper .fade-out{opacity:0}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+
+class NgFluxToastRootComponent {
+    ctrl = inject(NgFluxToastController);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: NgFluxToastRootComponent, isStandalone: true, selector: "ngf-toast-root", ngImport: i0, template: "<div class=\"wrapper\">\n  @for (item of ctrl.map() | keyvalue; track item.key) {\n    <ngf-toast-group [placement]=\"item.key\" [items]=\"item.value\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;visibility:hidden;height:0px!important}:host .wrapper{display:block;position:fixed;visibility:hidden;z-index:var(--ngf-toast-z-index)!important;inset:0}:host .wrapper .fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: NgFluxToastGroupComponent, selector: "ngf-toast-group", inputs: ["placement", "items"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngf-toast-root', imports: [
+                        KeyValuePipe,
+                        NgFluxToastGroupComponent,
+                    ], template: "<div class=\"wrapper\">\n  @for (item of ctrl.map() | keyvalue; track item.key) {\n    <ngf-toast-group [placement]=\"item.key\" [items]=\"item.value\" animate.leave=\"fade-out\" />\n  }\n</div>\n", styles: [":host{display:block;visibility:hidden;height:0px!important}:host .wrapper{display:block;position:fixed;visibility:hidden;z-index:var(--ngf-toast-z-index)!important;inset:0}:host .wrapper .fade-out{opacity:0}\n"] }]
+        }] });
+
+class NgFluxToastInitializer {
+    appRef = inject(ApplicationRef);
+    rootRef;
+    constructor() {
+        const { appRef } = this;
+        this.rootRef = createComponent(NgFluxToastRootComponent, {
+            environmentInjector: appRef.injector,
+        });
+    }
+    initialize() {
+        const { appRef, rootRef } = this;
+        appRef.attachView(rootRef.hostView);
+        const elem = rootRef.location.nativeElement;
+        document.body.appendChild(elem);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToastInitializer, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class NgFluxDialogHeader {
     config = inject(NGF_DIALOG_CONFIG);
     dialogRef = inject(NgFluxDialogRef);
@@ -1609,7 +1747,7 @@ class NgFluxDialog {
             closeOnEsc: false,
             data
         });
-        return dialog.closed;
+        return dialog.closed.pipe(map(resp => resp ?? false));
     }
     prompt(data) {
         const dialog = this.open(NgFluxPromptDialog, {
@@ -1628,6 +1766,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class NgFluxToast {
+    config = inject(NGF_CONFIG);
+    ctrl = inject(NgFluxToastController);
+    show(options) {
+        const config = this.config.toast;
+        options.placement ??= config?.placement ?? 'topRight';
+        options.showCloseButton ??= config?.showCloseButton ?? true;
+        options.timeout ??= Math.max(config?.timeout ?? 5000, 0);
+        options.theme ??= config?.theme ?? 'info';
+        this.ctrl.add(options);
+    }
+    showDefault(options) {
+        const opts = { ...options, theme: 'default' };
+        return this.show(opts);
+    }
+    showPrimary(options) {
+        const opts = { ...options, theme: 'primary' };
+        return this.show(opts);
+    }
+    showSecondary(options) {
+        const opts = { ...options, theme: 'secondary' };
+        return this.show(opts);
+    }
+    showError(options) {
+        const opts = { ...options, theme: 'error' };
+        return this.show(opts);
+    }
+    showDanger(options) {
+        const opts = { ...options, theme: 'danger' };
+        return this.show(opts);
+    }
+    showSuccess(options) {
+        const opts = { ...options, theme: 'success' };
+        return this.show(opts);
+    }
+    showWarning(options) {
+        const opts = { ...options, theme: 'warning' };
+        return this.show(opts);
+    }
+    showInfo(options) {
+        const opts = { ...options, theme: 'info' };
+        return this.show(opts);
+    }
+    showLight(options) {
+        const opts = { ...options, theme: 'light' };
+        return this.show(opts);
+    }
+    showDark(options) {
+        const opts = { ...options, theme: 'dark' };
+        return this.show(opts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: NgFluxToast, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastInstance {
+}
+
 const provideNgFlux = (config) => {
     config ??= {};
     return makeEnvironmentProviders([
@@ -1638,6 +1838,9 @@ const provideNgFlux = (config) => {
         NgFluxLoading,
         NgFluxLoadingInternal,
         MetaInternal,
+        NgFluxToast,
+        NgFluxToastController,
+        NgFluxToastInitializer,
         provideAppInitializer(() => {
             const meta = inject(MetaInternal);
             meta.initialize();
@@ -1651,6 +1854,10 @@ const provideNgFlux = (config) => {
             loading.initialize();
             loading.showOnRouteNavigation();
         }),
+        provideAppInitializer(() => {
+            const toast = inject(NgFluxToastInitializer);
+            toast.initialize();
+        }),
     ]);
 };
 
@@ -1710,5 +1917,5 @@ var NgFlux;
  * Generated bundle index. Do not edit.
  */
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxForm, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, NgFluxThemeDirective, NgFluxToast, ToastInstance, provideNgFlux };
 //# sourceMappingURL=ngflux-ngflux.mjs.map