@bcgov/nr-ngx-component-lib 0.0.8 → 0.0.9
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/components/cell-content/cell-content.component.d.ts +2 -1
- package/components/expansion-panel/expansion-panel.component.d.ts +4 -3
- package/components/filter-container/filter-container.component.d.ts +2 -1
- package/components/filter-date/filter-date.component.d.ts +2 -1
- package/components/filter-search/filter-search.component.d.ts +2 -1
- package/components/filter-select/filter-select.component.d.ts +2 -1
- package/components/filters-panel/filters-panel.component.d.ts +2 -1
- package/components/form-field/form-field.component.d.ts +2 -1
- package/components/form-layout/form-layout.component.d.ts +2 -1
- package/components/gap/gap.component.d.ts +2 -1
- package/components/icon/icon.component.d.ts +2 -1
- package/components/page-container/page-container.component.d.ts +2 -1
- package/components/page-header/page-header.component.d.ts +2 -1
- package/components/row-list-desktop/row-list-desktop.component.d.ts +2 -1
- package/components/row-list-mobile/row-list-mobile.component.d.ts +2 -1
- package/components/row-list-pagination/row-list-pagination.component.d.ts +2 -1
- package/components/row-list-sorting/row-list-sorting.component.d.ts +2 -1
- package/components/snackbar/snackbar.component.d.ts +2 -1
- package/directives/configuration-subscriber.base.d.ts +2 -1
- package/directives/nrcl.base.d.ts +9 -0
- package/directives/row-list.base.d.ts +2 -1
- package/esm2022/components/button/button.component.mjs +2 -2
- package/esm2022/components/cell-content/cell-content.component.mjs +6 -4
- package/esm2022/components/expansion-panel/expansion-panel.component.mjs +13 -10
- package/esm2022/components/filter-container/filter-container.component.mjs +6 -4
- package/esm2022/components/filter-date/filter-date.component.mjs +6 -4
- package/esm2022/components/filter-search/filter-search.component.mjs +6 -4
- package/esm2022/components/filter-select/filter-select.component.mjs +6 -4
- package/esm2022/components/filters-panel/filters-panel.component.mjs +6 -4
- package/esm2022/components/form-field/form-field.component.mjs +6 -4
- package/esm2022/components/form-layout/form-layout.component.mjs +5 -4
- package/esm2022/components/gap/gap.component.mjs +6 -4
- package/esm2022/components/icon/icon.component.mjs +6 -4
- package/esm2022/components/page-container/page-container.component.mjs +5 -4
- package/esm2022/components/page-header/page-header.component.mjs +6 -4
- package/esm2022/components/row-list-desktop/row-list-desktop.component.mjs +5 -4
- package/esm2022/components/row-list-mobile/row-list-mobile.component.mjs +5 -4
- package/esm2022/components/row-list-pagination/row-list-pagination.component.mjs +6 -4
- package/esm2022/components/row-list-sorting/row-list-sorting.component.mjs +6 -4
- package/esm2022/components/snackbar/snackbar.component.mjs +5 -3
- package/esm2022/directives/configuration-subscriber.base.mjs +7 -4
- package/esm2022/directives/nrcl.base.mjs +20 -0
- package/esm2022/directives/row-list.base.mjs +5 -3
- package/esm2022/nr-ngx-component-lib.module.mjs +5 -12
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs +107 -77
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/nr-ngx-component-lib.module.d.ts +0 -5
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject,
|
|
2
|
+
import { Injectable, inject, ElementRef, Directive, HostBinding, ChangeDetectorRef, Component, EventEmitter, NgZone, booleanAttribute, Input, Output, ContentChild, ChangeDetectionStrategy, ViewChild, ViewContainerRef, numberAttribute, Renderer2, HostListener, Inject, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, fromEvent } from 'rxjs';
|
|
4
4
|
import * as i1$1 from '@angular/material/core';
|
|
5
5
|
import { MatRippleModule } from '@angular/material/core';
|
|
6
6
|
import * as i2 from '@angular/material/tooltip';
|
|
7
7
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
8
|
-
import * as i2$4 from '@angular/platform-browser';
|
|
9
8
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
10
9
|
import * as i1 from '@angular/material/icon';
|
|
11
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -83,12 +82,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
83
82
|
}]
|
|
84
83
|
}], ctorParameters: () => [] });
|
|
85
84
|
|
|
86
|
-
class
|
|
85
|
+
class NrclBase {
|
|
87
86
|
constructor() {
|
|
87
|
+
this.elementRef = inject(ElementRef);
|
|
88
|
+
}
|
|
89
|
+
ngOnInit() {
|
|
90
|
+
const tagName = this.elementRef.nativeElement.tagName;
|
|
91
|
+
this.elementClass = `nrcl ${tagName.toLowerCase()}`;
|
|
92
|
+
}
|
|
93
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrclBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
94
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: NrclBase, host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
|
|
95
|
+
}
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrclBase, decorators: [{
|
|
97
|
+
type: Directive
|
|
98
|
+
}], propDecorators: { elementClass: [{
|
|
99
|
+
type: HostBinding,
|
|
100
|
+
args: ['class']
|
|
101
|
+
}] } });
|
|
102
|
+
|
|
103
|
+
class ConfigurationSubscriberBase extends NrclBase {
|
|
104
|
+
constructor() {
|
|
105
|
+
super(...arguments);
|
|
88
106
|
this.configurationService = inject(ConfigurationService);
|
|
89
107
|
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
90
108
|
}
|
|
91
109
|
ngOnInit() {
|
|
110
|
+
super.ngOnInit();
|
|
92
111
|
this.configurationSubscription = this.configurationService.configurationObservable.subscribe((c) => {
|
|
93
112
|
this.configuration = c;
|
|
94
113
|
this.onConfigurationChange();
|
|
@@ -101,15 +120,16 @@ class ConfigurationSubscriberBase {
|
|
|
101
120
|
this.configurationSubscription.unsubscribe();
|
|
102
121
|
}
|
|
103
122
|
onConfigurationChange() { }
|
|
104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationSubscriberBase, deps:
|
|
105
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConfigurationSubscriberBase, ngImport: i0 }); }
|
|
123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationSubscriberBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
124
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConfigurationSubscriberBase, usesInheritance: true, ngImport: i0 }); }
|
|
106
125
|
}
|
|
107
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationSubscriberBase, decorators: [{
|
|
108
127
|
type: Directive
|
|
109
128
|
}] });
|
|
110
129
|
|
|
111
|
-
class IconComponent {
|
|
130
|
+
class IconComponent extends NrclBase {
|
|
112
131
|
constructor() {
|
|
132
|
+
super(...arguments);
|
|
113
133
|
this.elementRef = inject(ElementRef);
|
|
114
134
|
this.domSanitizer = inject(DomSanitizer);
|
|
115
135
|
}
|
|
@@ -118,8 +138,8 @@ class IconComponent {
|
|
|
118
138
|
if (ICON[this.name])
|
|
119
139
|
this.svg = this.domSanitizer.bypassSecurityTrustHtml(ICON[this.name]);
|
|
120
140
|
}
|
|
121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps:
|
|
122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg" } }, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: [":host{display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-svg .mat-icon{display:none}:host.show-svg .svg{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg" } }, usesInheritance: true, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: [":host{display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-svg .mat-icon{display:none}:host.show-svg .svg{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
123
143
|
}
|
|
124
144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
|
|
125
145
|
type: Component,
|
|
@@ -190,7 +210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
190
210
|
'[class.compact]': 'isCompact',
|
|
191
211
|
'[class.icon-left]': '!isCompact && icon',
|
|
192
212
|
'[class.icon-right]': '!isCompact && iconRight && label',
|
|
193
|
-
'[class.label]': 'label'
|
|
213
|
+
'[class.label]': 'label',
|
|
194
214
|
}, template: "<button \n matRipple\n (click)=\"onClick( $event )\"\n [disabled]=\"disabled\"\n [matTooltip]=\"tooltip\"\n>\n @if ( icon || iconRight || iconCompact || label ) {\n @if ( icon && ( !isCompact || !iconCompact ) ) { \n <nrcl-icon class=\"left\">{{ icon }}</nrcl-icon> \n }\n\n @if ( !isCompact && iconRight && label ) { \n <nrcl-icon class=\"right\">{{ iconRight }}</nrcl-icon> \n }\n\n @if ( isCompact && iconCompact ) { \n <nrcl-icon class=\"compact\">{{ iconCompact }}</nrcl-icon> \n }\n\n @if ( label ) {\n <span class=\"label\">{{ label }}</span> \n }\n }\n @else {\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n }\n</button>\n", styles: ["::ng-deep :root{--nrcl-button-height: 36px;--nrcl-compact-button-height: 44px;--nrcl-button-foreground-color: black;--nrcl-button-background-color: white;--nrcl-button-border-color: #003366;--nrcl-button-hover-background-color: #f5f5f5;--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-outline-foreground-color: black;--nrcl-button-outline-background-color: transparent;--nrcl-button-outline-border-color: rgba(0, 0, 0, .12);--nrcl-button-outline-hover-background-color: rgba(0, 0, 0, .04);--nrcl-button-disabled-foreground-color: #7E7E7E;--nrcl-button-disabled-background-color: #CCCCCC;--nrcl-button-disabled-border-color: #CCCCCC;--nrcl-button-disabled-hover-background-color: #CCCCCC}:host button{height:var(--nrcl-button-height);cursor:pointer;margin:0;padding:0;display:flex;align-items:center;position:relative;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host button .label,:host button .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);white-space:nowrap;font-weight:500}:host button:hover{background-color:var(--nrcl-button-hover-background-color)}:host button .content{padding-left:16px;padding-right:16px;display:flex;align-items:center}:host.label button{padding-left:16px;padding-right:16px}:host.icon-left button{padding-left:var(--nrcl-button-height)}:host.icon-left button .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-icon.left{position:absolute;left:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.icon-right button{padding-right:var(--nrcl-button-height)}:host.icon-right button .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-icon.right{position:absolute;right:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.primary button{background-color:var(--nrcl-button-primary-background-color);color:var(--nrcl-button-primary-foreground-color);border-color:var(--nrcl-button-primary-border-color)}:host.primary button:hover{background-color:var(--nrcl-button-primary-hover-background-color)}:host.outline button{background-color:var(--nrcl-button-outline-background-color);color:var(--nrcl-button-outline-foreground-color);border-color:var(--nrcl-button-outline-border-color);box-shadow:none}:host.outline button:hover{background-color:var(--nrcl-button-outline-hover-background-color)}:host.compact button{height:var(--nrcl-compact-button-height);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;box-shadow:none;background-color:transparent;color:var(--nrcl-button-foreground-color)}:host.compact button:hover{background-color:var(--nrcl-button-hover-background-color)}:host.compact button .label{line-height:20px;font-size:var(--nrcl-font-size-small)}:host.disabled button{background-color:var(--nrcl-button-disabled-background-color);color:var(--nrcl-button-disabled-foreground-color);border-color:var(--nrcl-button-disabled-border-color)}:host.disabled button:hover{background-color:var(--nrcl-button-disabled-hover-background-color)}\n"] }]
|
|
195
215
|
}], propDecorators: { label: [{
|
|
196
216
|
type: Input
|
|
@@ -217,8 +237,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
217
237
|
type: Output
|
|
218
238
|
}] } });
|
|
219
239
|
|
|
220
|
-
class CellContentComponent {
|
|
240
|
+
class CellContentComponent extends NrclBase {
|
|
221
241
|
constructor() {
|
|
242
|
+
super(...arguments);
|
|
222
243
|
this.elementRef = inject(ElementRef);
|
|
223
244
|
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
224
245
|
}
|
|
@@ -236,8 +257,8 @@ class CellContentComponent {
|
|
|
236
257
|
this.changeDetectorRef.detectChanges();
|
|
237
258
|
});
|
|
238
259
|
}
|
|
239
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, deps:
|
|
240
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, usesInheritance: true, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
241
262
|
}
|
|
242
263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, decorators: [{
|
|
243
264
|
type: Component,
|
|
@@ -311,15 +332,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
311
332
|
args: [MobileViewDirective]
|
|
312
333
|
}] } });
|
|
313
334
|
|
|
314
|
-
class ExpansionPanelComponent {
|
|
335
|
+
class ExpansionPanelComponent extends NrclBase {
|
|
315
336
|
constructor() {
|
|
337
|
+
super(...arguments);
|
|
316
338
|
this.isLoading = false;
|
|
317
339
|
this.disabled = false;
|
|
318
340
|
this.expanded = false;
|
|
319
341
|
this.expandedChange = new EventEmitter();
|
|
320
342
|
}
|
|
321
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps:
|
|
322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, selector: "nrcl-expansion-panel", inputs: { isLoading: "isLoading", disabled: "disabled", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-loading": "isLoading", "class.expanded": "matExpansionPanel?.expanded", "class.disabled": "disabled" } }, viewQueries: [{ propertyName: "matExpansionPanel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<mat-expansion-panel #panel \n togglePosition=\"before\"\n [expanded]=\"expanded\" \n [disabled]=\"disabled\" \n (opened)=\"expandedChange.emit( true )\" \n (closed)=\"expandedChange.emit( false )\" \n>\n <mat-expansion-panel-header>\n <mat-panel-description>\n <ng-content select=\"nrcl-expansion-panel-header\"></ng-content>\n\n @if ( isLoading ) {\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"nrcl-expansion-panel-footer\"></ng-content>\n</mat-expansion-panel>", styles: [":host mat-expansion-panel>.mat-expansion-panel-header{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);height:unset;min-height:50px;border-bottom:1px solid #c6c8cb;border-bottom-left-radius:0;border-bottom-right-radius:0;font-family:var(--nrcl-font-family);align-items:flex-start}:host mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-expansion-indicator{align-self:center;padding-bottom:4px}:host mat-expansion-panel>.mat-expansion-panel-header.mat-expanded>::ng-deep .mat-expansion-indicator{padding-bottom:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description{position:relative;margin-right:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description .loading{position:absolute;top:10px;right:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{padding:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body .body{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}:host.is-loading .mat-expansion-panel>.mat-expansion-panel-header ::ng-deep nrcl-expansion-panel-header .right-side{visibility:hidden}:host.disabled .mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-content{margin-left:0}\n"], dependencies: [{ kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
344
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, selector: "nrcl-expansion-panel", inputs: { isLoading: "isLoading", disabled: "disabled", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-loading": "isLoading", "class.expanded": "matExpansionPanel?.expanded", "class.disabled": "disabled" } }, viewQueries: [{ propertyName: "matExpansionPanel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel #panel \n togglePosition=\"before\"\n [expanded]=\"expanded\" \n [disabled]=\"disabled\" \n (opened)=\"expandedChange.emit( true )\" \n (closed)=\"expandedChange.emit( false )\" \n>\n <mat-expansion-panel-header>\n <mat-panel-description>\n <ng-content select=\"nrcl-expansion-panel-header\"></ng-content>\n\n @if ( isLoading ) {\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n\n <ng-content select=\"nrcl-expansion-panel-footer\"></ng-content>\n</mat-expansion-panel>", styles: [":host mat-expansion-panel>.mat-expansion-panel-header{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);height:unset;min-height:50px;border-bottom:1px solid #c6c8cb;border-bottom-left-radius:0;border-bottom-right-radius:0;font-family:var(--nrcl-font-family);align-items:flex-start}:host mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-expansion-indicator{align-self:center;padding-bottom:4px}:host mat-expansion-panel>.mat-expansion-panel-header.mat-expanded>::ng-deep .mat-expansion-indicator{padding-bottom:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description{position:relative;margin-right:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description .loading{position:absolute;top:10px;right:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{padding:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body .body{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}:host.is-loading .mat-expansion-panel>.mat-expansion-panel-header ::ng-deep nrcl-expansion-panel-header .right-side{visibility:hidden}:host.disabled .mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-content{margin-left:0}\n"], dependencies: [{ kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
323
345
|
}
|
|
324
346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
|
|
325
347
|
type: Component,
|
|
@@ -340,9 +362,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
340
362
|
type: ViewChild,
|
|
341
363
|
args: ['panel']
|
|
342
364
|
}] } });
|
|
343
|
-
class ExpansionPanelHeaderComponent {
|
|
344
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelHeaderComponent, deps:
|
|
345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExpansionPanelHeaderComponent, selector: "nrcl-expansion-panel-header", ngImport: i0, template: `
|
|
365
|
+
class ExpansionPanelHeaderComponent extends NrclBase {
|
|
366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
367
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExpansionPanelHeaderComponent, selector: "nrcl-expansion-panel-header", usesInheritance: true, ngImport: i0, template: `
|
|
346
368
|
<div class="left-side">
|
|
347
369
|
<ng-content select="[left-side],h2,h3"></ng-content>
|
|
348
370
|
</div>
|
|
@@ -364,15 +386,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
364
386
|
</div>
|
|
365
387
|
`, styles: [":host{display:flex;color:#212121;width:100%}.left-side{display:flex;flex-direction:column;padding:10px 0;align-self:flex-start}.left-side ::ng-deep h2{font-size:var( --nrcl-font-size-h2);font-weight:200;padding:0;margin:0}.left-side ::ng-deep h3{font-size:var( --nrcl-font-size-h3 );font-weight:200;padding:0;margin:0}.right-side{flex-grow:1;display:flex;justify-content:flex-end;align-self:center}\n"] }]
|
|
366
388
|
}] });
|
|
367
|
-
class ExpansionPanelFooterComponent {
|
|
389
|
+
class ExpansionPanelFooterComponent extends NrclBase {
|
|
368
390
|
constructor() {
|
|
391
|
+
super(...arguments);
|
|
369
392
|
this.warningMessage = 'Unsaved Changes';
|
|
370
393
|
this.showWarning = false;
|
|
371
394
|
this.saveClick = new EventEmitter();
|
|
372
395
|
this.cancelClick = new EventEmitter();
|
|
373
396
|
}
|
|
374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelFooterComponent, deps:
|
|
375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelFooterComponent, selector: "nrcl-expansion-panel-footer", inputs: { saveEnabled: "saveEnabled", cancelEnabled: "cancelEnabled", warningMessage: "warningMessage", showWarning: "showWarning" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0, template: `
|
|
397
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelFooterComponent, selector: "nrcl-expansion-panel-footer", inputs: { saveEnabled: "saveEnabled", cancelEnabled: "cancelEnabled", warningMessage: "warningMessage", showWarning: "showWarning" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, usesInheritance: true, ngImport: i0, template: `
|
|
376
399
|
@if ( showWarning ) {
|
|
377
400
|
<div class="warning">
|
|
378
401
|
<nrcl-icon>warning</nrcl-icon>
|
|
@@ -449,12 +472,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
449
472
|
type: Output
|
|
450
473
|
}] } });
|
|
451
474
|
|
|
452
|
-
class FilterContainerComponent {
|
|
475
|
+
class FilterContainerComponent extends NrclBase {
|
|
453
476
|
constructor() {
|
|
477
|
+
super(...arguments);
|
|
454
478
|
this.label = '[label]';
|
|
455
479
|
}
|
|
456
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, deps:
|
|
457
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<mat-form-field\n floatLabel=\"always\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input matInput>\n\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-container-width: var( --nrcl-filter-width-default );--nrcl-filter-container-height: var( --nrcl-filter-height-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent,:host ::ng-deep mat-selection-list .mat-mdc-list-option{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox{padding-left:0;padding-right:0}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background{left:0;border:1px solid #c6c8cb}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{background-color:#fff}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__ripple{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}:host ::ng-deep .table-search-header .search-and-filters .field.filter-checkbox-group .checkbox-group{gap:15px}:host ::ng-deep .mat-mdc-radio-button.mat-accent{--mdc-radio-selected-focus-icon-color: #003366;--mdc-radio-selected-hover-icon-color: #003366;--mdc-radio-selected-icon-color: #003366;--mdc-radio-selected-pressed-icon-color: #003366;--mat-mdc-radio-checked-ripple-color: #003366}:host ::ng-deep .mat-mdc-radio-button.mat-accent .mdc-form-field .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:#fff}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix>input{display:none}:host .content{display:flex;gap:var(--nrcl-gutter-space);align-items:center;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host .content ::ng-deep .mdc-checkbox{padding:0}:host .content ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:0}:host .content ::ng-deep .mat-mdc-radio-group{display:flex;gap:var(--nrcl-gutter-space)}:host .content ::ng-deep .mat-mdc-radio-group .mdc-radio{padding:0}\n"], dependencies: [{ kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: { label: "label", hint: "hint" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n floatLabel=\"always\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input matInput>\n\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-container-width: var( --nrcl-filter-width-default );--nrcl-filter-container-height: var( --nrcl-filter-height-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent,:host ::ng-deep mat-selection-list .mat-mdc-list-option{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox{padding-left:0;padding-right:0}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background{left:0;border:1px solid #c6c8cb}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{background-color:#fff}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__ripple{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}:host ::ng-deep .table-search-header .search-and-filters .field.filter-checkbox-group .checkbox-group{gap:15px}:host ::ng-deep .mat-mdc-radio-button.mat-accent{--mdc-radio-selected-focus-icon-color: #003366;--mdc-radio-selected-hover-icon-color: #003366;--mdc-radio-selected-icon-color: #003366;--mdc-radio-selected-pressed-icon-color: #003366;--mat-mdc-radio-checked-ripple-color: #003366}:host ::ng-deep .mat-mdc-radio-button.mat-accent .mdc-form-field .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:#fff}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix>input{display:none}:host .content{display:flex;gap:var(--nrcl-gutter-space);align-items:center;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host .content ::ng-deep .mdc-checkbox{padding:0}:host .content ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:0}:host .content ::ng-deep .mat-mdc-radio-group{display:flex;gap:var(--nrcl-gutter-space)}:host .content ::ng-deep .mat-mdc-radio-group .mdc-radio{padding:0}\n"], dependencies: [{ kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
458
482
|
}
|
|
459
483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, decorators: [{
|
|
460
484
|
type: Component,
|
|
@@ -480,8 +504,9 @@ const DATE_FORMATS = {
|
|
|
480
504
|
API_TIMESTAMP_WITH_SEP: 'Y-MM-DDTHH:mm:ss'
|
|
481
505
|
};
|
|
482
506
|
|
|
483
|
-
class FilterDateComponent {
|
|
507
|
+
class FilterDateComponent extends NrclBase {
|
|
484
508
|
constructor() {
|
|
509
|
+
super(...arguments);
|
|
485
510
|
this.label = '[label]]';
|
|
486
511
|
this.placeholder = 'Select...';
|
|
487
512
|
this.value = moment().format(DATE_FORMATS.datePickerInput);
|
|
@@ -495,8 +520,8 @@ class FilterDateComponent {
|
|
|
495
520
|
let date = ev.format(DATE_FORMATS.datePickerInput);
|
|
496
521
|
this.valueChange.emit(date);
|
|
497
522
|
}
|
|
498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, deps:
|
|
499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterDateComponent, selector: "nrcl-filter-date", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field\n floatLabel=\"auto\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input matInput class=\"search-input\" \n [ngModel]=\"value\" \n (ngModelChange)=\"onDateChange( $event )\"\n [placeholder]=\"placeholder\"\n [owlDateTime]=\"selectedDateDT\" \n maxlength=\"10\" \n appWFDateMask\n >\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <button class=\"select-date\"\n [owlDateTimeTrigger]=\"selectedDateDT\" \n aria-label=\"Open Select Date Picker\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>event</nrcl-icon>\n </button>\n</mat-form-field>\n\n<owl-date-time #selectedDateDT pickerType=\"calendar\"></owl-date-time>\n", styles: ["::ng-deep :root{--nrcl-filter-date-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default))}:host .select-date{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
523
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterDateComponent, selector: "nrcl-filter-date", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n floatLabel=\"auto\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input matInput class=\"search-input\" \n [ngModel]=\"value\" \n (ngModelChange)=\"onDateChange( $event )\"\n [placeholder]=\"placeholder\"\n [owlDateTime]=\"selectedDateDT\" \n maxlength=\"10\" \n appWFDateMask\n >\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <button class=\"select-date\"\n [owlDateTimeTrigger]=\"selectedDateDT\" \n aria-label=\"Open Select Date Picker\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>event</nrcl-icon>\n </button>\n</mat-form-field>\n\n<owl-date-time #selectedDateDT pickerType=\"calendar\"></owl-date-time>\n", styles: ["::ng-deep :root{--nrcl-filter-date-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default))}:host .select-date{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
500
525
|
}
|
|
501
526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, decorators: [{
|
|
502
527
|
type: Component,
|
|
@@ -513,8 +538,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
513
538
|
type: Output
|
|
514
539
|
}] } });
|
|
515
540
|
|
|
516
|
-
class FilterSearchComponent {
|
|
541
|
+
class FilterSearchComponent extends NrclBase {
|
|
517
542
|
constructor() {
|
|
543
|
+
super(...arguments);
|
|
518
544
|
this.label = 'Search';
|
|
519
545
|
this.placeholder = 'Search...';
|
|
520
546
|
this.valueChange = new EventEmitter();
|
|
@@ -536,8 +562,8 @@ class FilterSearchComponent {
|
|
|
536
562
|
focus() {
|
|
537
563
|
this.inputEl.nativeElement.focus();
|
|
538
564
|
}
|
|
539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, deps:
|
|
540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSearchComponent, selector: "nrcl-filter-search", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<mat-form-field\n floatLabel=\"auto\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input class=\"search-input\" #input\n matInput\n [value]=\"value || ''\"\n (input)=\"onInput( $event )\"\n [placeholder]=\"placeholder\"\n >\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n @if ( value ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n } \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: calc( var( --nrcl-filter-width-default ) * 2 + 8px )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px))}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSearchComponent, selector: "nrcl-filter-search", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n floatLabel=\"auto\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n <mat-label>{{ label }}</mat-label>\n\n <input class=\"search-input\" #input\n matInput\n [value]=\"value || ''\"\n (input)=\"onInput( $event )\"\n [placeholder]=\"placeholder\"\n >\n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n @if ( value ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n } \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: calc( var( --nrcl-filter-width-default ) * 2 + 8px )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px))}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
541
567
|
}
|
|
542
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, decorators: [{
|
|
543
569
|
type: Component,
|
|
@@ -568,8 +594,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
568
594
|
* - Tooltips for long descriptions
|
|
569
595
|
* - Summary display of selected items
|
|
570
596
|
*/
|
|
571
|
-
class FilterSelectComponent {
|
|
597
|
+
class FilterSelectComponent extends NrclBase {
|
|
572
598
|
constructor() {
|
|
599
|
+
super(...arguments);
|
|
573
600
|
this.placeholder = 'Filter...';
|
|
574
601
|
this.selectMax = 0;
|
|
575
602
|
this.tooltips = true;
|
|
@@ -777,8 +804,8 @@ class FilterSelectComponent {
|
|
|
777
804
|
descriptionForCode(code) {
|
|
778
805
|
return this.options.find(o => o.code == code)?.description;
|
|
779
806
|
}
|
|
780
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps:
|
|
781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
782
809
|
}
|
|
783
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
784
811
|
type: Component,
|
|
@@ -826,8 +853,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
826
853
|
args: ['overlayTemplate']
|
|
827
854
|
}] } });
|
|
828
855
|
|
|
829
|
-
class FiltersPanelComponent {
|
|
856
|
+
class FiltersPanelComponent extends NrclBase {
|
|
830
857
|
constructor() {
|
|
858
|
+
super(...arguments);
|
|
831
859
|
this.showClear = true;
|
|
832
860
|
this.showFilters = true;
|
|
833
861
|
this.hasAdvancedFilters = false;
|
|
@@ -855,8 +883,8 @@ class FiltersPanelComponent {
|
|
|
855
883
|
this.showAdvancedFilters = true;
|
|
856
884
|
this.showAdvancedFiltersChange.emit(true);
|
|
857
885
|
}
|
|
858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FiltersPanelComponent, deps:
|
|
859
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: { showClear: "showClear", showFilters: "showFilters", hasAdvancedFilters: "hasAdvancedFilters", showAdvancedFilters: "showAdvancedFilters" }, outputs: { clearFilters: "clearFilters", showFiltersChange: "showFiltersChange", showAdvancedFiltersChange: "showAdvancedFiltersChange" }, host: { properties: { "class.hide-filters": "!showFilters" } }, ngImport: i0, template: "@if ( showFilters ) {\n <ng-content></ng-content>\n}\n\n@if ( showFilters && hasAdvancedFilters && showAdvancedFilters ) {\n <ng-content select=\"[advanced]\"></ng-content>\n}\n\n<div class=\"actions\">\n @if ( showClear && showFilters ) {\n <nrcl-button outline \n label=\"Clear\"\n icon=\"clear-filters\"\n (click)=\"onClearClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n\n @if ( showFilters && hasAdvancedFilters ) {\n @if ( showAdvancedFilters ) {\n <nrcl-button outline \n label=\"Less Filters\"\n icon=\"remove\"\n (click)=\"onHideAdvancedClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n @else {\n <nrcl-button outline \n label=\"More Filters\"\n icon=\"add\"\n (click)=\"onShowAdvancedClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n }\n\n <nrcl-device-view>\n <ng-template mobile-view>\n @if ( showFilters ) {\n <nrcl-button outline \n label=\"Hide Filters\"\n icon=\"expand_less\"\n (click)=\"onHideClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n @else {\n <nrcl-button outline \n label=\"Show Filters\"\n icon=\"expand_more\"\n (click)=\"onShowClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n </ng-template>\n </nrcl-device-view>\n</div>\n", styles: [":host{display:flex;flex-flow:row wrap;gap:8px;position:relative;border:1px solid #c6c8cb;padding:8px;background-color:#f2f2f2}:host .actions{flex-grow:1;flex-direction:row-reverse;justify-content:space-between;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions nrcl-button{--nrcl-button-height: 40px}:host .actions .spacer{flex-grow:1}:host.hide-filters .actions{flex-direction:row}:host-context(.nrcl-device-mobile) :host{display:grid;grid-template-columns:1fr 1fr}:host-context(.nrcl-device-mobile) :host .actions{grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-search{--nrcl-filter-search-width: auto;grid-row:1;grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-select{--nrcl-filter-select-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-date{--nrcl-filter-date-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-container{--nrcl-filter-container-width: auto}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
886
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FiltersPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
887
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: { showClear: "showClear", showFilters: "showFilters", hasAdvancedFilters: "hasAdvancedFilters", showAdvancedFilters: "showAdvancedFilters" }, outputs: { clearFilters: "clearFilters", showFiltersChange: "showFiltersChange", showAdvancedFiltersChange: "showAdvancedFiltersChange" }, host: { properties: { "class.hide-filters": "!showFilters" } }, usesInheritance: true, ngImport: i0, template: "@if ( showFilters ) {\n <ng-content></ng-content>\n}\n\n@if ( showFilters && hasAdvancedFilters && showAdvancedFilters ) {\n <ng-content select=\"[advanced]\"></ng-content>\n}\n\n<div class=\"actions\">\n @if ( showClear && showFilters ) {\n <nrcl-button outline \n label=\"Clear\"\n icon=\"clear-filters\"\n (click)=\"onClearClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n\n @if ( showFilters && hasAdvancedFilters ) {\n @if ( showAdvancedFilters ) {\n <nrcl-button outline \n label=\"Less Filters\"\n icon=\"remove\"\n (click)=\"onHideAdvancedClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n @else {\n <nrcl-button outline \n label=\"More Filters\"\n icon=\"add\"\n (click)=\"onShowAdvancedClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n }\n\n <nrcl-device-view>\n <ng-template mobile-view>\n @if ( showFilters ) {\n <nrcl-button outline \n label=\"Hide Filters\"\n icon=\"expand_less\"\n (click)=\"onHideClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n @else {\n <nrcl-button outline \n label=\"Show Filters\"\n icon=\"expand_more\"\n (click)=\"onShowClick()\"\n compact=\"mobile\"\n ></nrcl-button>\n }\n </ng-template>\n </nrcl-device-view>\n</div>\n", styles: [":host{display:flex;flex-flow:row wrap;gap:8px;position:relative;border:1px solid #c6c8cb;padding:8px;background-color:#f2f2f2}:host .actions{flex-grow:1;flex-direction:row-reverse;justify-content:space-between;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions nrcl-button{--nrcl-button-height: 40px}:host .actions .spacer{flex-grow:1}:host.hide-filters .actions{flex-direction:row}:host-context(.nrcl-device-mobile) :host{display:grid;grid-template-columns:1fr 1fr}:host-context(.nrcl-device-mobile) :host .actions{grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-search{--nrcl-filter-search-width: auto;grid-row:1;grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-select{--nrcl-filter-select-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-date{--nrcl-filter-date-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-container{--nrcl-filter-container-width: auto}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
860
888
|
}
|
|
861
889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FiltersPanelComponent, decorators: [{
|
|
862
890
|
type: Component,
|
|
@@ -879,8 +907,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
879
907
|
type: Output
|
|
880
908
|
}] } });
|
|
881
909
|
|
|
882
|
-
class FormFieldComponent {
|
|
910
|
+
class FormFieldComponent extends NrclBase {
|
|
883
911
|
constructor() {
|
|
912
|
+
super(...arguments);
|
|
884
913
|
this.element = inject(ElementRef);
|
|
885
914
|
this.renderer = inject(Renderer2);
|
|
886
915
|
}
|
|
@@ -894,8 +923,8 @@ class FormFieldComponent {
|
|
|
894
923
|
}
|
|
895
924
|
}
|
|
896
925
|
}
|
|
897
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, deps:
|
|
898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: FormFieldComponent, selector: "nrcl-form-field", inputs: { required: ["required", "required", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { properties: { "class.required": "required", "class.readonly": "readonly" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host ::ng-deep .mat-mdc-form-field{width:100%;font-family:var(--nrcl-font-family)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:0;padding-right:0;background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{font-size:var(--nrcl-font-size);padding-bottom:2px;line-height:20px;min-height:50px;width:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-form-field-required-marker{display:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding:0}:host.required ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mdc-floating-label :after{color:red;content:\" *\"}:host.readonly ::ng-deep .mat-mdc-form-field{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field [readonly=true]{color:#0000008c;cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before{border-style:dashed;border-width:1px;border-color:#00000021}:host.readonly ::ng-deep .mat-mdc-form-field mat-error{display:none}:host.readonly ::ng-deep .mat-mdc-form-field input,:host.readonly ::ng-deep .mat-mdc-form-field textarea{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .select-read-only-cursor{cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: FormFieldComponent, selector: "nrcl-form-field", inputs: { required: ["required", "required", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { properties: { "class.required": "required", "class.readonly": "readonly" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host ::ng-deep .mat-mdc-form-field{width:100%;font-family:var(--nrcl-font-family)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:0;padding-right:0;background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{font-size:var(--nrcl-font-size);padding-bottom:2px;line-height:20px;min-height:50px;width:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-form-field-required-marker{display:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding:0}:host.required ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mdc-floating-label :after{color:red;content:\" *\"}:host.readonly ::ng-deep .mat-mdc-form-field{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field [readonly=true]{color:#0000008c;cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before{border-style:dashed;border-width:1px;border-color:#00000021}:host.readonly ::ng-deep .mat-mdc-form-field mat-error{display:none}:host.readonly ::ng-deep .mat-mdc-form-field input,:host.readonly ::ng-deep .mat-mdc-form-field textarea{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .select-read-only-cursor{cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
899
928
|
}
|
|
900
929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
901
930
|
type: Component,
|
|
@@ -980,22 +1009,23 @@ function makeFormFieldNotReadonly(renderer, formFieldEl) {
|
|
|
980
1009
|
}
|
|
981
1010
|
}
|
|
982
1011
|
|
|
983
|
-
class FormLayoutComponent {
|
|
984
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormLayoutComponent, deps:
|
|
985
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormLayoutComponent, selector: "nrcl-form-layout", ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host{display:grid;gap:var(--nrcl-gutter-space);grid-template-columns:repeat(var(--nrcl-form-layout-columns),1fr)}:host>::ng-deep [layoutwidth=\"2\"]{grid-column:span 2}:host>::ng-deep [layoutwidth=full]{grid-column:span var(--nrcl-form-layout-columns)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1012
|
+
class FormLayoutComponent extends NrclBase {
|
|
1013
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormLayoutComponent, selector: "nrcl-form-layout", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host{display:grid;gap:var(--nrcl-gutter-space);grid-template-columns:repeat(var(--nrcl-form-layout-columns),1fr)}:host>::ng-deep [layoutwidth=\"2\"]{grid-column:span 2}:host>::ng-deep [layoutwidth=full]{grid-column:span var(--nrcl-form-layout-columns)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
986
1015
|
}
|
|
987
1016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormLayoutComponent, decorators: [{
|
|
988
1017
|
type: Component,
|
|
989
1018
|
args: [{ selector: "nrcl-form-layout", template: "<ng-content></ng-content>", changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;gap:var(--nrcl-gutter-space);grid-template-columns:repeat(var(--nrcl-form-layout-columns),1fr)}:host>::ng-deep [layoutwidth=\"2\"]{grid-column:span 2}:host>::ng-deep [layoutwidth=full]{grid-column:span var(--nrcl-form-layout-columns)}\n"] }]
|
|
990
1019
|
}] });
|
|
991
1020
|
|
|
992
|
-
class GapComponent {
|
|
1021
|
+
class GapComponent extends NrclBase {
|
|
993
1022
|
constructor() {
|
|
1023
|
+
super(...arguments);
|
|
994
1024
|
this.horizontal = false;
|
|
995
1025
|
this.vertical = false;
|
|
996
1026
|
}
|
|
997
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GapComponent, deps:
|
|
998
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: GapComponent, selector: "nrcl-gap", inputs: { horizontal: ["horizontal", "horizontal", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}:host[horizontal]{width:var(--nrcl-gutter-space)}:host[vertical]{height:var(--nrcl-gutter-space)}\n"] }); }
|
|
1027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GapComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: GapComponent, selector: "nrcl-gap", inputs: { horizontal: ["horizontal", "horizontal", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}:host[horizontal]{width:var(--nrcl-gutter-space)}:host[vertical]{height:var(--nrcl-gutter-space)}\n"] }); }
|
|
999
1029
|
}
|
|
1000
1030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GapComponent, decorators: [{
|
|
1001
1031
|
type: Component,
|
|
@@ -1078,7 +1108,7 @@ class ObservableAborter {
|
|
|
1078
1108
|
}
|
|
1079
1109
|
}
|
|
1080
1110
|
|
|
1081
|
-
class RowListBase {
|
|
1111
|
+
class RowListBase extends NrclBase {
|
|
1082
1112
|
get isLoading() { return this._isLoading; }
|
|
1083
1113
|
set isLoading(v) {
|
|
1084
1114
|
if (v == this._isLoading)
|
|
@@ -1087,6 +1117,7 @@ class RowListBase {
|
|
|
1087
1117
|
this.isLoadingChange.emit(v);
|
|
1088
1118
|
}
|
|
1089
1119
|
constructor() {
|
|
1120
|
+
super();
|
|
1090
1121
|
this.isLoadingChange = new EventEmitter();
|
|
1091
1122
|
this._isLoading = false;
|
|
1092
1123
|
this.rows = [];
|
|
@@ -1205,7 +1236,7 @@ class RowListBase {
|
|
|
1205
1236
|
this.pageStateService.setPageState(this.constructor, state);
|
|
1206
1237
|
}
|
|
1207
1238
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1208
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowListBase, outputs: { isLoadingChange: "isLoadingChange" }, ngImport: i0 }); }
|
|
1239
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowListBase, outputs: { isLoadingChange: "isLoadingChange" }, usesInheritance: true, ngImport: i0 }); }
|
|
1209
1240
|
}
|
|
1210
1241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, decorators: [{
|
|
1211
1242
|
type: Directive
|
|
@@ -1224,26 +1255,27 @@ function makeSummary(rowCount, pageNumber, pageSize) {
|
|
|
1224
1255
|
}
|
|
1225
1256
|
}
|
|
1226
1257
|
|
|
1227
|
-
class RowListDesktopComponent {
|
|
1228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps:
|
|
1229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1258
|
+
class RowListDesktopComponent extends NrclBase {
|
|
1259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1230
1261
|
}
|
|
1231
1262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, decorators: [{
|
|
1232
1263
|
type: Component,
|
|
1233
1264
|
args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"] }]
|
|
1234
1265
|
}] });
|
|
1235
1266
|
|
|
1236
|
-
class RowListMobileComponent {
|
|
1237
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps:
|
|
1238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListMobileComponent, selector: "nrcl-row-list-mobile", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1267
|
+
class RowListMobileComponent extends NrclBase {
|
|
1268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1269
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListMobileComponent, selector: "nrcl-row-list-mobile", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1239
1270
|
}
|
|
1240
1271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, decorators: [{
|
|
1241
1272
|
type: Component,
|
|
1242
1273
|
args: [{ selector: "nrcl-row-list-mobile", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"] }]
|
|
1243
1274
|
}] });
|
|
1244
1275
|
|
|
1245
|
-
class RowListPaginationComponent {
|
|
1276
|
+
class RowListPaginationComponent extends NrclBase {
|
|
1246
1277
|
constructor() {
|
|
1278
|
+
super(...arguments);
|
|
1247
1279
|
this.paginationId = '1';
|
|
1248
1280
|
this.pageSizeOptions = [
|
|
1249
1281
|
{ code: 5, description: '5 Rows' },
|
|
@@ -1313,8 +1345,8 @@ class RowListPaginationComponent {
|
|
|
1313
1345
|
get hasRows() {
|
|
1314
1346
|
return this.rowCount;
|
|
1315
1347
|
}
|
|
1316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps:
|
|
1317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n <div class=\"pagination\">\n <pagination-controls \n [id]=\"paginationId\" \n [maxSize]=\"paginationMaxSize\"\n [responsive]=\"false\"\n [directionLinks]=\"true\"\n previousLabel=\"\"\n nextLabel=\"\"\n [autoHide]=\"false\"\n (pageChange)=\"onPageNumberChange( $event )\"\n ></pagination-controls>\n </div>\n}\n\n@if ( hasRows && showPageSize ) {\n <nrcl-filter-select class=\"page-size\"\n label=\"Page Size\"\n [value]=\"[ pageSize ]\"\n [options]=\"pageSizeOptions\"\n (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n selectMax=\"1\"\n [clear]=\"false\"\n [filter]=\"false\"\n placeholder=\"Select...\"\n ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, usesInheritance: true, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n <div class=\"pagination\">\n <pagination-controls \n [id]=\"paginationId\" \n [maxSize]=\"paginationMaxSize\"\n [responsive]=\"false\"\n [directionLinks]=\"true\"\n previousLabel=\"\"\n nextLabel=\"\"\n [autoHide]=\"false\"\n (pageChange)=\"onPageNumberChange( $event )\"\n ></pagination-controls>\n </div>\n}\n\n@if ( hasRows && showPageSize ) {\n <nrcl-filter-select class=\"page-size\"\n label=\"Page Size\"\n [value]=\"[ pageSize ]\"\n [options]=\"pageSizeOptions\"\n (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n selectMax=\"1\"\n [clear]=\"false\"\n [filter]=\"false\"\n placeholder=\"Select...\"\n ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1318
1350
|
}
|
|
1319
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1320
1352
|
type: Component,
|
|
@@ -1462,21 +1494,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1462
1494
|
type: Input
|
|
1463
1495
|
}] } });
|
|
1464
1496
|
|
|
1465
|
-
class PageContainerComponent {
|
|
1466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, deps:
|
|
1467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageContainerComponent, selector: "nrcl-page-container", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1497
|
+
class PageContainerComponent extends NrclBase {
|
|
1498
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageContainerComponent, selector: "nrcl-page-container", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1468
1500
|
}
|
|
1469
1501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, decorators: [{
|
|
1470
1502
|
type: Component,
|
|
1471
1503
|
args: [{ selector: "nrcl-page-container", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"] }]
|
|
1472
1504
|
}] });
|
|
1473
1505
|
|
|
1474
|
-
class PageHeaderComponent {
|
|
1506
|
+
class PageHeaderComponent extends NrclBase {
|
|
1475
1507
|
constructor() {
|
|
1508
|
+
super(...arguments);
|
|
1476
1509
|
this.isLoading = false;
|
|
1477
1510
|
}
|
|
1478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps:
|
|
1479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, ngImport: i0, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1512
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1480
1513
|
}
|
|
1481
1514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1482
1515
|
type: Component,
|
|
@@ -1512,8 +1545,9 @@ function mapToCodeDescription(list, codeField, descriptionField) {
|
|
|
1512
1545
|
});
|
|
1513
1546
|
}
|
|
1514
1547
|
|
|
1515
|
-
class RowListSortingComponent {
|
|
1548
|
+
class RowListSortingComponent extends NrclBase {
|
|
1516
1549
|
constructor() {
|
|
1550
|
+
super(...arguments);
|
|
1517
1551
|
this.sortColumnOptions = [];
|
|
1518
1552
|
this.sortDirection = 'asc';
|
|
1519
1553
|
this.sortChange = new EventEmitter();
|
|
@@ -1533,8 +1567,8 @@ class RowListSortingComponent {
|
|
|
1533
1567
|
direction: this.sortDirection
|
|
1534
1568
|
});
|
|
1535
1569
|
}
|
|
1536
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps:
|
|
1537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }] }); }
|
|
1570
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, usesInheritance: true, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }] }); }
|
|
1538
1572
|
}
|
|
1539
1573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1540
1574
|
type: Component,
|
|
@@ -1549,8 +1583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1549
1583
|
type: Output
|
|
1550
1584
|
}] } });
|
|
1551
1585
|
|
|
1552
|
-
class SnackbarComponent {
|
|
1586
|
+
class SnackbarComponent extends NrclBase {
|
|
1553
1587
|
constructor(snackBarRef, config) {
|
|
1588
|
+
super();
|
|
1554
1589
|
this.snackBarRef = snackBarRef;
|
|
1555
1590
|
this.config = config;
|
|
1556
1591
|
}
|
|
@@ -1558,7 +1593,7 @@ class SnackbarComponent {
|
|
|
1558
1593
|
return 'snackbar-type-' + this.config.type;
|
|
1559
1594
|
}
|
|
1560
1595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SnackbarComponent, selector: "nrcl-snackbar", host: { properties: { "class": "className" } }, ngImport: i0, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <nrcl-icon>check_circle</nrcl-icon>\n }\n @case ( 'error' ) {\n <nrcl-icon>cancel</nrcl-icon>\n }\n @case ( 'info' ) {\n <nrcl-icon>info</nrcl-icon>\n }\n @case ( 'update' ) {\n <nrcl-icon>error</nrcl-icon>\n }\n }\n</div>\n\n<div class=\"message\">\n <span>{{ config.message }}</span>\n</div>\n\n<div class=\"button\">\n <button (click)=\"snackBarRef.dismissWithAction()\">Close</button>\n</div>\n", styles: ["::ng-deep :root{--nrcl-snackbar-success-background-color: #2E7940;--nrcl-snackbar-error-background-color: #D8292F;--nrcl-snackbar-info-background-color: #37474f;--nrcl-snackbar-update-background-color: #37474f;--nrcl-snackbar-update-button-color: #f9ca81}:host{display:flex;align-items:stretch;height:100%;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word;background-color:var(--snackbar-background-color)}:host.snackbar-type-success{--snackbar-background-color: var(--nrcl-snackbar-success-background-color )}:host.snackbar-type-error{--snackbar-background-color: var(--nrcl-snackbar-error-background-color )}:host.snackbar-type-info{--snackbar-background-color: var( --nrcl-snackbar-info-background-color )}:host.snackbar-type-update{--snackbar-background-color: var( --nrcl-snackbar-update-background-color );--snackbar-button-color: var( --nrcl-snackbar-update-button-color )}:host .icon{display:flex;background-color:#f2f2f2;align-items:center;justify-content:center;pointer-events:none}:host .icon nrcl-icon{padding:var(--nrcl-gutter-space);color:var(--snackbar-background-color)}:host .message{padding:var(--nrcl-gutter-space);flex:1;cursor:default;pointer-events:none}:host .button{padding-right:8px;display:flex;align-items:center;justify-content:center}:host .button button{padding:calc(var(--nrcl-gutter-space) / 2);border:1px white solid;border-radius:5px;color:#fff;cursor:pointer;font-family:var(--nrcl-font-family);background-color:var(--snackbar-button-color, --snackbar-background-color)}::ng-deep .mat-mdc-snack-bar-container{color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{padding-right:0}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface .mat-mdc-snack-bar-label{padding:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nrcl-icon" }] }); }
|
|
1596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SnackbarComponent, selector: "nrcl-snackbar", host: { properties: { "class": "className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <nrcl-icon>check_circle</nrcl-icon>\n }\n @case ( 'error' ) {\n <nrcl-icon>cancel</nrcl-icon>\n }\n @case ( 'info' ) {\n <nrcl-icon>info</nrcl-icon>\n }\n @case ( 'update' ) {\n <nrcl-icon>error</nrcl-icon>\n }\n }\n</div>\n\n<div class=\"message\">\n <span>{{ config.message }}</span>\n</div>\n\n<div class=\"button\">\n <button (click)=\"snackBarRef.dismissWithAction()\">Close</button>\n</div>\n", styles: ["::ng-deep :root{--nrcl-snackbar-success-background-color: #2E7940;--nrcl-snackbar-error-background-color: #D8292F;--nrcl-snackbar-info-background-color: #37474f;--nrcl-snackbar-update-background-color: #37474f;--nrcl-snackbar-update-button-color: #f9ca81}:host{display:flex;align-items:stretch;height:100%;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word;background-color:var(--snackbar-background-color)}:host.snackbar-type-success{--snackbar-background-color: var(--nrcl-snackbar-success-background-color )}:host.snackbar-type-error{--snackbar-background-color: var(--nrcl-snackbar-error-background-color )}:host.snackbar-type-info{--snackbar-background-color: var( --nrcl-snackbar-info-background-color )}:host.snackbar-type-update{--snackbar-background-color: var( --nrcl-snackbar-update-background-color );--snackbar-button-color: var( --nrcl-snackbar-update-button-color )}:host .icon{display:flex;background-color:#f2f2f2;align-items:center;justify-content:center;pointer-events:none}:host .icon nrcl-icon{padding:var(--nrcl-gutter-space);color:var(--snackbar-background-color)}:host .message{padding:var(--nrcl-gutter-space);flex:1;cursor:default;pointer-events:none}:host .button{padding-right:8px;display:flex;align-items:center;justify-content:center}:host .button button{padding:calc(var(--nrcl-gutter-space) / 2);border:1px white solid;border-radius:5px;color:#fff;cursor:pointer;font-family:var(--nrcl-font-family);background-color:var(--snackbar-button-color, --snackbar-background-color)}::ng-deep .mat-mdc-snack-bar-container{color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{padding-right:0}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface .mat-mdc-snack-bar-label{padding:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "nrcl-icon" }] }); }
|
|
1562
1597
|
}
|
|
1563
1598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
1564
1599
|
type: Component,
|
|
@@ -1659,12 +1694,7 @@ class CodeTable {
|
|
|
1659
1694
|
}
|
|
1660
1695
|
|
|
1661
1696
|
class NrNgxComponentLibModule {
|
|
1662
|
-
|
|
1663
|
-
this.matIconRegistry = matIconRegistry;
|
|
1664
|
-
this.domSanitizer = domSanitizer;
|
|
1665
|
-
this.matIconRegistry.addSvgIcon("filter-cancel", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/app-icons/filter-cancel.svg"));
|
|
1666
|
-
}
|
|
1667
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, deps: [{ token: i1.MatIconRegistry }, { token: i2$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1697
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1668
1698
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, declarations: [ButtonComponent,
|
|
1669
1699
|
CellContentComponent,
|
|
1670
1700
|
ExpansionPanelComponent,
|
|
@@ -1821,7 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1821
1851
|
DesktopViewDirective,
|
|
1822
1852
|
MobileViewDirective,
|
|
1823
1853
|
DeviceViewComponent,
|
|
1824
|
-
IconComponent
|
|
1854
|
+
IconComponent,
|
|
1825
1855
|
],
|
|
1826
1856
|
exports: [
|
|
1827
1857
|
ButtonComponent,
|
|
@@ -1849,7 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1849
1879
|
DesktopViewDirective,
|
|
1850
1880
|
MobileViewDirective,
|
|
1851
1881
|
DeviceViewComponent,
|
|
1852
|
-
IconComponent
|
|
1882
|
+
IconComponent,
|
|
1853
1883
|
],
|
|
1854
1884
|
providers: [
|
|
1855
1885
|
SnackbarUtilService,
|
|
@@ -1858,7 +1888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1858
1888
|
{ provide: OWL_DATE_TIME_FORMATS, useValue: DATE_FORMATS },
|
|
1859
1889
|
]
|
|
1860
1890
|
}]
|
|
1861
|
-
}]
|
|
1891
|
+
}] });
|
|
1862
1892
|
|
|
1863
1893
|
/*
|
|
1864
1894
|
* Public API Surface of wfcc-application-ui
|
|
@@ -1868,5 +1898,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1868
1898
|
* Generated bundle index. Do not edit.
|
|
1869
1899
|
*/
|
|
1870
1900
|
|
|
1871
|
-
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewDirective, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
1901
|
+
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
1872
1902
|
//# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map
|