@ngflux/ngflux 3.0.1 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngflux-ngflux.mjs +218 -127
- package/fesm2022/ngflux-ngflux.mjs.map +1 -1
- package/lib/components/form/message/message.component.scss +18 -0
- package/lib/components/input/select/items/items.component.scss +2 -1
- package/lib/components/input/select/select.component.scss +14 -1
- package/package.json +1 -1
- package/scss/features/dialog.scss +32 -22
- package/types/ngflux-ngflux.d.ts +27 -5
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
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,
|
|
2
|
+
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 } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/router';
|
|
4
4
|
import { TitleStrategy, Router, ActivationEnd, RouterLink, RouterLinkActive, isActive, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
|
|
5
|
-
import { filter, map, AsyncSubject } from 'rxjs';
|
|
6
|
-
import { NgClass,
|
|
5
|
+
import { filter, map, AsyncSubject, of, switchMap, Observable, from } from 'rxjs';
|
|
6
|
+
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
7
7
|
import { Title, Meta } from '@angular/platform-browser';
|
|
8
8
|
import * as i1 from '@angular/forms';
|
|
9
9
|
import { FormsModule } from '@angular/forms';
|
|
@@ -21,10 +21,10 @@ class NgFluxActions {
|
|
|
21
21
|
...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
|
|
22
22
|
gap = input(10, /* @ts-ignore */
|
|
23
23
|
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
24
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxActions, isStandalone: true, selector: "ngf-actions", inputs: { justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\" [class.wrap]=\"wrap()\" [style.gap.px]=\"gap()\" [style.justify-content]=\"justify()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}:host>.wrapper{display:flex;flex-direction:row;align-items:center}:host>.wrapper.wrap{flex-wrap:wrap}\n"] });
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxActions, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
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"] }]
|
|
30
30
|
}], 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 }] }] } });
|
|
@@ -59,10 +59,10 @@ class NgFluxButton {
|
|
|
59
59
|
get isBlock() { return this.block(); }
|
|
60
60
|
get isDisabled() { return this.disabled(); }
|
|
61
61
|
get tabIndex() { return 1; }
|
|
62
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
63
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
62
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxButton, isStandalone: true, selector: "ngf-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.bindClass", "class.block": "this.isBlock", "class.disabled": "this.isDisabled", "tabIndex": "this.tabIndex" } }, ngImport: i0, template: "<button [type]=\"type()\" [disabled]=\"disabled()\">\n <div class=\"wrapper\" [ngClass]=\"btnClassNames()\">\n @if (icon(); as ico) {\n <div class=\"icon\">\n <i [ngClass]=\"ico\"></i>\n </div>\n }\n\n <div class=\"content\">\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</button>\n", styles: [":host{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;font-size:1rem;overflow:clip}:host.block{display:block}:host.disabled{opacity:.5!important;-webkit-user-select:none!important;user-select:none!important;cursor:not-allowed}:host.xs{font-size:.6rem}:host.sm{font-size:.8rem}:host.md{font-size:1rem}:host.lg{font-size:1.25rem}:host.xl{font-size:1.5rem}:host.default{background-color:var(--ngf-default)!important;color:var(--ngf-default-fg)!important}:host.primary{background-color:var(--ngf-primary)!important;color:var(--ngf-primary-fg)!important}:host.secondary{background-color:var(--ngf-secondary)!important;color:var(--ngf-secondary-fg)!important}:host.error{background-color:var(--ngf-error)!important;color:var(--ngf-error-fg)!important}:host.danger{background-color:var(--ngf-danger)!important;color:var(--ngf-danger-fg)!important}:host.success{background-color:var(--ngf-success)!important;color:var(--ngf-success-fg)!important}:host.warning{background-color:var(--ngf-warning)!important;color:var(--ngf-warning-fg)!important}:host.info{background-color:var(--ngf-info)!important;color:var(--ngf-info-fg)!important}:host.light{background-color:var(--ngf-light)!important;color:var(--ngf-light-fg)!important}:host.dark{background-color:var(--ngf-dark)!important;color:var(--ngf-dark-fg)!important}:host>button{display:block;padding:0!important;background-color:transparent;border:none!important;width:100%!important;cursor:inherit!important;color:inherit!important;font-weight:500;font-size:1em}:host>button:focus{outline:none!important}:host .wrapper{display:flex;flex-direction:var(--flex-direction)!important;--flex-direction: row;--icon-border-left: none;--icon-border-right: 1px solid rgba(0, 0, 0, .2)}:host .wrapper.reversed{--flex-direction: row-reverse;--icon-border-left: 1px solid rgba(0, 0, 0, .2);--icon-border-right: none}:host .wrapper>.icon{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.05em;border-left:var(--icon-border-left)!important;border-right:var(--icon-border-right)!important;padding:0 .5em}:host .wrapper>.content{display:block;flex-grow:1;padding:.5em 1em;white-space:nowrap!important;text-align:center!important;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
64
64
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxButton, decorators: [{
|
|
66
66
|
type: Component,
|
|
67
67
|
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"] }]
|
|
68
68
|
}], 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: [{
|
|
@@ -80,19 +80,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
80
80
|
}] } });
|
|
81
81
|
|
|
82
82
|
class NgFluxDialogBody {
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxDialogBody, isStandalone: true, selector: "ngf-dialog-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] });
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogBody, decorators: [{
|
|
87
87
|
type: Component,
|
|
88
88
|
args: [{ selector: 'ngf-dialog-body', imports: [], template: "<ng-content></ng-content>\n", styles: [":host{display:block;padding:20px}\n"] }]
|
|
89
89
|
}] });
|
|
90
90
|
|
|
91
91
|
class NgFluxDialogFooter {
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.
|
|
92
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxDialogFooter, isStandalone: true, selector: "ngf-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:end;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-top:var(--ngf-dialog-border)!important;padding:7px 15px;bottom:0;gap:10px}\n"] });
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogFooter, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
97
|
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"] }]
|
|
98
98
|
}] });
|
|
@@ -100,10 +100,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
100
100
|
class NgFluxDialogRootComponent {
|
|
101
101
|
injector = inject(Injector);
|
|
102
102
|
viewContainer = viewChild.required('container', { ...(ngDevMode ? { debugName: "viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.
|
|
103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NgFluxDialogRootComponent, isStandalone: true, selector: "ngf-dialog-root", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] });
|
|
105
105
|
}
|
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogRootComponent, decorators: [{
|
|
107
107
|
type: Component,
|
|
108
108
|
args: [{ selector: 'ngf-dialog-root', imports: [], template: "<ng-template #container></ng-template>\n", styles: [":host{display:block;width:0px;height:0px;visibility:hidden}\n"] }]
|
|
109
109
|
}], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
@@ -187,10 +187,10 @@ class NgFluxDialogInternal {
|
|
|
187
187
|
clear = () => {
|
|
188
188
|
this.list.set([]);
|
|
189
189
|
};
|
|
190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
191
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
190
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
191
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, providedIn: 'root' });
|
|
192
192
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogInternal, decorators: [{
|
|
194
194
|
type: Injectable,
|
|
195
195
|
args: [{ providedIn: 'root' }]
|
|
196
196
|
}], ctorParameters: () => [] });
|
|
@@ -246,10 +246,10 @@ class RouteTitleStrategy extends TitleStrategy {
|
|
|
246
246
|
if (title)
|
|
247
247
|
service.setTitle(title);
|
|
248
248
|
}
|
|
249
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
250
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
250
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, providedIn: 'root' });
|
|
251
251
|
}
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RouteTitleStrategy, decorators: [{
|
|
253
253
|
type: Injectable,
|
|
254
254
|
args: [{ providedIn: 'root' }]
|
|
255
255
|
}] });
|
|
@@ -274,10 +274,10 @@ class MetaInternal {
|
|
|
274
274
|
meta.updateTag({ name: 'keywords', content: keywords });
|
|
275
275
|
});
|
|
276
276
|
}
|
|
277
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
278
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
278
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, providedIn: 'root' });
|
|
279
279
|
}
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: MetaInternal, decorators: [{
|
|
281
281
|
type: Injectable,
|
|
282
282
|
args: [{ providedIn: 'root' }]
|
|
283
283
|
}] });
|
|
@@ -324,10 +324,10 @@ class TabNavController {
|
|
|
324
324
|
return map;
|
|
325
325
|
});
|
|
326
326
|
}
|
|
327
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
328
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
327
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
328
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController });
|
|
329
329
|
}
|
|
330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabNavController, decorators: [{
|
|
331
331
|
type: Injectable
|
|
332
332
|
}] });
|
|
333
333
|
|
|
@@ -352,10 +352,10 @@ class TabGroupController {
|
|
|
352
352
|
return map;
|
|
353
353
|
});
|
|
354
354
|
}
|
|
355
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
356
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
355
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
356
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController });
|
|
357
357
|
}
|
|
358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TabGroupController, decorators: [{
|
|
359
359
|
type: Injectable
|
|
360
360
|
}] });
|
|
361
361
|
|
|
@@ -364,19 +364,19 @@ class NgFluxDialogHeader {
|
|
|
364
364
|
dialogRef = inject(NgFluxDialogRef);
|
|
365
365
|
icon = input(/* @ts-ignore */
|
|
366
366
|
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxDialogHeader, isStandalone: true, selector: "ngf-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as ico) {\n <div class=\"left\">\n <i [ngClass]=\"ico\"></i>\n </div>\n}\n\n<div class=\"middle\">\n <ng-content></ng-content>\n</div>\n\n@if (config.closeBtn) {\n <div class=\"right\" title=\"Close\" (click)=\"dialogRef.close()\">\n <i class=\"ngf-icon close\"></i>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:row;position:sticky;background-color:var(--ngf-dialog-background-color)!important;border-bottom:var(--ngf-dialog-border)!important;min-height:50px;top:0}:host>.left{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:10px}:host>.middle{display:flex;flex-direction:column;justify-content:center;align-items:start;overflow:hidden;text-overflow:ellipsis;padding:10px 20px;flex:1 0 0;width:0px}:host>.right{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:10px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
369
369
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogHeader, decorators: [{
|
|
371
371
|
type: Component,
|
|
372
372
|
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"] }]
|
|
373
373
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
374
374
|
|
|
375
375
|
class NgFluxLoadingComponent {
|
|
376
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.
|
|
376
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxLoadingComponent, isStandalone: true, selector: "ngf-loading", ngImport: i0, template: "<svg viewBox=\"25 25 50 50\">\n <circle r=\"20\" cy=\"50\" cx=\"50\"></circle>\n</svg>\n", styles: [":host{display:block}:host svg{width:3.25em;transform-origin:center;animation:rotate4 2s linear infinite}:host circle{fill:none;stroke:var(--ngf-loading-foreground)!important;stroke-width:5;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:dash4 1.5s ease-in-out infinite}@keyframes rotate4{to{transform:rotate(360deg)}}@keyframes dash4{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,200;stroke-dashoffset:-35px}to{stroke-dashoffset:-125px}}\n"] });
|
|
378
378
|
}
|
|
379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingComponent, decorators: [{
|
|
380
380
|
type: Component,
|
|
381
381
|
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"] }]
|
|
382
382
|
}] });
|
|
@@ -422,10 +422,10 @@ class NgFluxLoadingRootComponent {
|
|
|
422
422
|
entries.pop();
|
|
423
423
|
return entries;
|
|
424
424
|
});
|
|
425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.
|
|
425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NgFluxLoadingRootComponent, isStandalone: true, selector: "ngf-loading-root", host: { properties: { "class.show": "this.showLoading" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n <ng-template #container></ng-template>\n</div>\n", styles: [":host{display:none;position:fixed;z-index:var(--ngf-loading-z-index)!important;inset:0}:host.show{display:block}:host>.wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--ngf-loading-background)!important;height:100%!important;width:100%!important}\n"] });
|
|
427
427
|
}
|
|
428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingRootComponent, decorators: [{
|
|
429
429
|
type: Component,
|
|
430
430
|
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"] }]
|
|
431
431
|
}], ctorParameters: () => [], propDecorators: { showLoading: [{
|
|
@@ -473,10 +473,10 @@ class NgFluxPaginationInfo {
|
|
|
473
473
|
limit: data.perPage,
|
|
474
474
|
});
|
|
475
475
|
}
|
|
476
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
477
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPaginationInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxPaginationInfo, isStandalone: true, selector: "ngf-pagination-info", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: true, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { callback: "callback", limit: "limitChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n <div class=\"block limit\">\n <div>Per page</div>\n <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n @for (entry of limitOptions(); track $index) {\n <option [value]=\"entry\">{{ entry }}</option>\n }\n </select>\n </div>\n\n <div class=\"block info\">\n <div>{{ info() }}</div>\n </div>\n\n <div class=\"block nav\">\n <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n <i class=\"ngf-icon chevron-left\"></i>\n </button>\n\n <button (click)=\"next()\" [disabled]=\"disableNext()\">\n <i class=\"ngf-icon chevron-right\"></i>\n </button>\n </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
478
478
|
}
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPaginationInfo, decorators: [{
|
|
480
480
|
type: Component,
|
|
481
481
|
args: [{ selector: 'ngf-pagination-info', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule], template: "<div class=\"wrapper\">\n <div class=\"block limit\">\n <div>Per page</div>\n <select name=\"\" id=\"\" [(ngModel)]=\"limit\">\n @for (entry of limitOptions(); track $index) {\n <option [value]=\"entry\">{{ entry }}</option>\n }\n </select>\n </div>\n\n <div class=\"block info\">\n <div>{{ info() }}</div>\n </div>\n\n <div class=\"block nav\">\n <button (click)=\"prev()\" [disabled]=\"disablePrev()\">\n <i class=\"ngf-icon chevron-left\"></i>\n </button>\n\n <button (click)=\"next()\" [disabled]=\"disableNext()\">\n <i class=\"ngf-icon chevron-right\"></i>\n </button>\n </div>\n</div>\n", styles: [":host{display:block;container:pagination/inline-size}:host .wrapper{display:flex;flex-direction:column;font-family:Poppins,sans-serif;align-items:end;text-align:center;font-size:.8rem;gap:5px}@container pagination (min-width: 400px){:host .wrapper{flex-direction:row;justify-content:end;align-items:center;gap:15px}}:host .wrapper .block{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}:host .wrapper .limit>select{display:block;padding:2px 5px;font-size:inherit;outline:none!important;width:50px}:host .wrapper .nav>button{display:block;background-color:transparent;box-shadow:none!important;outline:none!important;cursor:pointer;border:none;padding:0}:host .wrapper .nav>button:disabled{cursor:default;color:#aaa}\n"] }]
|
|
482
482
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], callback: [{ type: i0.Output, args: ["callback"] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: true }] }, { type: i0.Output, args: ["limitChange"] }], limitOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "limitOptions", required: true }] }] } });
|
|
@@ -523,10 +523,10 @@ class NgFluxPagination {
|
|
|
523
523
|
init = true;
|
|
524
524
|
});
|
|
525
525
|
}
|
|
526
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxPagination, isStandalone: true, selector: "ngf-pagination", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, limitOptions: { classPropertyName: "limitOptions", publicName: "limitOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { limit: "limitChange", callback: "callback" }, ngImport: i0, template: "<ngf-pagination-info\n [data]=\"value()\"\n [(limit)]=\"limit\"\n [limitOptions]=\"limitOptions()\"\n (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<ngf-pagination-info\n [data]=\"value()\"\n [(limit)]=\"limit\"\n [limitOptions]=\"limitOptions()\"\n (callback)=\"callback.emit($event)\"\n></ngf-pagination-info>\n", styles: [":host{display:block}:host>.content{margin:20px 0}\n"], dependencies: [{ kind: "component", type: NgFluxPaginationInfo, selector: "ngf-pagination-info", inputs: ["data", "limit", "limitOptions"], outputs: ["callback", "limitChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
528
528
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPagination, decorators: [{
|
|
530
530
|
type: Component,
|
|
531
531
|
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"] }]
|
|
532
532
|
}], 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"] }] } });
|
|
@@ -558,14 +558,14 @@ class NgFluxSelectItems {
|
|
|
558
558
|
return;
|
|
559
559
|
this.select.emit(item);
|
|
560
560
|
}
|
|
561
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
561
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelectItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxSelectItems, isStandalone: true, selector: "ngf-select-items", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { select: "select" }, host: { properties: { "class.has-parent": "!!parent" } }, ngImport: i0, template: "<ul class=\"wrapper\">\n @for (entry of data(); track $index) {\n @let item = getItem(entry);\n\n <li [class.disabled]=\"item.disabled\" [class.has-parent]=\"!!parent\" [class.active]=\"options().getSelected(entry)\">\n <div class=\"text\" (click)=\"onSelect(entry)\">\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.children?.length) {\n <ngf-select-items [data]=\"item.children\" [options]=\"options()\" [transform]=\"transform()\" (select)=\"onSelect($event)\" />\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;position:relative;max-height:150px;overflow:hidden auto}:host.has-parent{max-height:auto;padding:0 0 0 10px}:host.has-parent:before{display:block;position:absolute;inset:0 auto 0 5px;background-color:#0003;content:\"\";width:1px}:host>.wrapper{display:block;list-style:none;font-size:.9rem;padding:0;margin:0}:host>.wrapper>li{display:block;cursor:pointer;--background-color: transparent;--color: inherit}:host>.wrapper>li>.text{padding:5px;background-color:var(--background-color)!important;color:var(--color)!important}:host>.wrapper>li>.text:hover{--background-color: rgba(var(--ngf-primary-rgb), .1)}:host>.wrapper>li.disabled{pointer-events:none;cursor:not-allowed;--color: #666}:host>.wrapper>li.active>.text{--background-color: var(--ngf-primary);--color: #FFF}:host>.wrapper>li.has-parent{position:relative}:host>.wrapper>li.has-parent:before{display:block;position:absolute;inset:50% 100% auto -4px;transform:translateY(-50%);background-color:#0003;content:\"\";height:1px}\n"], dependencies: [{ kind: "component", type: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
|
|
563
563
|
}
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelectItems, decorators: [{
|
|
565
565
|
type: Component,
|
|
566
566
|
args: [{ selector: 'ngf-select-items', imports: [], host: {
|
|
567
567
|
'[class.has-parent]': '!!parent',
|
|
568
|
-
}, 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:
|
|
568
|
+
}, template: "<ul class=\"wrapper\">\n @for (entry of data(); track $index) {\n @let item = getItem(entry);\n\n <li [class.disabled]=\"item.disabled\" [class.has-parent]=\"!!parent\" [class.active]=\"options().getSelected(entry)\">\n <div class=\"text\" (click)=\"onSelect(entry)\">\n <span>{{ item.label }}</span>\n </div>\n\n @if (item.children?.length) {\n <ngf-select-items [data]=\"item.children\" [options]=\"options()\" [transform]=\"transform()\" (select)=\"onSelect($event)\" />\n }\n </li>\n }\n</ul>\n", styles: [":host{display:block;position:relative;max-height:150px;overflow:hidden auto}:host.has-parent{max-height:auto;padding:0 0 0 10px}:host.has-parent:before{display:block;position:absolute;inset:0 auto 0 5px;background-color:#0003;content:\"\";width:1px}:host>.wrapper{display:block;list-style:none;font-size:.9rem;padding:0;margin:0}:host>.wrapper>li{display:block;cursor:pointer;--background-color: transparent;--color: inherit}:host>.wrapper>li>.text{padding:5px;background-color:var(--background-color)!important;color:var(--color)!important}:host>.wrapper>li>.text:hover{--background-color: rgba(var(--ngf-primary-rgb), .1)}:host>.wrapper>li.disabled{pointer-events:none;cursor:not-allowed;--color: #666}:host>.wrapper>li.active>.text{--background-color: var(--ngf-primary);--color: #FFF}:host>.wrapper>li.has-parent{position:relative}:host>.wrapper>li.has-parent:before{display:block;position:absolute;inset:50% 100% auto -4px;transform:translateY(-50%);background-color:#0003;content:\"\";height:1px}\n"] }]
|
|
569
569
|
}], 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"] }] } });
|
|
570
570
|
|
|
571
571
|
class NgFluxSelect {
|
|
@@ -576,6 +576,10 @@ class NgFluxSelect {
|
|
|
576
576
|
multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
577
577
|
placeholder = input(/* @ts-ignore */
|
|
578
578
|
...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
579
|
+
loading = input(false, /* @ts-ignore */
|
|
580
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
581
|
+
loadingText = input('Please wait...', /* @ts-ignore */
|
|
582
|
+
...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
579
583
|
transform = input({
|
|
580
584
|
getLabel: item => item.label ?? '',
|
|
581
585
|
getValue: item => item.value,
|
|
@@ -606,6 +610,8 @@ class NgFluxSelect {
|
|
|
606
610
|
return result;
|
|
607
611
|
}, /* @ts-ignore */
|
|
608
612
|
...(ngDevMode ? [{ debugName: "vmap" }] : /* istanbul ignore next */ []));
|
|
613
|
+
items = computed(() => Array.from(this.vmap().values()), /* @ts-ignore */
|
|
614
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
609
615
|
open = signal(false, /* @ts-ignore */
|
|
610
616
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
611
617
|
searchbox = signal('', /* @ts-ignore */
|
|
@@ -621,7 +627,7 @@ class NgFluxSelect {
|
|
|
621
627
|
headerText = computed(() => {
|
|
622
628
|
const multi = this.multi();
|
|
623
629
|
const placeholder = this.placeholder() ?? 'Select Item' + (multi ? 's' : '');
|
|
624
|
-
const items = Array.from(this.
|
|
630
|
+
const items = Array.from(this.items());
|
|
625
631
|
if (!items.length)
|
|
626
632
|
return placeholder;
|
|
627
633
|
const transform = this.transform();
|
|
@@ -632,6 +638,13 @@ class NgFluxSelect {
|
|
|
632
638
|
return text;
|
|
633
639
|
}, /* @ts-ignore */
|
|
634
640
|
...(ngDevMode ? [{ debugName: "headerText" }] : /* istanbul ignore next */ []));
|
|
641
|
+
constructor() {
|
|
642
|
+
effect(() => {
|
|
643
|
+
const loading = this.loading();
|
|
644
|
+
if (loading)
|
|
645
|
+
this.open.set(false);
|
|
646
|
+
});
|
|
647
|
+
}
|
|
635
648
|
doFlatMap(map, data) {
|
|
636
649
|
const transform = this.transform();
|
|
637
650
|
for (let item of data) {
|
|
@@ -706,28 +719,27 @@ class NgFluxSelect {
|
|
|
706
719
|
return;
|
|
707
720
|
this.open.set(false);
|
|
708
721
|
}
|
|
709
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxSelect, isStandalone: true, selector: "ngf-select", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.block": "block()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n <div class=\"header\" [class.single]=\"!multi()\" (click)=\"toggleOpen()\">\n <div class=\"text\">{{ headerText() }}</div>\n @if (!multi()) {\n @let icons = ['ngf-icon', (open() ? 'arrow-drop-up' : 'arrow-drop-down')];\n <i [className]=\"icons.join(' ')\"></i>\n }\n </div>\n\n <div class=\"body\" [class.single]=\"!multi()\" [class.show]=\"open()\">\n <div class=\"searchbox\">\n <input type=\"text\" placeholder=\"Search Items\" [(ngModel)]=\"searchbox\">\n\n @if (searchbox().length) {\n <div class=\"clear\" (click)=\"searchbox.set('')\">\n <i class=\"ngf-icon close\"></i>\n </div>\n }\n </div>\n\n <ngf-select-items [data]=\"search()\" [options]=\"options\" [transform]=\"transform()\" (select)=\"toggle($event)\" />\n </div>\n\n @if (multi()) {\n <div class=\"footer\">\n @if (!items().length) {\n <div class=\"none\">No item selected</div>\n } @else {\n <div class=\"entries\">\n @for (item of items(); track $index) {\n <div class=\"entries-item\">\n <div class=\"text\">{{ transform().getLabel(item) }}</div>\n <div class=\"btn\" (click)=\"toggle(item)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (multi()) {\n <div class=\"clear-btn\" (click)=\"value.set(null)\">\n <span>Clear All</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"overlay\">\n <div class=\"text\">{{ loadingText() }}</div>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block;border:var(--border)!important;border-radius:3px;width:200px;font-size:.8rem;--border: 1px solid rgba(0, 0, 0, .2);--height: 40px}:host.block{display:block;width:100%}:host>.wrapper{display:block;position:relative}:host>.wrapper .overlay{display:flex;position:absolute;flex-direction:column;justify-content:center;align-items:center;background-color:#ffffffe6;font-weight:600;color:#444;inset:0;z-index:10}:host>.wrapper .header{display:flex;flex-direction:row;align-items:center;border-bottom:var(--border)!important;height:var(--height)!important;padding:0 10px;font-weight:500;color:#333;gap:10px}:host>.wrapper .header.single{cursor:pointer;--border: none}:host>.wrapper .header>.text{flex:1 0 0;width:0px;overflow:hidden;text-overflow:ellipsis}:host>.wrapper .header .ngf-icon{font-size:1.8em}:host>.wrapper .body{display:block;background-color:#fff;font-size:1em}:host>.wrapper .body.single{display:none;position:absolute;inset:100% 0 auto;box-shadow:0 0 3px #000000b3;z-index:15}:host>.wrapper .body.single.show{display:block!important}:host>.wrapper .body>.searchbox{display:block;position:relative;border-bottom:var(--border)!important;padding:7px}:host>.wrapper .body>.searchbox>input{display:block;width:100%!important;border:var(--border)!important;background-color:#fff;font-size:.9rem;padding:5px}:host>.wrapper .body>.searchbox>input:focus{box-shadow:none!important;outline:none!important}:host>.wrapper .body>.searchbox>.clear{display:block;position:absolute;inset:50% 15px auto auto;transform:translateY(-50%);cursor:pointer}:host>.wrapper .body>.searchbox>.clear .ngf-icon{font-size:1em}:host>.wrapper .footer{display:block;border-top:var(--border)!important;font-size:.9em;padding:5px}:host>.wrapper .footer .none{text-align:center;color:#666}:host>.wrapper .footer .entries{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}:host>.wrapper .footer .entries-item{display:flex;flex-direction:row;align-items:center;padding:0 3px;border-radius:2px;background-color:var(--ngf-primary);color:#fff;gap:5px}:host>.wrapper .footer .entries-item .btn{cursor:pointer}:host>.wrapper .footer .entries-item .btn .ngf-icon{font-size:1em}:host>.wrapper>.clear-btn{display:block;border-top:var(--border)!important;font-size:.8em;padding:3px;text-align:center;background-color:#444;color:#fff;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxSelectItems, selector: "ngf-select-items", inputs: ["data", "options", "transform"], outputs: ["select"] }] });
|
|
711
724
|
}
|
|
712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxSelect, decorators: [{
|
|
713
726
|
type: Component,
|
|
714
727
|
args: [{ selector: 'ngf-select', imports: [
|
|
715
728
|
FormsModule,
|
|
716
729
|
NgFluxSelectItems,
|
|
717
|
-
KeyValuePipe,
|
|
718
730
|
], host: {
|
|
719
731
|
'[class.block]': 'block()',
|
|
720
732
|
'(document:click)': 'onDocumentClick($event)',
|
|
721
|
-
}, 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 (!
|
|
722
|
-
}], 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"] }] } });
|
|
733
|
+
}, template: "<div class=\"wrapper\">\n <div class=\"header\" [class.single]=\"!multi()\" (click)=\"toggleOpen()\">\n <div class=\"text\">{{ headerText() }}</div>\n @if (!multi()) {\n @let icons = ['ngf-icon', (open() ? 'arrow-drop-up' : 'arrow-drop-down')];\n <i [className]=\"icons.join(' ')\"></i>\n }\n </div>\n\n <div class=\"body\" [class.single]=\"!multi()\" [class.show]=\"open()\">\n <div class=\"searchbox\">\n <input type=\"text\" placeholder=\"Search Items\" [(ngModel)]=\"searchbox\">\n\n @if (searchbox().length) {\n <div class=\"clear\" (click)=\"searchbox.set('')\">\n <i class=\"ngf-icon close\"></i>\n </div>\n }\n </div>\n\n <ngf-select-items [data]=\"search()\" [options]=\"options\" [transform]=\"transform()\" (select)=\"toggle($event)\" />\n </div>\n\n @if (multi()) {\n <div class=\"footer\">\n @if (!items().length) {\n <div class=\"none\">No item selected</div>\n } @else {\n <div class=\"entries\">\n @for (item of items(); track $index) {\n <div class=\"entries-item\">\n <div class=\"text\">{{ transform().getLabel(item) }}</div>\n <div class=\"btn\" (click)=\"toggle(item)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (multi()) {\n <div class=\"clear-btn\" (click)=\"value.set(null)\">\n <span>Clear All</span>\n </div>\n }\n\n @if (loading()) {\n <div class=\"overlay\">\n <div class=\"text\">{{ loadingText() }}</div>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block;border:var(--border)!important;border-radius:3px;width:200px;font-size:.8rem;--border: 1px solid rgba(0, 0, 0, .2);--height: 40px}:host.block{display:block;width:100%}:host>.wrapper{display:block;position:relative}:host>.wrapper .overlay{display:flex;position:absolute;flex-direction:column;justify-content:center;align-items:center;background-color:#ffffffe6;font-weight:600;color:#444;inset:0;z-index:10}:host>.wrapper .header{display:flex;flex-direction:row;align-items:center;border-bottom:var(--border)!important;height:var(--height)!important;padding:0 10px;font-weight:500;color:#333;gap:10px}:host>.wrapper .header.single{cursor:pointer;--border: none}:host>.wrapper .header>.text{flex:1 0 0;width:0px;overflow:hidden;text-overflow:ellipsis}:host>.wrapper .header .ngf-icon{font-size:1.8em}:host>.wrapper .body{display:block;background-color:#fff;font-size:1em}:host>.wrapper .body.single{display:none;position:absolute;inset:100% 0 auto;box-shadow:0 0 3px #000000b3;z-index:15}:host>.wrapper .body.single.show{display:block!important}:host>.wrapper .body>.searchbox{display:block;position:relative;border-bottom:var(--border)!important;padding:7px}:host>.wrapper .body>.searchbox>input{display:block;width:100%!important;border:var(--border)!important;background-color:#fff;font-size:.9rem;padding:5px}:host>.wrapper .body>.searchbox>input:focus{box-shadow:none!important;outline:none!important}:host>.wrapper .body>.searchbox>.clear{display:block;position:absolute;inset:50% 15px auto auto;transform:translateY(-50%);cursor:pointer}:host>.wrapper .body>.searchbox>.clear .ngf-icon{font-size:1em}:host>.wrapper .footer{display:block;border-top:var(--border)!important;font-size:.9em;padding:5px}:host>.wrapper .footer .none{text-align:center;color:#666}:host>.wrapper .footer .entries{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}:host>.wrapper .footer .entries-item{display:flex;flex-direction:row;align-items:center;padding:0 3px;border-radius:2px;background-color:var(--ngf-primary);color:#fff;gap:5px}:host>.wrapper .footer .entries-item .btn{cursor:pointer}:host>.wrapper .footer .entries-item .btn .ngf-icon{font-size:1em}:host>.wrapper>.clear-btn{display:block;border-top:var(--border)!important;font-size:.8em;padding:3px;text-align:center;background-color:#444;color:#fff;cursor:pointer}\n"] }]
|
|
734
|
+
}], ctorParameters: () => [], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", 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"] }] } });
|
|
723
735
|
|
|
724
736
|
class PinInputDirective {
|
|
725
737
|
ref = inject(ElementRef);
|
|
726
738
|
elem = this.ref.nativeElement;
|
|
727
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
728
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
739
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PinInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
740
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: PinInputDirective, isStandalone: true, selector: "[pinInput]", ngImport: i0 });
|
|
729
741
|
}
|
|
730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: PinInputDirective, decorators: [{
|
|
731
743
|
type: Directive,
|
|
732
744
|
args: [{
|
|
733
745
|
selector: '[pinInput]',
|
|
@@ -819,10 +831,10 @@ class NgFluxPinInput {
|
|
|
819
831
|
const inputs = this.inputs();
|
|
820
832
|
inputs.at(0)?.elem.focus();
|
|
821
833
|
}
|
|
822
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
834
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPinInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxPinInput, isStandalone: true, selector: "ngf-pin-input", inputs: { chars: { classPropertyName: "chars", publicName: "chars", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.block": "block()" } }, viewQueries: [{ propertyName: "inputs", predicate: PinInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n @for (val of values(); track $index) {\n <input type=\"text\" pinInput [value]=\"val\" (keydown)=\"onKeyDown($event, $index)\" (paste)=\"onPaste($event, $index)\">\n }\n</div>\n", styles: [":host{display:inline-block;width:200px;--padding-y: 10px;--border: 1px solid rgba(0, 0, 0, .2);--background-color: #FFF;--color: inherit;--gap: 5px}:host.block{display:block;width:100%}:host>.wrapper{display:flex;flex-direction:row;gap:var(--gap)!important}:host>.wrapper>input{display:block;flex:1 0 0;width:0px;text-align:center;font-size:1em;color:var(--color)!important;padding:var(--padding-y) 0px var(--padding-y) 0px!important;background-color:var(--background-color)!important;border:var(--border)!important}:host>.wrapper>input:focus{outline:var(--border);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: PinInputDirective, selector: "[pinInput]" }] });
|
|
824
836
|
}
|
|
825
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPinInput, decorators: [{
|
|
826
838
|
type: Component,
|
|
827
839
|
args: [{ selector: 'ngf-pin-input', imports: [
|
|
828
840
|
PinInputDirective,
|
|
@@ -862,10 +874,10 @@ class NgFluxTabNavDirective {
|
|
|
862
874
|
return;
|
|
863
875
|
ctrl.activate(this);
|
|
864
876
|
}
|
|
865
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
866
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.
|
|
877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
878
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabNavDirective, isStandalone: true, selector: "[ngfTabNav]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "activate($event)" }, properties: { "class.ngf-tab-nav": "true", "class.active": "active()" } }, hostDirectives: [{ directive: i1$1.RouterLink, inputs: ["routerLink", "link"] }, { directive: i1$1.RouterLinkActive }], ngImport: i0 });
|
|
867
879
|
}
|
|
868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavDirective, decorators: [{
|
|
869
881
|
type: Directive,
|
|
870
882
|
args: [{
|
|
871
883
|
selector: '[ngfTabNav]',
|
|
@@ -883,10 +895,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
883
895
|
|
|
884
896
|
class NgFluxTabContentDirective {
|
|
885
897
|
templateRef = inject(TemplateRef);
|
|
886
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
887
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.
|
|
898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
899
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: NgFluxTabContentDirective, isStandalone: true, selector: "[ngfTabContent]", exportAs: ["content"], ngImport: i0 });
|
|
888
900
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabContentDirective, decorators: [{
|
|
890
902
|
type: Directive,
|
|
891
903
|
args: [{
|
|
892
904
|
selector: '[ngfTabContent]',
|
|
@@ -911,10 +923,10 @@ class NgFluxTab {
|
|
|
911
923
|
});
|
|
912
924
|
});
|
|
913
925
|
}
|
|
914
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
915
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.
|
|
926
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NgFluxTab, isStandalone: true, selector: "ngf-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: NgFluxTabContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template ngfTabContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgFluxTabContentDirective, selector: "[ngfTabContent]", exportAs: ["content"] }] });
|
|
916
928
|
}
|
|
917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTab, decorators: [{
|
|
918
930
|
type: Component,
|
|
919
931
|
args: [{ selector: 'ngf-tab', imports: [
|
|
920
932
|
NgFluxTabContentDirective,
|
|
@@ -939,10 +951,10 @@ class NgFluxTabNavbar {
|
|
|
939
951
|
panel?.setContent(content?.templateRef);
|
|
940
952
|
});
|
|
941
953
|
}
|
|
942
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
943
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
954
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
955
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabNavbar, isStandalone: true, selector: "ngf-tab-navbar", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabNavController], ngImport: i0, template: "<div class=\"wrapper\">\n <ng-content select=\"[ngfTabNav]\"></ng-content>\n</div>\n", styles: [":host{display:block;border-bottom:1px solid #CCC;overflow:auto hidden}:host>.wrapper{display:flex;flex-direction:row}\n"] });
|
|
944
956
|
}
|
|
945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabNavbar, decorators: [{
|
|
946
958
|
type: Component,
|
|
947
959
|
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"] }]
|
|
948
960
|
}], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }] } });
|
|
@@ -955,10 +967,10 @@ class NgFluxTabPanel {
|
|
|
955
967
|
setContent(tpl) {
|
|
956
968
|
this.content.set(tpl ?? null);
|
|
957
969
|
}
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.
|
|
970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: NgFluxTabPanel, isStandalone: true, selector: "ngf-tab-panel", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wrapper\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n</div>\n", styles: [".wrapper{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
960
972
|
}
|
|
961
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabPanel, decorators: [{
|
|
962
974
|
type: Component,
|
|
963
975
|
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"] }]
|
|
964
976
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
@@ -968,10 +980,10 @@ class NgFluxTabGroup {
|
|
|
968
980
|
selectedIndex = input(0, /* @ts-ignore */
|
|
969
981
|
...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
970
982
|
showTabs = false;
|
|
971
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
972
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
983
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxTabGroup, isStandalone: true, selector: "ngf-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TabGroupController], ngImport: i0, template: "<ngf-tab-navbar [panel]=\"panel\" [selectedIndex]=\"selectedIndex()\">\n @for (tab of ctrl.tabs(); track $index) {\n <div ngfTabNav [content]=\"tab.content()\">\n <span>{{ tab.navLabel() }}</span>\n </div>\n }\n</ngf-tab-navbar>\n\n<ngf-tab-panel #panel></ngf-tab-panel>\n\n@if (showTabs) {\n <ng-content select=\"ngf-tab\"></ng-content>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: NgFluxTabNavbar, selector: "ngf-tab-navbar", inputs: ["panel", "selectedIndex"] }, { kind: "directive", type: NgFluxTabNavDirective, selector: "[ngfTabNav]", inputs: ["content"] }, { kind: "component", type: NgFluxTabPanel, selector: "ngf-tab-panel", inputs: ["label"] }] });
|
|
973
985
|
}
|
|
974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxTabGroup, decorators: [{
|
|
975
987
|
type: Component,
|
|
976
988
|
args: [{ selector: 'ngf-tab-group', providers: [TabGroupController], imports: [
|
|
977
989
|
NgFluxTabNavbar,
|
|
@@ -1024,10 +1036,10 @@ class NgFluxFrameSideMenu {
|
|
|
1024
1036
|
return map;
|
|
1025
1037
|
});
|
|
1026
1038
|
}
|
|
1027
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1028
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1039
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrameSideMenu, isStandalone: true, selector: "ngf-frame-side-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.has-parent": "hasParent()" } }, ngImport: i0, template: "@if (menu().length) {\n <ul class=\"wrapper\">\n @for (item of menu(); track $index) {\n <li routerLinkActive=\"active\">\n @if(item.isExternal) {\n <a [href]=\"item.href ?? null\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n <div class=\"icon\">\n @if (item.icon) {<i [className]=\"item.icon\"></i>}\n </div>\n\n <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n @if (item.children?.length) {\n @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n <div class=\"toggle\" (click)=\"toggle($event, item)\">\n <i [className]=\"icons.join(' ')\"></i>\n </div>\n }\n </a>\n } @else {\n <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\" (click)=\"item.onClick?.($event, item)\">\n <div class=\"icon\">\n @if (item.icon) {<i [className]=\"item.icon\"></i>}\n </div>\n\n <div class=\"text\" [attr.title]=\"item.text\">{{ item.text }}</div>\n\n @if (item.children?.length) {\n @let icons = ['ngf-icon', isExpanded(item) ? 'unfold-less' : 'unfold-more'];\n <div class=\"toggle\" (click)=\"toggle($event, item)\">\n <i [className]=\"icons.join(' ')\"></i>\n </div>\n }\n </a>\n }\n\n @if (item.children?.length && (isActive(item) || isExpanded(item))) {\n <ngf-frame-side-menu [menu]=\"item.children\" />\n }\n </li>\n }\n </ul>\n}\n", styles: [":host{display:block;font-size:var(--font-size)!important;--color: #333;--bg-color: transparent;--font-size: .9rem;--active-color: var(--ngf-primary);--active-bg-color: rgba(var(--ngf-primary-rgb), .1);--hover-color: var(--ngf-primary);--hover-bg-color: rgba(var(--ngf-primary-rgb), .1)}:host.has-parent{padding:0 0 0 20px}:host .wrapper{display:block;list-style:none;padding:0;margin:0}:host .wrapper>li{display:block;background-color:var(--bg-color)!important;padding:0;margin:0}:host .wrapper>li:hover{--bg-color: var(--hover-bg-color)}:host .wrapper>li.active{--color: var(--active-color);--bg-color: var(--active-bg-color)}:host .wrapper>li>a{display:flex;flex-direction:row;align-items:center;padding:10px 5px;text-decoration:none!important;cursor:pointer;width:100%;gap:5px}:host .wrapper>li>a,:host .wrapper>li>a:link{color:var(--color)!important}:host .wrapper>li>a>.icon{display:block;width:13px}:host .wrapper>li>a>.icon .ngf-icon{font-size:1em}:host .wrapper>li>a>.text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 0 0;width:0px}:host .wrapper>li>a>.toggle{display:block;cursor:pointer}:host .wrapper>li>a>.toggle .ngf-icon{font-size:1em}\n"], dependencies: [{ kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
1029
1041
|
}
|
|
1030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameSideMenu, decorators: [{
|
|
1031
1043
|
type: Component,
|
|
1032
1044
|
args: [{ selector: 'ngf-frame-side-menu', imports: [
|
|
1033
1045
|
RouterLink,
|
|
@@ -1050,10 +1062,10 @@ class NgFluxFrameHeaderMenu {
|
|
|
1050
1062
|
onDocumentClick(e) {
|
|
1051
1063
|
this.open.set(false);
|
|
1052
1064
|
}
|
|
1053
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1054
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1065
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameHeaderMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrameHeaderMenu, isStandalone: true, selector: "ngf-frame-header-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "@if (menu().length) {\n <div class=\"toggle\" (click)=\"toggle($event)\">\n @let icons = ['ngf-icon', open() ? 'close' : 'menu'];\n <i [className]=\"icons.join(' ')\"></i>\n </div>\n}\n\n<div class=\"wrapper\" [class.open]=\"open()\">\n @if (menu().length) {\n <ul class=\"menu\">\n @for (item of menu(); track $index) {\n <li>\n @if (item.isExternal) {\n <a [href]=\"item.href\" [attr.target]=\"target(item)\">\n @if (item.icon) {\n <div class=\"icon\">\n <i [className]=\"item.icon\"></i>\n </div>\n }\n\n <div class=\"text\">{{ item.text }}</div>\n </a>\n } @else {\n <a [routerLink]=\"item.href\" [attr.target]=\"target(item)\">\n @if (item.icon) {\n <div class=\"icon\">\n <i [className]=\"item.icon\"></i>\n </div>\n }\n\n <div class=\"text\">{{ item.text }}</div>\n </a>\n }\n </li>\n }\n </ul>\n }\n</div>\n", styles: [":host{display:flex;flex-direction:row;justify-content:end;container:main/inline-size scroll-state!important;align-self:stretch;--border: 1px solid #DDD}:host .toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;border-left:var(--border)!important;border-right:var(--border)!important;padding:0 10px;cursor:pointer}@container main (min-width: 576px){:host .toggle{display:none}}:host .wrapper{display:none;position:relative}:host .wrapper.open{display:block}@container main (min-width: 576px){:host .wrapper{display:block}}:host .wrapper>.menu{display:block;position:absolute;inset:100% 0 auto auto;box-shadow:0 3px 3px #00000080;background-color:#fff;list-style:none;height:auto;padding:0;margin:0}@container main (min-width: 576px){:host .wrapper>.menu{display:flex;flex-direction:row;align-items:center;justify-content:end;position:static;background-color:transparent;box-shadow:none;height:100%;inset:auto;gap:15px}}:host .wrapper>.menu>li{display:block;padding:0;margin:0}:host .wrapper>.menu>li>a{display:flex;flex-direction:row;align-items:center;text-decoration:none!important;padding:7px 20px;gap:5px}@container main (min-width: 576px){:host .wrapper>.menu>li>a{padding:0}}:host .wrapper>.menu>li>a>.icon{display:block}:host .wrapper>.menu>li>a>.icon>*{font-size:1.2em}:host .wrapper>.menu>li>a>.text{display:block;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
|
|
1055
1067
|
}
|
|
1056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrameHeaderMenu, decorators: [{
|
|
1057
1069
|
type: Component,
|
|
1058
1070
|
args: [{ selector: 'ngf-frame-header-menu', imports: [RouterLink], host: {
|
|
1059
1071
|
'(document:click)': 'onDocumentClick($event)',
|
|
@@ -1119,10 +1131,10 @@ class NgFluxFrame {
|
|
|
1119
1131
|
return;
|
|
1120
1132
|
this.drawer.set(false);
|
|
1121
1133
|
}
|
|
1122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1123
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1134
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFrame, isStandalone: true, selector: "ngf-frame", inputs: { viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.viewport": "viewport()" } }, viewQueries: [{ propertyName: "leftRef", first: true, predicate: ["left"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame\">\n <!-- BEGIN: Frame Header -->\n <div class=\"frame-header\">\n @if (image()) {\n <img [src]=\"image()\" alt=\"\" class=\"image\">\n } @else if (icon()) {\n <div class=\"icon\">\n <i [className]=\"icon()\"></i>\n </div>\n }\n\n @if (title()) {<h1>{{ title() }}</h1>}\n\n <ngf-frame-header-menu [menu]=\"headerMenu()\" />\n </div>\n <!-- END: Frame Header -->\n\n <div class=\"frame-body\">\n <!-- BEGIN: Left Sidebar -->\n <div #left class=\"frame-body-left\" [class.drawer]=\"drawer()\">\n <div class=\"btn-row\">\n <div class=\"close-btn\" (click)=\"closeDrawer($event)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n </div>\n\n <div class=\"search-form\">\n <input type=\"text\" placeholder=\"Search menu\" [(ngModel)]=\"search\">\n\n @if (search()) {\n <div class=\"clear\" (click)=\"search.set('')\">\n <i class=\"ngf-icon close\"></i>\n </div>\n }\n </div>\n\n <div class=\"menu-pane\">\n <ngf-frame-side-menu [menu]=\"sideMenu()\" />\n </div>\n </div>\n <!-- END: Left Sidebar -->\n\n <div class=\"frame-body-overlay\" [class.drawer]=\"drawer()\"></div>\n\n <!-- BEGIN: Right Sidebar -->\n <div class=\"frame-body-right\" [class.drawer]=\"drawer()\">\n <div class=\"frame-toolbar\">\n <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n <i class=\"ngf-icon menu\"></i>\n </div>\n\n <div class=\"spacer\"></div>\n\n <!--\n <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n -->\n </div>\n\n <div class=\"frame-content\">\n <ng-content></ng-content>\n </div>\n </div>\n <!-- END: Right Sidebar -->\n </div>\n</div>\n", styles: [":host{display:block;border:var(--border)!important;font-size:1rem;color:#333;--border: 1px solid #CCC;--left-width: 100%}:host .frame{display:block;position:relative;container:frame/inline-size;overflow:hidden}:host .frame-header{display:flex;flex-direction:row;box-shadow:0 0 5px #00000080;background-color:#fff;align-items:center;position:relative;padding:0 20px;height:40px;z-index:20;gap:15px}:host .frame-header>.image{display:block;object-position:center;object-fit:cover;aspect-ratio:1;height:80%}:host .frame-header>.icon{display:block}:host .frame-header>.icon>*{font-size:1.5em}:host .frame-header>h1{display:block;font-size:1.1em;font-weight:600;color:inherit;margin:0}:host .frame-header>ngf-frame-header-menu{flex:1 0 0}:host .frame-body{display:flex;flex-direction:row;position:relative;min-height:100px}@container frame (min-width: 375px){:host .frame-body{--left-width: 200px}}@container frame (min-width: 992px){:host .frame-body{--left-width: 250px}}:host .frame-body-left{display:flex;flex-direction:column;position:relative;width:var(--left-width)!important;box-shadow:0 0 5px #00000080;margin-left:calc(var(--left-width) * -1);transition:all .3s ease-in-out;background-color:#fff;z-index:15}:host .frame-body-left.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-left{margin-left:0}}:host .frame-body-left .btn-row{display:flex;flex-direction:row;align-items:center;justify-content:end;border-bottom:var(--border)!important;padding:2px}@container frame (min-width: 375px){:host .frame-body-left .btn-row{display:none}}:host .frame-body-left .btn-row .close-btn{display:block;cursor:pointer;padding:0 3px}:host .frame-body-left .search-form{display:block;position:relative;border-bottom:var(--border)!important;padding:10px}:host .frame-body-left .search-form>input{display:block;background-color:#fff;border:var(--border)!important;border-radius:3px;padding:10px;width:100%}:host .frame-body-left .search-form>input:focus{outline:var(--border)!important;box-shadow:none}:host .frame-body-left .search-form>.clear{display:block;position:absolute;inset:50% 20px auto auto;transform:translateY(-50%);cursor:pointer;z-index:5}:host .frame-body-left .menu-pane{display:block;flex:1 1 auto;overflow:hidden auto}:host .frame-body-overlay{display:none;position:absolute;inset:0;background-color:#0003;z-index:10}:host .frame-body-overlay.drawer{display:block}@container frame (min-width: 768px){:host .frame-body-overlay{display:none}}:host .frame-body-right{display:flex;flex-direction:column;background-color:#eee;transition:all .3s ease-in-out;margin-right:0;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-right:calc(var(--left-width) * -1)}@container frame (min-width: 768px){:host .frame-body-right{margin-right:0}}:host .frame-toolbar{display:flex;flex-direction:row;border-bottom:var(--border)!important;background-color:#fff;height:30px}:host .frame-toolbar>.spacer{display:block;flex:1 0 0;width:0px}:host .frame-toolbar>.drawer-btn{display:block;position:relative;border-right:var(--border)!important;cursor:pointer;width:30px}@container frame (min-width: 768px){:host .frame-toolbar>.drawer-btn{display:none}}:host .frame-toolbar>.drawer-btn>.ngf-icon{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:1em}:host .frame-content{display:block;flex:1 1 auto;overflow:hidden auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxFrameHeaderMenu, selector: "ngf-frame-header-menu", inputs: ["menu"] }, { kind: "component", type: NgFluxFrameSideMenu, selector: "ngf-frame-side-menu", inputs: ["menu"] }] });
|
|
1124
1136
|
}
|
|
1125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFrame, decorators: [{
|
|
1126
1138
|
type: Component,
|
|
1127
1139
|
args: [{ selector: 'ngf-frame', imports: [
|
|
1128
1140
|
FormsModule,
|
|
@@ -1134,6 +1146,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
1134
1146
|
}, template: "<div class=\"frame\">\n <!-- BEGIN: Frame Header -->\n <div class=\"frame-header\">\n @if (image()) {\n <img [src]=\"image()\" alt=\"\" class=\"image\">\n } @else if (icon()) {\n <div class=\"icon\">\n <i [className]=\"icon()\"></i>\n </div>\n }\n\n @if (title()) {<h1>{{ title() }}</h1>}\n\n <ngf-frame-header-menu [menu]=\"headerMenu()\" />\n </div>\n <!-- END: Frame Header -->\n\n <div class=\"frame-body\">\n <!-- BEGIN: Left Sidebar -->\n <div #left class=\"frame-body-left\" [class.drawer]=\"drawer()\">\n <div class=\"btn-row\">\n <div class=\"close-btn\" (click)=\"closeDrawer($event)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n </div>\n\n <div class=\"search-form\">\n <input type=\"text\" placeholder=\"Search menu\" [(ngModel)]=\"search\">\n\n @if (search()) {\n <div class=\"clear\" (click)=\"search.set('')\">\n <i class=\"ngf-icon close\"></i>\n </div>\n }\n </div>\n\n <div class=\"menu-pane\">\n <ngf-frame-side-menu [menu]=\"sideMenu()\" />\n </div>\n </div>\n <!-- END: Left Sidebar -->\n\n <div class=\"frame-body-overlay\" [class.drawer]=\"drawer()\"></div>\n\n <!-- BEGIN: Right Sidebar -->\n <div class=\"frame-body-right\" [class.drawer]=\"drawer()\">\n <div class=\"frame-toolbar\">\n <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n <i class=\"ngf-icon menu\"></i>\n </div>\n\n <div class=\"spacer\"></div>\n\n <!--\n <div class=\"drawer-btn\" (click)=\"toggleDrawer($event)\">\n <i class=\"ngf-icon close\"></i>\n </div>\n -->\n </div>\n\n <div class=\"frame-content\">\n <ng-content></ng-content>\n </div>\n </div>\n <!-- END: Right Sidebar -->\n </div>\n</div>\n", styles: [":host{display:block;border:var(--border)!important;font-size:1rem;color:#333;--border: 1px solid #CCC;--left-width: 100%}:host .frame{display:block;position:relative;container:frame/inline-size;overflow:hidden}:host .frame-header{display:flex;flex-direction:row;box-shadow:0 0 5px #00000080;background-color:#fff;align-items:center;position:relative;padding:0 20px;height:40px;z-index:20;gap:15px}:host .frame-header>.image{display:block;object-position:center;object-fit:cover;aspect-ratio:1;height:80%}:host .frame-header>.icon{display:block}:host .frame-header>.icon>*{font-size:1.5em}:host .frame-header>h1{display:block;font-size:1.1em;font-weight:600;color:inherit;margin:0}:host .frame-header>ngf-frame-header-menu{flex:1 0 0}:host .frame-body{display:flex;flex-direction:row;position:relative;min-height:100px}@container frame (min-width: 375px){:host .frame-body{--left-width: 200px}}@container frame (min-width: 992px){:host .frame-body{--left-width: 250px}}:host .frame-body-left{display:flex;flex-direction:column;position:relative;width:var(--left-width)!important;box-shadow:0 0 5px #00000080;margin-left:calc(var(--left-width) * -1);transition:all .3s ease-in-out;background-color:#fff;z-index:15}:host .frame-body-left.drawer{margin-left:0}@container frame (min-width: 768px){:host .frame-body-left{margin-left:0}}:host .frame-body-left .btn-row{display:flex;flex-direction:row;align-items:center;justify-content:end;border-bottom:var(--border)!important;padding:2px}@container frame (min-width: 375px){:host .frame-body-left .btn-row{display:none}}:host .frame-body-left .btn-row .close-btn{display:block;cursor:pointer;padding:0 3px}:host .frame-body-left .search-form{display:block;position:relative;border-bottom:var(--border)!important;padding:10px}:host .frame-body-left .search-form>input{display:block;background-color:#fff;border:var(--border)!important;border-radius:3px;padding:10px;width:100%}:host .frame-body-left .search-form>input:focus{outline:var(--border)!important;box-shadow:none}:host .frame-body-left .search-form>.clear{display:block;position:absolute;inset:50% 20px auto auto;transform:translateY(-50%);cursor:pointer;z-index:5}:host .frame-body-left .menu-pane{display:block;flex:1 1 auto;overflow:hidden auto}:host .frame-body-overlay{display:none;position:absolute;inset:0;background-color:#0003;z-index:10}:host .frame-body-overlay.drawer{display:block}@container frame (min-width: 768px){:host .frame-body-overlay{display:none}}:host .frame-body-right{display:flex;flex-direction:column;background-color:#eee;transition:all .3s ease-in-out;margin-right:0;flex:1 0 0;width:0px}:host .frame-body-right.drawer{margin-right:calc(var(--left-width) * -1)}@container frame (min-width: 768px){:host .frame-body-right{margin-right:0}}:host .frame-toolbar{display:flex;flex-direction:row;border-bottom:var(--border)!important;background-color:#fff;height:30px}:host .frame-toolbar>.spacer{display:block;flex:1 0 0;width:0px}:host .frame-toolbar>.drawer-btn{display:block;position:relative;border-right:var(--border)!important;cursor:pointer;width:30px}@container frame (min-width: 768px){:host .frame-toolbar>.drawer-btn{display:none}}:host .frame-toolbar>.drawer-btn>.ngf-icon{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:1em}:host .frame-content{display:block;flex:1 1 auto;overflow:hidden auto}\n"] }]
|
|
1135
1147
|
}], 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 }] }] } });
|
|
1136
1148
|
|
|
1149
|
+
class NgFluxFormMessage {
|
|
1150
|
+
field = input.required(/* @ts-ignore */
|
|
1151
|
+
...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
|
|
1152
|
+
pending = input('Please wait...', /* @ts-ignore */
|
|
1153
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
1154
|
+
fieldState = computed(() => {
|
|
1155
|
+
const field = this.field();
|
|
1156
|
+
return field();
|
|
1157
|
+
}, /* @ts-ignore */
|
|
1158
|
+
...(ngDevMode ? [{ debugName: "fieldState" }] : /* istanbul ignore next */ []));
|
|
1159
|
+
validate = computed(() => {
|
|
1160
|
+
const state = this.fieldState();
|
|
1161
|
+
return state.dirty() || state.touched(); // || state.submitting();
|
|
1162
|
+
}, /* @ts-ignore */
|
|
1163
|
+
...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
|
|
1164
|
+
show = computed(() => {
|
|
1165
|
+
const state = this.fieldState();
|
|
1166
|
+
const validate = this.validate();
|
|
1167
|
+
return validate && state.invalid();
|
|
1168
|
+
}, /* @ts-ignore */
|
|
1169
|
+
...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
|
|
1170
|
+
errorMessage = computed(() => {
|
|
1171
|
+
const errors = this.fieldState().errors();
|
|
1172
|
+
return errors.at(0)?.message ?? '';
|
|
1173
|
+
}, /* @ts-ignore */
|
|
1174
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFormMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxFormMessage, isStandalone: true, selector: "ngf-form-message", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "show()" } }, ngImport: i0, template: "@if (fieldState().pending()) {\n <div class=\"pending\">{{ pending() }}</div>\n} @else if (errorMessage(); as msg) {\n <div class=\"error\">{{ msg }}</div>\n}\n", styles: [":host{display:none;font-size:.8em}:host.show{display:block}:host>.pending{display:block;color:#666}:host>.error{display:block;color:red}\n"] });
|
|
1177
|
+
}
|
|
1178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxFormMessage, decorators: [{
|
|
1179
|
+
type: Component,
|
|
1180
|
+
args: [{ selector: 'ngf-form-message', imports: [], host: {
|
|
1181
|
+
'[class.show]': 'show()',
|
|
1182
|
+
}, template: "@if (fieldState().pending()) {\n <div class=\"pending\">{{ pending() }}</div>\n} @else if (errorMessage(); as msg) {\n <div class=\"error\">{{ msg }}</div>\n}\n", styles: [":host{display:none;font-size:.8em}:host.show{display:block}:host>.pending{display:block;color:#666}:host>.error{display:block;color:red}\n"] }]
|
|
1183
|
+
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }] } });
|
|
1184
|
+
|
|
1137
1185
|
class NgFluxLoadingInternal {
|
|
1138
1186
|
config = inject(NGF_CONFIG);
|
|
1139
1187
|
appRef = inject(ApplicationRef);
|
|
@@ -1165,10 +1213,10 @@ class NgFluxLoadingInternal {
|
|
|
1165
1213
|
router.events.pipe(navError).subscribe(nav => root.stop());
|
|
1166
1214
|
}
|
|
1167
1215
|
}
|
|
1168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1169
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
1216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1217
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, providedIn: 'root' });
|
|
1170
1218
|
}
|
|
1171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoadingInternal, decorators: [{
|
|
1172
1220
|
type: Injectable,
|
|
1173
1221
|
args: [{ providedIn: 'root' }]
|
|
1174
1222
|
}], ctorParameters: () => [] });
|
|
@@ -1182,10 +1230,10 @@ class NgFluxLoading {
|
|
|
1182
1230
|
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
1183
1231
|
start = (text = '') => this.root.start(text);
|
|
1184
1232
|
stop = () => this.root.stop();
|
|
1185
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1186
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
1233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoading, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1234
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoading, providedIn: 'root' });
|
|
1187
1235
|
}
|
|
1188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxLoading, decorators: [{
|
|
1189
1237
|
type: Injectable,
|
|
1190
1238
|
args: [{ providedIn: 'root' }]
|
|
1191
1239
|
}] });
|
|
@@ -1214,24 +1262,23 @@ class NgFluxDialogComponent {
|
|
|
1214
1262
|
nativeElement.tabIndex = -1;
|
|
1215
1263
|
nativeElement.classList.add('ngf-dialog-box');
|
|
1216
1264
|
nativeElement.focus();
|
|
1217
|
-
nativeElement.addEventListener('click', this.onComponentClick);
|
|
1218
1265
|
nativeElement.addEventListener('animationend', this.onAnimationComplete);
|
|
1219
1266
|
onCleanup(() => {
|
|
1220
|
-
nativeElement.removeEventListener('click', this.onComponentClick);
|
|
1221
1267
|
nativeElement.removeEventListener('animationend', this.onAnimationComplete);
|
|
1222
1268
|
});
|
|
1223
1269
|
});
|
|
1224
1270
|
}
|
|
1225
1271
|
onBackdropClick(e) {
|
|
1226
|
-
const { instance } = this;
|
|
1272
|
+
const { instance, componentRef } = this;
|
|
1273
|
+
const { nativeElement: comp } = componentRef.location;
|
|
1274
|
+
const target = e.target;
|
|
1275
|
+
if (target && comp.contains(target))
|
|
1276
|
+
return;
|
|
1227
1277
|
instance.send({
|
|
1228
1278
|
name: 'backdrop.close',
|
|
1229
1279
|
value: false,
|
|
1230
1280
|
});
|
|
1231
1281
|
}
|
|
1232
|
-
onComponentClick = (e) => {
|
|
1233
|
-
e.stopPropagation();
|
|
1234
|
-
};
|
|
1235
1282
|
onAnimationComplete = (e) => {
|
|
1236
1283
|
switch (e.animationName) {
|
|
1237
1284
|
case 'ngfDialogOpen':
|
|
@@ -1254,16 +1301,15 @@ class NgFluxDialogComponent {
|
|
|
1254
1301
|
const ref = this.componentRef.location;
|
|
1255
1302
|
ref.nativeElement.classList.add('close');
|
|
1256
1303
|
}
|
|
1257
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.
|
|
1304
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: NgFluxDialogComponent, isStandalone: true, selector: "ngf-dialog", host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper\">\n <div class=\"content\">\n <ng-template #container></ng-template>\n </div>\n</div>\n", styles: [":host{display:block;position:fixed;background-color:var(--ngf-dialog-backdrop-color)!important;visibility:visible!important;z-index:var(--ngf-dialog-z-index)!important;inset:0}:host>.wrapper{display:block;width:100%!important;height:100%!important;overflow:hidden auto}:host>.wrapper>.content{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:100%;min-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1259
1306
|
}
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialogComponent, decorators: [{
|
|
1261
1308
|
type: Component,
|
|
1262
|
-
args: [{ selector: 'ngf-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [],
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
}] } });
|
|
1309
|
+
args: [{ selector: 'ngf-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [], host: {
|
|
1310
|
+
'(click)': 'onBackdropClick($event)',
|
|
1311
|
+
}, 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"] }]
|
|
1312
|
+
}], ctorParameters: () => [], propDecorators: { viewContainer: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
1267
1313
|
|
|
1268
1314
|
class NgFluxDialogRef {
|
|
1269
1315
|
onClosed;
|
|
@@ -1384,10 +1430,10 @@ class NgFluxAlertDialog {
|
|
|
1384
1430
|
dialogRef.close();
|
|
1385
1431
|
}
|
|
1386
1432
|
}
|
|
1387
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1433
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxAlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxAlertDialog, isStandalone: true, selector: "ngf-dialog-box-alert", ngImport: i0, template: "@if (options.title) {\n <ngf-dialog-header>\n <h1 ngf-dialog-title>{{ options.title }}</h1>\n </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n @for (btn of buttons(); track $index) {\n @switch (btn) {\n @case ('flex') {<div ngf-flex-x></div>}\n\n @default {\n <ngf-button [theme]=\"btn.theme\" [size]=\"btn.size\" [direction]=\"btn.direction\" (click)=\"onButtonClick($event, btn)\">\n <span>{{ btn.text }}</span>\n </ngf-button>\n }\n }\n }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}:host .success{color:var(--ngf-success)}:host .error{color:var(--ngf-error)}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }] });
|
|
1389
1435
|
}
|
|
1390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxAlertDialog, decorators: [{
|
|
1391
1437
|
type: Component,
|
|
1392
1438
|
args: [{ selector: 'ngf-dialog-box-alert', imports: [
|
|
1393
1439
|
NgFluxButton,
|
|
@@ -1422,10 +1468,10 @@ class NgFluxConfirmDialog {
|
|
|
1422
1468
|
onButtonClick(e, btn) {
|
|
1423
1469
|
btn.onClick?.call(null, e, btn, this.dialogRef);
|
|
1424
1470
|
}
|
|
1425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1471
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxConfirmDialog, isStandalone: true, selector: "ngf-dialog-box-confirm", ngImport: i0, template: "@if (options.title) {\n <ngf-dialog-header>\n <h1 ngf-dialog-title>{{ options.title }}</h1>\n </ngf-dialog-header>\n}\n\n<ngf-dialog-body>\n <div [innerHTML]=\"options.content\"></div>\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n @for (btn of buttons(); track $index) {\n <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\">\n <span>{{ btn.text }}</span>\n </ngf-button>\n }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:500px;background-color:#fff}\n"], dependencies: [{ kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
|
|
1427
1473
|
}
|
|
1428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxConfirmDialog, decorators: [{
|
|
1429
1475
|
type: Component,
|
|
1430
1476
|
args: [{ selector: 'ngf-dialog-box-confirm', imports: [
|
|
1431
1477
|
NgFluxButton,
|
|
@@ -1466,10 +1512,10 @@ class NgFluxPromptDialog {
|
|
|
1466
1512
|
onButtonClick(e, btn) {
|
|
1467
1513
|
btn.onClick?.call(null, e, btn, this.dialogRef);
|
|
1468
1514
|
}
|
|
1469
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1515
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: NgFluxPromptDialog, isStandalone: true, selector: "ngf-dialog-box-prompt", ngImport: i0, template: "<ngf-dialog-header>\n <h1 ngf-dialog-title>{{ options.title }}</h1>\n</ngf-dialog-header>\n\n<ngf-dialog-body>\n <div class=\"content\" [innerHTML]=\"options.content\"></div>\n <input type=\"text\" name=\"text\" [placeholder]=\"options.placeholder\" [(ngModel)]=\"text\">\n</ngf-dialog-body>\n\n<ngf-dialog-footer>\n @for (btn of buttons(); track $index) {\n <ngf-button [theme]=\"btn.theme\" (click)=\"onButtonClick($event, btn)\" [disabled]=\"btn.disabled?.() ?? false\">\n <span>{{ btn.text }}</span>\n </ngf-button>\n }\n</ngf-dialog-footer>\n", styles: [":host{display:block;width:90%;max-width:350px;background-color:#fff}:host .content{margin:0 0 10px}:host input{display:block;width:100%!important;border:1px solid #DDD;background-color:#fff;padding:10px 15px;font-size:1.2rem}:host input:focus{outline:2px solid #DDD;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgFluxButton, selector: "ngf-button", inputs: ["icon", "theme", "type", "size", "direction", "block", "disabled"] }, { kind: "component", type: NgFluxDialogHeader, selector: "ngf-dialog-header", inputs: ["icon"] }, { kind: "component", type: NgFluxDialogFooter, selector: "ngf-dialog-footer" }, { kind: "component", type: NgFluxDialogBody, selector: "ngf-dialog-body" }] });
|
|
1471
1517
|
}
|
|
1472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxPromptDialog, decorators: [{
|
|
1473
1519
|
type: Component,
|
|
1474
1520
|
args: [{ selector: 'ngf-dialog-box-prompt', imports: [
|
|
1475
1521
|
FormsModule,
|
|
@@ -1508,11 +1554,11 @@ class NgFluxDialog {
|
|
|
1508
1554
|
return dialog.closed;
|
|
1509
1555
|
}
|
|
1510
1556
|
success(data) {
|
|
1511
|
-
data.content = `<div class="success">${data.content}</div>`;
|
|
1557
|
+
data.content = `<div class="ngf-dialog-success">${data.content}</div>`;
|
|
1512
1558
|
return this.alert(data);
|
|
1513
1559
|
}
|
|
1514
1560
|
error(data) {
|
|
1515
|
-
data.content = `<div class="error">${data.content}</div>`;
|
|
1561
|
+
data.content = `<div class="ngf-dialog-error">${data.content}</div>`;
|
|
1516
1562
|
return this.alert(data);
|
|
1517
1563
|
}
|
|
1518
1564
|
confirm(data) {
|
|
@@ -1533,10 +1579,10 @@ class NgFluxDialog {
|
|
|
1533
1579
|
});
|
|
1534
1580
|
return dialog.closed;
|
|
1535
1581
|
}
|
|
1536
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1537
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
1582
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1583
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, providedIn: 'root' });
|
|
1538
1584
|
}
|
|
1539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: NgFluxDialog, decorators: [{
|
|
1540
1586
|
type: Injectable,
|
|
1541
1587
|
args: [{ providedIn: 'root' }]
|
|
1542
1588
|
}] });
|
|
@@ -1567,6 +1613,51 @@ const provideNgFlux = (config) => {
|
|
|
1567
1613
|
]);
|
|
1568
1614
|
};
|
|
1569
1615
|
|
|
1616
|
+
var NgFlux;
|
|
1617
|
+
(function (NgFlux) {
|
|
1618
|
+
var SerialGuard;
|
|
1619
|
+
(function (SerialGuard) {
|
|
1620
|
+
function run(guards, callback) {
|
|
1621
|
+
let result = of(true);
|
|
1622
|
+
for (let guard of guards) {
|
|
1623
|
+
result = result.pipe(switchMap(resp => {
|
|
1624
|
+
if (resp !== true)
|
|
1625
|
+
return of(resp);
|
|
1626
|
+
const output = callback(guard);
|
|
1627
|
+
if (output instanceof Observable)
|
|
1628
|
+
return output;
|
|
1629
|
+
if (output instanceof Promise)
|
|
1630
|
+
return from(output);
|
|
1631
|
+
return of(output);
|
|
1632
|
+
}));
|
|
1633
|
+
}
|
|
1634
|
+
return result;
|
|
1635
|
+
}
|
|
1636
|
+
function canActivateFn(...guards) {
|
|
1637
|
+
return (route, state) => {
|
|
1638
|
+
return run(guards, guard => guard(route, state));
|
|
1639
|
+
};
|
|
1640
|
+
}
|
|
1641
|
+
SerialGuard.canActivateFn = canActivateFn;
|
|
1642
|
+
function canActivateChildFn(...guards) {
|
|
1643
|
+
return canActivateFn(...guards);
|
|
1644
|
+
}
|
|
1645
|
+
SerialGuard.canActivateChildFn = canActivateChildFn;
|
|
1646
|
+
function canDeactivateFn(...guards) {
|
|
1647
|
+
return (component, currentRoute, currentState, nextState) => {
|
|
1648
|
+
return run(guards, guard => guard(component, currentRoute, currentState, nextState));
|
|
1649
|
+
};
|
|
1650
|
+
}
|
|
1651
|
+
SerialGuard.canDeactivateFn = canDeactivateFn;
|
|
1652
|
+
function canMatchFn(...guards) {
|
|
1653
|
+
return (route, segments, currentSnapshot) => {
|
|
1654
|
+
return run(guards, guard => guard(route, segments, currentSnapshot));
|
|
1655
|
+
};
|
|
1656
|
+
}
|
|
1657
|
+
SerialGuard.canMatchFn = canMatchFn;
|
|
1658
|
+
})(SerialGuard = NgFlux.SerialGuard || (NgFlux.SerialGuard = {}));
|
|
1659
|
+
})(NgFlux || (NgFlux = {}));
|
|
1660
|
+
|
|
1570
1661
|
/*
|
|
1571
1662
|
* Public API Surface of ngflux
|
|
1572
1663
|
*/
|
|
@@ -1575,5 +1666,5 @@ const provideNgFlux = (config) => {
|
|
|
1575
1666
|
* Generated bundle index. Do not edit.
|
|
1576
1667
|
*/
|
|
1577
1668
|
|
|
1578
|
-
export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
|
|
1669
|
+
export { NGF_CONFIG, NGF_DIALOG_DATA, NgFlux, NgFluxActions, NgFluxButton, NgFluxDialog, NgFluxDialogBody, NgFluxDialogFooter, NgFluxDialogHeader, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxFormMessage, NgFluxFrame, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxPinInput, NgFluxSelect, NgFluxTab, NgFluxTabContentDirective, NgFluxTabGroup, NgFluxTabNavDirective, NgFluxTabNavbar, NgFluxTabPanel, provideNgFlux };
|
|
1579
1670
|
//# sourceMappingURL=ngflux-ngflux.mjs.map
|