@bcgov/nr-ngx-component-lib 0.0.32 → 0.0.33
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/filter-select/filter-select.component.d.ts +15 -10
- package/components/list-attachments/list-attachments.component.d.ts +4 -0
- package/components/list-select/list-select.component.d.ts +15 -4
- package/components/row-list-desktop/row-list-desktop.component.d.ts +2 -1
- package/components/tag-list/tag-list.component.d.ts +1 -0
- package/esm2022/components/filter-select/filter-select.component.mjs +44 -26
- package/esm2022/components/list-attachments/list-attachments.component.mjs +28 -18
- package/esm2022/components/list-event-history/list-event-history.component.mjs +5 -6
- package/esm2022/components/list-select/list-select.component.mjs +50 -15
- package/esm2022/components/row-list-desktop/row-list-desktop.component.mjs +13 -5
- package/esm2022/components/row-list-pagination/row-list-pagination.component.mjs +1 -1
- package/esm2022/components/row-list-sorting/row-list-sorting.component.mjs +1 -1
- package/esm2022/components/tag-list/tag-list.component.mjs +5 -4
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs +192 -128
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, ElementRef, Directive, HostBinding, ChangeDetectorRef, booleanAttribute, Component, Input, EventEmitter, NgZone, Output, ContentChild, ChangeDetectionStrategy, ViewChild, ViewContainerRef, numberAttribute, Renderer2, HostListener, Inject, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ElementRef, Directive, HostBinding, ChangeDetectorRef, booleanAttribute, Component, Input, EventEmitter, NgZone, Output, ContentChild, ChangeDetectionStrategy, ViewChild, ViewContainerRef, numberAttribute, TemplateRef, Renderer2, HostListener, ContentChildren, Inject, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, fromEvent, of } from 'rxjs';
|
|
4
4
|
import * as i1$1 from '@angular/material/core';
|
|
5
5
|
import { MatRippleModule } from '@angular/material/core';
|
|
@@ -14,34 +14,34 @@ import * as i1$3 from '@angular/material/expansion';
|
|
|
14
14
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
15
15
|
import * as i2$1 from '@angular/material/progress-spinner';
|
|
16
16
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i1$4 from '@angular/material/form-field';
|
|
18
18
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
19
|
-
import * as i2$
|
|
19
|
+
import * as i2$2 from '@angular/material/input';
|
|
20
20
|
import { MatInputModule } from '@angular/material/input';
|
|
21
21
|
import moment from 'moment';
|
|
22
|
-
import * as i1$
|
|
22
|
+
import * as i1$5 from '@angular/forms';
|
|
23
23
|
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
24
24
|
import * as i4 from '@busacca/ng-pick-datetime';
|
|
25
25
|
import { OwlDateTimeModule, OwlMomentDateTimeModule, OWL_DATE_TIME_FORMATS } from '@busacca/ng-pick-datetime';
|
|
26
26
|
import { Overlay } from '@angular/cdk/overlay';
|
|
27
27
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
28
|
-
import * as
|
|
28
|
+
import * as i5 from '@angular/material/list';
|
|
29
29
|
import { MatListModule } from '@angular/material/list';
|
|
30
|
-
import * as i1$
|
|
30
|
+
import * as i1$7 from '@angular/material/card';
|
|
31
31
|
import { MatCardModule } from '@angular/material/card';
|
|
32
|
-
import * as i3 from '@angular/material/
|
|
33
|
-
import { MatTableModule } from '@angular/material/table';
|
|
34
|
-
import * as i1$5 from 'ngx-pagination';
|
|
35
|
-
import { NgxPaginationModule } from 'ngx-pagination';
|
|
36
|
-
import * as i3$1 from '@angular/material/sort';
|
|
32
|
+
import * as i3 from '@angular/material/sort';
|
|
37
33
|
import { MatSortModule } from '@angular/material/sort';
|
|
38
|
-
import * as
|
|
34
|
+
import * as i4$1 from '@angular/material/table';
|
|
35
|
+
import { MatColumnDef, MatTable, MatTableModule } from '@angular/material/table';
|
|
36
|
+
import * as i1$6 from 'ngx-pagination';
|
|
37
|
+
import { NgxPaginationModule } from 'ngx-pagination';
|
|
38
|
+
import * as i2$3 from '@angular/material/radio';
|
|
39
39
|
import { MatRadioModule } from '@angular/material/radio';
|
|
40
|
-
import * as i1$
|
|
40
|
+
import * as i1$8 from '@angular/material/snack-bar';
|
|
41
41
|
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
|
|
42
|
-
import * as i1$
|
|
42
|
+
import * as i1$9 from '@angular/material/chips';
|
|
43
43
|
import { MatChipsModule } from '@angular/material/chips';
|
|
44
|
-
import * as i2$
|
|
44
|
+
import * as i2$4 from '@angular/material/dialog';
|
|
45
45
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
46
46
|
import { MatButtonModule } from '@angular/material/button';
|
|
47
47
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
@@ -543,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
543
543
|
|
|
544
544
|
class FilterContainerComponent extends NrclBase {
|
|
545
545
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: { label: "label", hint: "hint", wide: "wide" }, host: { properties: { "style.--nrcl-filter-container-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"label ? 'always' : 'auto'\"\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-2 );--nrcl-filter-container-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-container-height ) - 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);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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width);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)}: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:
|
|
546
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: { label: "label", hint: "hint", wide: "wide" }, host: { properties: { "style.--nrcl-filter-container-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [floatLabel]=\"label ? 'always' : 'auto'\"\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-2 );--nrcl-filter-container-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-container-height ) - 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);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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width);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)}: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: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.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 }); }
|
|
547
547
|
}
|
|
548
548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, decorators: [{
|
|
549
549
|
type: Component,
|
|
@@ -590,7 +590,7 @@ class FilterDateComponent extends NrclBase {
|
|
|
590
590
|
this.valueChange.emit(date);
|
|
591
591
|
}
|
|
592
592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
593
|
-
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", wide: "wide" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.--nrcl-filter-date-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, 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 <nrcl-button tertiary matSuffix\n icon=\"event\"\n [owlDateTimeTrigger]=\"selectedDateDT\" \n ></nrcl-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-2 );--nrcl-filter-date-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-date-height ) - 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);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-date-height)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width)}\n"], dependencies: [{ kind: "directive", type: i1$
|
|
593
|
+
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", wide: "wide" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.--nrcl-filter-date-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, 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 <nrcl-button tertiary matSuffix\n icon=\"event\"\n [owlDateTimeTrigger]=\"selectedDateDT\" \n ></nrcl-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-2 );--nrcl-filter-date-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-date-height ) - 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);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-date-height)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width)}\n"], dependencies: [{ kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.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: i4.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i4.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
594
594
|
}
|
|
595
595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, decorators: [{
|
|
596
596
|
type: Component,
|
|
@@ -636,7 +636,7 @@ class FilterSearchComponent extends NrclBase {
|
|
|
636
636
|
this.inputEl.nativeElement.focus();
|
|
637
637
|
}
|
|
638
638
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
639
|
-
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", wide: "wide" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "style.--nrcl-filter-search-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, 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 <nrcl-button tertiary matSuffix\n icon=\"close\"\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n ></nrcl-button>\n } \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: var( --nrcl-filter-width-2 );--nrcl-filter-search-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-search-height ) - 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);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-search-height)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width)}\n"], dependencies: [{ kind: "component", type:
|
|
639
|
+
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", wide: "wide" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "style.--nrcl-filter-search-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, 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 <nrcl-button tertiary matSuffix\n icon=\"close\"\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n ></nrcl-button>\n } \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: var( --nrcl-filter-width-2 );--nrcl-filter-search-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-search-height ) - 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);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-search-height)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width)}\n"], dependencies: [{ kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.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: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
640
640
|
}
|
|
641
641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, decorators: [{
|
|
642
642
|
type: Component,
|
|
@@ -673,6 +673,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
673
673
|
class FilterSelectComponent extends NrclBase {
|
|
674
674
|
constructor() {
|
|
675
675
|
super(...arguments);
|
|
676
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
677
|
+
this.overlay = inject(Overlay);
|
|
678
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
679
|
+
this.domSanitizer = inject(DomSanitizer);
|
|
676
680
|
this.placeholder = 'Filter...';
|
|
677
681
|
this.selectMax = 0;
|
|
678
682
|
this.tooltips = true;
|
|
@@ -689,9 +693,6 @@ class FilterSelectComponent extends NrclBase {
|
|
|
689
693
|
this.hasValue = false;
|
|
690
694
|
this.selection = new FormControl();
|
|
691
695
|
this.match = (o) => true;
|
|
692
|
-
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
693
|
-
this.overlay = inject(Overlay);
|
|
694
|
-
this.viewContainerRef = inject(ViewContainerRef);
|
|
695
696
|
}
|
|
696
697
|
ngOnInit() {
|
|
697
698
|
super.ngOnInit();
|
|
@@ -754,6 +755,16 @@ class FilterSelectComponent extends NrclBase {
|
|
|
754
755
|
}
|
|
755
756
|
}
|
|
756
757
|
}
|
|
758
|
+
ngAfterViewInit() {
|
|
759
|
+
if (!this.optionTemplate) {
|
|
760
|
+
if (this.optionTemplateRef) {
|
|
761
|
+
this.optionTemplate = this.optionTemplateRef;
|
|
762
|
+
}
|
|
763
|
+
else {
|
|
764
|
+
this.optionTemplate = this.defaultOptionTemplateRef;
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
}
|
|
757
768
|
ngOnDestroy() {
|
|
758
769
|
// console.log('destroy',this.inst)
|
|
759
770
|
this.clickSubscription?.unsubscribe();
|
|
@@ -907,9 +918,6 @@ class FilterSelectComponent extends NrclBase {
|
|
|
907
918
|
optionForCode(code) {
|
|
908
919
|
return this.options.find(o => o.code == code);
|
|
909
920
|
}
|
|
910
|
-
formatOption(option) {
|
|
911
|
-
return this.optionFormatter(option, false);
|
|
912
|
-
}
|
|
913
921
|
get isClosedNoSelection() {
|
|
914
922
|
return !this.isOpen && !(this.selection?.value?.length > 0 && this.clear);
|
|
915
923
|
}
|
|
@@ -917,7 +925,7 @@ class FilterSelectComponent extends NrclBase {
|
|
|
917
925
|
return !this.isOpen && this.selection?.value?.length > 0 && this.clear;
|
|
918
926
|
}
|
|
919
927
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
920
|
-
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], filterCharsMin: ["filterCharsMin", "filterCharsMin", numberAttribute], optionFormatter: "optionFormatter", overlayClass: "overlayClass", wide: "wide", filterCharsMinMessage: "filterCharsMinMessage" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter", "style.--nrcl-filter-select-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, 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\" #filterInput\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</mat-form-field> \n\n<nrcl-button tertiary matSuffix [class.hide]=\"!isOpen\"\n icon=\"arrow_drop_up\"\n (click)=\"onCloseClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary matSuffix [class.hide]=\"!isClosedSelection\"\n icon=\"close\"\n (click)=\"onCancelClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary matSuffix [class.hide]=\"!isClosedNoSelection\"\n icon=\"arrow_drop_down\"\n (click)=\"onInputFocus()\"\n></nrcl-button>\n\n<ng-template #overlayTemplate>\n <div class=\"nrcl filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\" [class]=\"overlayClass\">\n @if ( !isFiltered && ( !single || filterCharsMin ) && summary ) {\n @if ( !selection?.value?.length && ( hint || filterCharsMin ) ) {\n <div class=\"selection-overview\">\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\n </div>\n }\n\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n @if ( !single ) {\n <div class=\"summary\">\n <span>Selected {{ selection?.value?.length }} of {{ options?.length }} options</span>\n </div>\n }\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 <span [innerHTML]=\"formatOption( optionForCode( code ) )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\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 @if ( !filterCharsMin || isFiltered ) {\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 <span [innerHTML]=\"formatOption( option )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n }\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-2 );--nrcl-filter-select-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-select-height ) - 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);display:block;position:relative}:host .nrcl-button{position:absolute;right:2px;top:2px;bottom:2px}:host .hide{display:none}: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-select-height);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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{margin:0}: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}::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:4px 8px 4px 16px;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:16px;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 0 0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox{padding:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox .mdc-checkbox__background{top:0;left:0}::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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$3.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: i4$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$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: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
928
|
+
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], filterCharsMin: ["filterCharsMin", "filterCharsMin", numberAttribute], optionFormatter: "optionFormatter", optionTemplate: "optionTemplate", overlayClass: "overlayClass", wide: "wide", filterCharsMinMessage: "filterCharsMinMessage" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter", "style.--nrcl-filter-select-width": "this.wide ? \"var( --nrcl-filter-width-\" + this.wide + \" )\" : null" } }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: TemplateRef, descendants: true }], 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 }, { propertyName: "defaultOptionTemplateRef", first: true, predicate: ["defaultOptionTemplateRef"], 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\" #filterInput\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</mat-form-field> \n\n<nrcl-button tertiary [class.hide]=\"!isOpen\"\n icon=\"arrow_drop_up\"\n (click)=\"onCloseClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary [class.hide]=\"!isClosedSelection\"\n icon=\"close\"\n (click)=\"onCancelClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary [class.hide]=\"!isClosedNoSelection\"\n icon=\"arrow_drop_down\"\n (click)=\"onInputFocus()\"\n></nrcl-button>\n\n<ng-template #overlayTemplate>\n <div class=\"nrcl filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\" [class]=\"overlayClass\">\n @if ( !isFiltered && ( !single || filterCharsMin ) && summary ) {\n @if ( !selection?.value?.length && ( hint || filterCharsMin ) ) {\n <div class=\"selection-overview\">\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\n </div>\n }\n\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n @if ( !single ) {\n <div class=\"summary\">\n <span>Selected {{ selection?.value?.length }} of {{ options?.length }} options</span>\n </div>\n }\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 <ng-container \n [ngTemplateOutlet]=\"optionTemplate\" \n [ngTemplateOutletContext]=\"{ $implicit: optionForCode( code ) }\">\n </ng-container>\n </mat-list-option>\n }\n </mat-selection-list>\n\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\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 @if ( !filterCharsMin || isFiltered ) {\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 <ng-container \n [ngTemplateOutlet]=\"optionTemplate\" \n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </mat-list-option>\n }\n </mat-selection-list>\n }\n </div>\n</ng-template>\n\n<ng-template #defaultOptionTemplateRef let-ctx>\n <span>{{ ctx.description }}</span>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-2 );--nrcl-filter-select-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-select-height ) - 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);display:block;position:relative}:host .nrcl-button{position:absolute;right:2px;top:2px;bottom:2px}:host .hide{display:none}: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-select-height);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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{margin:0}: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}::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:4px 8px 4px 16px;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:16px;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 0 0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox{padding:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox .mdc-checkbox__background{top:0;left:0}::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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.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.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5.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$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
921
929
|
}
|
|
922
930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
923
931
|
type: Component,
|
|
@@ -927,8 +935,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
927
935
|
'[class.is-closed]': "!isOpen",
|
|
928
936
|
'[class.use-filter]': "filter",
|
|
929
937
|
'[style.--nrcl-filter-select-width]': 'this.wide ? "var( --nrcl-filter-width-" + this.wide + " )" : null'
|
|
930
|
-
}, 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\" #filterInput\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</mat-form-field> \n\n<nrcl-button tertiary
|
|
931
|
-
}], propDecorators: {
|
|
938
|
+
}, 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\" #filterInput\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</mat-form-field> \n\n<nrcl-button tertiary [class.hide]=\"!isOpen\"\n icon=\"arrow_drop_up\"\n (click)=\"onCloseClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary [class.hide]=\"!isClosedSelection\"\n icon=\"close\"\n (click)=\"onCancelClick()\"\n></nrcl-button>\n\n<nrcl-button tertiary [class.hide]=\"!isClosedNoSelection\"\n icon=\"arrow_drop_down\"\n (click)=\"onInputFocus()\"\n></nrcl-button>\n\n<ng-template #overlayTemplate>\n <div class=\"nrcl filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\" [class]=\"overlayClass\">\n @if ( !isFiltered && ( !single || filterCharsMin ) && summary ) {\n @if ( !selection?.value?.length && ( hint || filterCharsMin ) ) {\n <div class=\"selection-overview\">\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\n </div>\n }\n\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n @if ( !single ) {\n <div class=\"summary\">\n <span>Selected {{ selection?.value?.length }} of {{ options?.length }} options</span>\n </div>\n }\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 <ng-container \n [ngTemplateOutlet]=\"optionTemplate\" \n [ngTemplateOutletContext]=\"{ $implicit: optionForCode( code ) }\">\n </ng-container>\n </mat-list-option>\n }\n </mat-selection-list>\n\n @if ( hint ) {\n <div class=\"summary\">\n <span>{{ hint }}</span>\n </div>\n } \n\n @if ( filterCharsMin && filterCharsMinMessage ) {\n <div class=\"summary\">\n <span>{{ filterCharsMinMessage }}</span>\n </div>\n }\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 @if ( !filterCharsMin || isFiltered ) {\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 <ng-container \n [ngTemplateOutlet]=\"optionTemplate\" \n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </mat-list-option>\n }\n </mat-selection-list>\n }\n </div>\n</ng-template>\n\n<ng-template #defaultOptionTemplateRef let-ctx>\n <span>{{ ctx.description }}</span>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-2 );--nrcl-filter-select-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-select-height ) - 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);display:block;position:relative}:host .nrcl-button{position:absolute;right:2px;top:2px;bottom:2px}:host .hide{display:none}: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-select-height);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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{margin:0}: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}::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:4px 8px 4px 16px;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:16px;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 0 0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox{padding:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start .mdc-checkbox .mdc-checkbox__background{top:0;left:0}::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}\n"] }]
|
|
939
|
+
}], propDecorators: { trigger: [{
|
|
940
|
+
type: ViewChild,
|
|
941
|
+
args: ['trigger', { read: ElementRef }]
|
|
942
|
+
}], filterInput: [{
|
|
943
|
+
type: ViewChild,
|
|
944
|
+
args: ['filterInput']
|
|
945
|
+
}], overlayTemplate: [{
|
|
946
|
+
type: ViewChild,
|
|
947
|
+
args: ['overlayTemplate']
|
|
948
|
+
}], defaultOptionTemplateRef: [{
|
|
949
|
+
type: ViewChild,
|
|
950
|
+
args: ['defaultOptionTemplateRef']
|
|
951
|
+
}], optionTemplateRef: [{
|
|
952
|
+
type: ContentChild,
|
|
953
|
+
args: [TemplateRef]
|
|
954
|
+
}], label: [{
|
|
932
955
|
type: Input
|
|
933
956
|
}], placeholder: [{
|
|
934
957
|
type: Input
|
|
@@ -958,6 +981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
958
981
|
args: [{ transform: numberAttribute }]
|
|
959
982
|
}], optionFormatter: [{
|
|
960
983
|
type: Input
|
|
984
|
+
}], optionTemplate: [{
|
|
985
|
+
type: Input
|
|
961
986
|
}], overlayClass: [{
|
|
962
987
|
type: Input
|
|
963
988
|
}], wide: [{
|
|
@@ -966,15 +991,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
966
991
|
type: Input
|
|
967
992
|
}], valueChange: [{
|
|
968
993
|
type: Output
|
|
969
|
-
}], trigger: [{
|
|
970
|
-
type: ViewChild,
|
|
971
|
-
args: ['trigger', { read: ElementRef }]
|
|
972
|
-
}], filterInput: [{
|
|
973
|
-
type: ViewChild,
|
|
974
|
-
args: ['filterInput']
|
|
975
|
-
}], overlayTemplate: [{
|
|
976
|
-
type: ViewChild,
|
|
977
|
-
args: ['overlayTemplate']
|
|
978
994
|
}] } });
|
|
979
995
|
|
|
980
996
|
class FiltersPanelComponent extends NrclBase {
|
|
@@ -1431,13 +1447,21 @@ function makeSummary(rowCount, pageNumber, pageSize) {
|
|
|
1431
1447
|
}
|
|
1432
1448
|
|
|
1433
1449
|
class RowListDesktopComponent extends NrclBase {
|
|
1450
|
+
constructor() {
|
|
1451
|
+
super(...arguments);
|
|
1452
|
+
this.showRowHover = true;
|
|
1453
|
+
}
|
|
1434
1454
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1435
|
-
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:empty{border-bottom:none}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:
|
|
1455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: { showRowHover: "showRowHover" }, host: { properties: { "class.show-row-hover": "showRowHover" } }, 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:empty{border-bottom:none}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:default}: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-wrap:break-word}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(.selected){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(.selected){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-row.selected{background-color:#b6d7a8}: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}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row{cursor:pointer}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover):not(.selected){background-color:#f2f2f2}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover):not(.selected){background-color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1436
1456
|
}
|
|
1437
1457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, decorators: [{
|
|
1438
1458
|
type: Component,
|
|
1439
|
-
args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1440
|
-
|
|
1459
|
+
args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1460
|
+
'[class.show-row-hover]': 'showRowHover'
|
|
1461
|
+
}, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host:empty{border-bottom:none}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:default}: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-wrap:break-word}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(.selected){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(.selected){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-row.selected{background-color:#b6d7a8}: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}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row{cursor:pointer}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover):not(.selected){background-color:#f2f2f2}:host.show-row-hover ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover):not(.selected){background-color:#fff}\n"] }]
|
|
1462
|
+
}], propDecorators: { showRowHover: [{
|
|
1463
|
+
type: Input
|
|
1464
|
+
}] } });
|
|
1441
1465
|
|
|
1442
1466
|
class RowListMobileComponent extends NrclBase {
|
|
1443
1467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -1521,7 +1545,7 @@ class RowListPaginationComponent extends NrclBase {
|
|
|
1521
1545
|
return this.rowCount;
|
|
1522
1546
|
}
|
|
1523
1547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1524
|
-
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:flex;align-items:center;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: 180px;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .no-rows{font-size:var(--nrcl-font-size);grid-column:span 2}: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: 180px;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:8px}: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: i1$
|
|
1548
|
+
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:flex;align-items:center;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: 180px;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .no-rows{font-size:var(--nrcl-font-size);grid-column:span 2}: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: 180px;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:8px}: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: i1$6.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", "wide"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin", "optionFormatter", "optionTemplate", "overlayClass", "wide", "filterCharsMinMessage"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1525
1549
|
}
|
|
1526
1550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1527
1551
|
type: Component,
|
|
@@ -1553,75 +1577,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1553
1577
|
args: ["window:resize", ["$event"]]
|
|
1554
1578
|
}] } });
|
|
1555
1579
|
|
|
1556
|
-
class ListAttachmentsComponent extends RowListBase {
|
|
1557
|
-
constructor() {
|
|
1558
|
-
super(...arguments);
|
|
1559
|
-
this.canDelete = true;
|
|
1560
|
-
this.canDownload = true;
|
|
1561
|
-
this.noRowsMessage = "No attachments have been added.";
|
|
1562
|
-
this.DATE_FORMATS = DATE_FORMATS;
|
|
1563
|
-
this.columns = ['attachmentTypeCode', 'fileName', 'sourceObjectNameCode', 'uploadedBy', 'uploadedTimestamp', 'description'];
|
|
1564
|
-
}
|
|
1565
|
-
initializeRowList() {
|
|
1566
|
-
super.initializeRowList();
|
|
1567
|
-
}
|
|
1568
|
-
get initialPageState() {
|
|
1569
|
-
return {
|
|
1570
|
-
filter: {},
|
|
1571
|
-
pageSize: 5,
|
|
1572
|
-
pageNumber: 1,
|
|
1573
|
-
sortActive: null,
|
|
1574
|
-
sortDirection: 'desc',
|
|
1575
|
-
};
|
|
1576
|
-
}
|
|
1577
|
-
ngAfterViewInit() {
|
|
1578
|
-
if (this.canDownload)
|
|
1579
|
-
this.columns.push('download');
|
|
1580
|
-
if (this.canDelete)
|
|
1581
|
-
this.columns.push('delete');
|
|
1582
|
-
super.ngAfterViewInit();
|
|
1583
|
-
}
|
|
1584
|
-
fetchRowListPage() {
|
|
1585
|
-
if (!this.rowListProvider?.fetchAttachments)
|
|
1586
|
-
throw Error('no provider');
|
|
1587
|
-
return this.rowListProvider.fetchAttachments({
|
|
1588
|
-
pageNumber: this.pageNumber,
|
|
1589
|
-
pageRowCount: this.pageSize,
|
|
1590
|
-
sortColumn: this.sortActive,
|
|
1591
|
-
sortDirection: this.sortDirection,
|
|
1592
|
-
});
|
|
1593
|
-
}
|
|
1594
|
-
displayRowListPage(res) {
|
|
1595
|
-
if (!this.rowListProvider?.displayRowListPage)
|
|
1596
|
-
throw Error('no provider');
|
|
1597
|
-
return this.rowListProvider.displayRowListPage(res);
|
|
1598
|
-
}
|
|
1599
|
-
onDownloadClick(item) {
|
|
1600
|
-
if (!this.rowListProvider?.downloadItem)
|
|
1601
|
-
throw Error('no provider');
|
|
1602
|
-
return this.rowListProvider.downloadItem(item);
|
|
1603
|
-
}
|
|
1604
|
-
onDeleteClick(item) {
|
|
1605
|
-
if (!this.rowListProvider?.deleteItem)
|
|
1606
|
-
throw Error('no provider');
|
|
1607
|
-
return this.rowListProvider.deleteItem(item);
|
|
1608
|
-
}
|
|
1609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", canDownload: "canDownload", noRowsMessage: "noRowsMessage" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <th mat-header-cell *matHeaderCellDef>File Name</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <th mat-header-cell *matHeaderCellDef>File Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <th mat-header-cell *matHeaderCellDef>Uploaded Date</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"description\">\n <th mat-header-cell *matHeaderCellDef>Description</th>\n <td mat-cell *matCellDef=\"let item\">\n {{ item.attachmentDescription }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <th mat-header-cell *matHeaderCellDef>Download</th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"delete\">\n <th mat-header-cell *matHeaderCellDef>Delete</th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n </table>\n }\n </nrcl-row-list-desktop>\n \n @if ( totalRowCount == 0 ) {\n <nrcl-row-list-pagination\n paginationId=\"desktop-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n }\n </ng-template>\n\n <ng-template mobile-view>\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-content>\n <section full-width>\n <mat-label>File name</mat-label>\n <div class=\"value\">{{ item.fileName }}</div>\n </section>\n\n <section>\n <mat-label>Attachment Type</mat-label>\n <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>File Type</mat-label>\n <div class=\"value\">{{ item.fileExtension }}</div>\n </section>\n\n <section>\n <mat-label>Uploaded By</mat-label>\n <div class=\"value\">{{ item.uploadedBy }}</div>\n </section> \n\n <section>\n <mat-label>Uploaded Date</mat-label>\n <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n </section> \n\n <section full-width>\n <mat-label>Description</mat-label>\n <div class=\"value\">{{ item.attachmentDescription }}</div>\n </section> \n </mat-card-content>\n\n <mat-card-footer>\n @if ( canDownload ) {\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n }\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </mat-card-footer> \n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n @if ( totalRowCount == 0 ) { \n <nrcl-row-list-pagination\n paginationId=\"mobile-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n }\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$6.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$6.MatCardFooter, selector: "mat-card-footer" }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i1$5.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1611
|
-
}
|
|
1612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
|
|
1613
|
-
type: Component,
|
|
1614
|
-
args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <th mat-header-cell *matHeaderCellDef>File Name</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <th mat-header-cell *matHeaderCellDef>File Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <th mat-header-cell *matHeaderCellDef>Uploaded Date</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"description\">\n <th mat-header-cell *matHeaderCellDef>Description</th>\n <td mat-cell *matCellDef=\"let item\">\n {{ item.attachmentDescription }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <th mat-header-cell *matHeaderCellDef>Download</th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n </div>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"delete\">\n <th mat-header-cell *matHeaderCellDef>Delete</th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n </table>\n }\n </nrcl-row-list-desktop>\n \n @if ( totalRowCount == 0 ) {\n <nrcl-row-list-pagination\n paginationId=\"desktop-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n }\n </ng-template>\n\n <ng-template mobile-view>\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-content>\n <section full-width>\n <mat-label>File name</mat-label>\n <div class=\"value\">{{ item.fileName }}</div>\n </section>\n\n <section>\n <mat-label>Attachment Type</mat-label>\n <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>File Type</mat-label>\n <div class=\"value\">{{ item.fileExtension }}</div>\n </section>\n\n <section>\n <mat-label>Uploaded By</mat-label>\n <div class=\"value\">{{ item.uploadedBy }}</div>\n </section> \n\n <section>\n <mat-label>Uploaded Date</mat-label>\n <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n </section> \n\n <section full-width>\n <mat-label>Description</mat-label>\n <div class=\"value\">{{ item.attachmentDescription }}</div>\n </section> \n </mat-card-content>\n\n <mat-card-footer>\n @if ( canDownload ) {\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n }\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </mat-card-footer> \n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n @if ( totalRowCount == 0 ) { \n <nrcl-row-list-pagination\n paginationId=\"mobile-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n }\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"] }]
|
|
1615
|
-
}], propDecorators: { rowListProvider: [{
|
|
1616
|
-
type: Input
|
|
1617
|
-
}], canDelete: [{
|
|
1618
|
-
type: Input
|
|
1619
|
-
}], canDownload: [{
|
|
1620
|
-
type: Input
|
|
1621
|
-
}], noRowsMessage: [{
|
|
1622
|
-
type: Input
|
|
1623
|
-
}] } });
|
|
1624
|
-
|
|
1625
1580
|
function wrapFilterValue(val) {
|
|
1626
1581
|
if (!val)
|
|
1627
1582
|
return [];
|
|
@@ -1670,7 +1625,7 @@ class RowListSortingComponent extends NrclBase {
|
|
|
1670
1625
|
});
|
|
1671
1626
|
}
|
|
1672
1627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1673
|
-
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$
|
|
1628
|
+
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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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", "wide"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin", "optionFormatter", "optionTemplate", "overlayClass", "wide", "filterCharsMinMessage"], outputs: ["valueChange"] }] }); }
|
|
1674
1629
|
}
|
|
1675
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1676
1631
|
type: Component,
|
|
@@ -1685,6 +1640,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1685
1640
|
type: Output
|
|
1686
1641
|
}] } });
|
|
1687
1642
|
|
|
1643
|
+
class ListAttachmentsComponent extends RowListBase {
|
|
1644
|
+
constructor() {
|
|
1645
|
+
super(...arguments);
|
|
1646
|
+
this.canDelete = true;
|
|
1647
|
+
this.canDownload = true;
|
|
1648
|
+
this.noRowsMessage = "No attachments have been added.";
|
|
1649
|
+
this.DATE_FORMATS = DATE_FORMATS;
|
|
1650
|
+
this.columns = ['attachmentTypeCode', 'fileName', 'sourceObjectNameCode', 'uploadedBy', 'uploadedTimestamp', 'description'];
|
|
1651
|
+
this.sortColumns = [
|
|
1652
|
+
{ code: 'attachmentTypeCode', description: 'Attachment Type' },
|
|
1653
|
+
{ code: 'fileName', description: 'File Name' },
|
|
1654
|
+
{ code: 'sourceObjectNameCode', description: 'File Type' },
|
|
1655
|
+
{ code: 'uploadedBy', description: 'Uploaded By' },
|
|
1656
|
+
{ code: 'uploadedTimestamp', description: 'Uploaded Date' },
|
|
1657
|
+
{ code: 'description', description: 'Description' }
|
|
1658
|
+
];
|
|
1659
|
+
}
|
|
1660
|
+
initializeRowList() {
|
|
1661
|
+
super.initializeRowList();
|
|
1662
|
+
}
|
|
1663
|
+
get initialPageState() {
|
|
1664
|
+
return {
|
|
1665
|
+
filter: {},
|
|
1666
|
+
pageSize: 10,
|
|
1667
|
+
pageNumber: 1,
|
|
1668
|
+
sortActive: 'uploadedTimestamp',
|
|
1669
|
+
sortDirection: 'desc',
|
|
1670
|
+
};
|
|
1671
|
+
}
|
|
1672
|
+
ngAfterViewInit() {
|
|
1673
|
+
if (this.canDownload)
|
|
1674
|
+
this.columns.push('download');
|
|
1675
|
+
if (this.canDelete)
|
|
1676
|
+
this.columns.push('delete');
|
|
1677
|
+
super.ngAfterViewInit();
|
|
1678
|
+
}
|
|
1679
|
+
fetchRowListPage() {
|
|
1680
|
+
if (!this.rowListProvider?.fetchAttachments)
|
|
1681
|
+
throw Error('no provider for ListAttachmentsComponent.rowListProvider.fetchRowListPage');
|
|
1682
|
+
return this.rowListProvider.fetchAttachments({
|
|
1683
|
+
pageNumber: this.pageNumber,
|
|
1684
|
+
pageRowCount: this.pageSize,
|
|
1685
|
+
sortColumn: this.sortActive,
|
|
1686
|
+
sortDirection: this.sortDirection,
|
|
1687
|
+
});
|
|
1688
|
+
}
|
|
1689
|
+
displayRowListPage(res) {
|
|
1690
|
+
if (!this.rowListProvider?.displayRowListPage)
|
|
1691
|
+
throw Error('no provider for ListAttachmentsComponent.rowListProvider.displayRowListPage');
|
|
1692
|
+
return this.rowListProvider.displayRowListPage(res);
|
|
1693
|
+
}
|
|
1694
|
+
onDownloadClick(item) {
|
|
1695
|
+
if (!this.rowListProvider?.downloadItem)
|
|
1696
|
+
throw Error('no provider for ListAttachmentsComponent.rowListProvider.onDownloadClick');
|
|
1697
|
+
return this.rowListProvider.downloadItem(item);
|
|
1698
|
+
}
|
|
1699
|
+
onDeleteClick(item) {
|
|
1700
|
+
if (!this.rowListProvider?.deleteItem)
|
|
1701
|
+
throw Error('no provider for ListAttachmentsComponent.rowListProvider.onDeleteClick.');
|
|
1702
|
+
return this.rowListProvider.deleteItem(item);
|
|
1703
|
+
}
|
|
1704
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", canDownload: "canDownload", noRowsMessage: "noRowsMessage" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop [showRowHover]=\"false\">\n <mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n (matSortChange)=\"onSortChange( $event )\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Attachment Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>File Name</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.fileName }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>File Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.fileExtension }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded By</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.uploadedBy }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded Date</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.uploadedTimestamp }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"description\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.attachmentDescription }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <mat-header-cell *matHeaderCellDef>Down­load</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-button compact\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"delete\">\n <mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-button compact\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n </mat-table>\n </nrcl-row-list-desktop>\n \n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"desktop-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n\n <ng-template mobile-view>\n <nrcl-gap/>\n\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-sorting\n [sortColumn]=\"sortActive\"\n [sortColumnOptions]=\"sortColumns\"\n [sortDirection]=\"sortDirection\"\n (sortChange)=\"onSortChange($event)\">\n </nrcl-row-list-sorting>\n\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-content>\n <section full-width>\n <mat-label>File name</mat-label>\n <div class=\"value\">{{ item.fileName }}</div>\n </section>\n\n <section>\n <mat-label>Attachment Type</mat-label>\n <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>File Type</mat-label>\n <div class=\"value\">{{ item.fileExtension }}</div>\n </section>\n\n <section>\n <mat-label>Uploaded By</mat-label>\n <div class=\"value\">{{ item.uploadedBy }}</div>\n </section> \n\n <section>\n <mat-label>Uploaded Date</mat-label>\n <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n </section> \n\n <section full-width>\n <mat-label>Description</mat-label>\n <div class=\"value\">{{ item.attachmentDescription }}</div>\n </section> \n </mat-card-content>\n\n <mat-card-footer>\n @if ( canDownload ) {\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n }\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </mat-card-footer> \n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"mobile-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-fileName{flex-basis:200px;flex-grow:1;flex-shrink:0;word-break:break-word}:host .mat-mdc-table .mat-column-sourceObjectNameCode{flex-basis:60px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedBy{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedTimestamp{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-description{flex-basis:200px;flex-grow:2;flex-shrink:0;word-break:break-word}:host .mat-mdc-table .mat-column-download,:host .mat-mdc-table .mat-column-delete{flex-basis:60px;flex-grow:0;flex-shrink:0;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1$7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$7.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$7.MatCardFooter, selector: "mat-card-footer" }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: ["sortColumn", "sortColumnOptions", "sortDirection"], outputs: ["sortChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i1$6.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1706
|
+
}
|
|
1707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
|
|
1708
|
+
type: Component,
|
|
1709
|
+
args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop [showRowHover]=\"false\">\n <mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n (matSortChange)=\"onSortChange( $event )\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Attachment Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>File Name</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.fileName }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>File Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.fileExtension }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded By</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.uploadedBy }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded Date</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.uploadedTimestamp }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"description\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.attachmentDescription }}\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <mat-header-cell *matHeaderCellDef>Down­load</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-button compact\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"delete\">\n <mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-button compact\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n </mat-table>\n </nrcl-row-list-desktop>\n \n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"desktop-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n\n <ng-template mobile-view>\n <nrcl-gap/>\n\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-sorting\n [sortColumn]=\"sortActive\"\n [sortColumnOptions]=\"sortColumns\"\n [sortDirection]=\"sortDirection\"\n (sortChange)=\"onSortChange($event)\">\n </nrcl-row-list-sorting>\n\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-content>\n <section full-width>\n <mat-label>File name</mat-label>\n <div class=\"value\">{{ item.fileName }}</div>\n </section>\n\n <section>\n <mat-label>Attachment Type</mat-label>\n <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>File Type</mat-label>\n <div class=\"value\">{{ item.fileExtension }}</div>\n </section>\n\n <section>\n <mat-label>Uploaded By</mat-label>\n <div class=\"value\">{{ item.uploadedBy }}</div>\n </section> \n\n <section>\n <mat-label>Uploaded Date</mat-label>\n <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n </section> \n\n <section full-width>\n <mat-label>Description</mat-label>\n <div class=\"value\">{{ item.attachmentDescription }}</div>\n </section> \n </mat-card-content>\n\n <mat-card-footer>\n @if ( canDownload ) {\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n }\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </mat-card-footer> \n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"mobile-attachments\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-fileName{flex-basis:200px;flex-grow:1;flex-shrink:0;word-break:break-word}:host .mat-mdc-table .mat-column-sourceObjectNameCode{flex-basis:60px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedBy{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedTimestamp{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-description{flex-basis:200px;flex-grow:2;flex-shrink:0;word-break:break-word}:host .mat-mdc-table .mat-column-download,:host .mat-mdc-table .mat-column-delete{flex-basis:60px;flex-grow:0;flex-shrink:0;justify-content:center}\n"] }]
|
|
1710
|
+
}], propDecorators: { rowListProvider: [{
|
|
1711
|
+
type: Input
|
|
1712
|
+
}], canDelete: [{
|
|
1713
|
+
type: Input
|
|
1714
|
+
}], canDownload: [{
|
|
1715
|
+
type: Input
|
|
1716
|
+
}], noRowsMessage: [{
|
|
1717
|
+
type: Input
|
|
1718
|
+
}] } });
|
|
1719
|
+
|
|
1688
1720
|
class ListEventHistoryComponent extends RowListBase {
|
|
1689
1721
|
constructor() {
|
|
1690
1722
|
super(...arguments);
|
|
@@ -1699,12 +1731,11 @@ class ListEventHistoryComponent extends RowListBase {
|
|
|
1699
1731
|
{ code: 'changedBy', description: 'Changed By' },
|
|
1700
1732
|
{ code: 'type', description: 'Type' },
|
|
1701
1733
|
{ code: 'section', description: 'Section' },
|
|
1702
|
-
// { code: 'comment', description: '' },
|
|
1703
1734
|
];
|
|
1704
1735
|
}
|
|
1705
1736
|
fetchRowListPage() {
|
|
1706
1737
|
if (!this.rowListProvider?.fetchEventHistory)
|
|
1707
|
-
throw Error('no provider');
|
|
1738
|
+
throw Error('no provider for ListEventHistoryComponent.rowListProvider.fetchRowListPage');
|
|
1708
1739
|
return this.rowListProvider.fetchEventHistory({
|
|
1709
1740
|
isSupplier: this.isSupplier,
|
|
1710
1741
|
pageNumber: this.pageNumber,
|
|
@@ -1715,7 +1746,7 @@ class ListEventHistoryComponent extends RowListBase {
|
|
|
1715
1746
|
}
|
|
1716
1747
|
displayRowListPage(res) {
|
|
1717
1748
|
if (!this.rowListProvider?.displayRowListPage)
|
|
1718
|
-
throw Error('no provider');
|
|
1749
|
+
throw Error('no provider for ListEventHistoryComponent.rowListProvider.displayRowListPage');
|
|
1719
1750
|
return this.rowListProvider.displayRowListPage(res);
|
|
1720
1751
|
}
|
|
1721
1752
|
get initialPageState() {
|
|
@@ -1728,11 +1759,11 @@ class ListEventHistoryComponent extends RowListBase {
|
|
|
1728
1759
|
};
|
|
1729
1760
|
}
|
|
1730
1761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1731
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListEventHistoryComponent, selector: "nrcl-list-event-history", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination", isSupplier: "isSupplier", noRowsMessage: "noRowsMessage" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop>\n <
|
|
1762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListEventHistoryComponent, selector: "nrcl-list-event-history", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination", isSupplier: "isSupplier", noRowsMessage: "noRowsMessage" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop [showRowHover]=\"false\">\n <mat-table\n [dataSource]=\"rows | paginate: {\n id: 'desktop-event-history',\n itemsPerPage: pageSize,\n currentPage: pageNumber,\n totalItems: totalRowCount\n }\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n (matSortChange)=\"onSortChange( $event )\">\n >\n <ng-container matColumnDef=\"dateTime\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"changedBy\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>User ID</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"type\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"section\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Section</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"comment\">\n <mat-header-cell *matHeaderCellDef>Comment</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.comment }}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n </mat-table>\n </nrcl-row-list-desktop>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"desktop-event-history\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n\n <ng-template mobile-view>\n @if ( rows?.length > 0 ) {\n <nrcl-gap/>\n\n <nrcl-row-list-sorting\n [sortColumn]=\"sortActive\"\n [sortColumnOptions]=\"sortColumns\"\n [sortDirection]=\"sortDirection\"\n (sortChange)=\"onSortChange($event)\">\n </nrcl-row-list-sorting>\n\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: {\n id: 'mobile-event-history',\n itemsPerPage: pageSize,\n currentPage: pageNumber,\n totalItems: totalRowCount\n }; track item.eventHistoryGuid ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.eventTimestamp }}</h2>\n </section>\n </mat-card-title>\n\n <mat-card-content>\n <section>\n <mat-label>User ID</mat-label>\n <div class=\"value\">{{ item.createdByUserId }}</div>\n </section>\n\n <section>\n <mat-label>Type</mat-label>\n <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>Section</mat-label>\n <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n </section>\n\n <section full-width>\n <mat-label>Comment</mat-label>\n <div class=\"value\">{{ item.comment }}</div>\n </section>\n </mat-card-content>\n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"mobile-event-history\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-dateTime{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-changedBy{flex-basis:120px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-type{flex-basis:80px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-section{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-comment{flex-basis:400px;flex-grow:1;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: i1$7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$7.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: ["sortColumn", "sortColumnOptions", "sortDirection"], outputs: ["sortChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i1$6.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1732
1763
|
}
|
|
1733
1764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, decorators: [{
|
|
1734
1765
|
type: Component,
|
|
1735
|
-
args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop>\n <
|
|
1766
|
+
args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n @if ( rows?.length > 0 ) {\n <nrcl-row-list-desktop [showRowHover]=\"false\">\n <mat-table\n [dataSource]=\"rows | paginate: {\n id: 'desktop-event-history',\n itemsPerPage: pageSize,\n currentPage: pageNumber,\n totalItems: totalRowCount\n }\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n (matSortChange)=\"onSortChange( $event )\">\n >\n <ng-container matColumnDef=\"dateTime\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"changedBy\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>User ID</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"type\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"section\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>Section</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"comment\">\n <mat-header-cell *matHeaderCellDef>Comment</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n {{ item.comment }}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n </mat-table>\n </nrcl-row-list-desktop>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"desktop-event-history\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n\n <ng-template mobile-view>\n @if ( rows?.length > 0 ) {\n <nrcl-gap/>\n\n <nrcl-row-list-sorting\n [sortColumn]=\"sortActive\"\n [sortColumnOptions]=\"sortColumns\"\n [sortDirection]=\"sortDirection\"\n (sortChange)=\"onSortChange($event)\">\n </nrcl-row-list-sorting>\n\n <nrcl-gap/>\n\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: {\n id: 'mobile-event-history',\n itemsPerPage: pageSize,\n currentPage: pageNumber,\n totalItems: totalRowCount\n }; track item.eventHistoryGuid ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.eventTimestamp }}</h2>\n </section>\n </mat-card-title>\n\n <mat-card-content>\n <section>\n <mat-label>User ID</mat-label>\n <div class=\"value\">{{ item.createdByUserId }}</div>\n </section>\n\n <section>\n <mat-label>Type</mat-label>\n <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n </section>\n\n <section>\n <mat-label>Section</mat-label>\n <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n </section>\n\n <section full-width>\n <mat-label>Comment</mat-label>\n <div class=\"value\">{{ item.comment }}</div>\n </section>\n </mat-card-content>\n </mat-card>\n }\n </nrcl-row-list-mobile>\n\n <nrcl-gap/>\n }\n\n <nrcl-row-list-pagination\n paginationId=\"mobile-event-history\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-dateTime{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-changedBy{flex-basis:120px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-type{flex-basis:80px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-section{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-comment{flex-basis:400px;flex-grow:1;flex-shrink:0}\n"] }]
|
|
1736
1767
|
}], propDecorators: { rowListProvider: [{
|
|
1737
1768
|
type: Input
|
|
1738
1769
|
}], canDelete: [{
|
|
@@ -1750,7 +1781,27 @@ class ListSelectComponent extends RowListBase {
|
|
|
1750
1781
|
super(...arguments);
|
|
1751
1782
|
this.descriptionLabel = 'Description';
|
|
1752
1783
|
this.noRowsMessage = "No items have been added.";
|
|
1784
|
+
this.displayColumnsProvider = (cols) => cols;
|
|
1785
|
+
this.filterProvider = () => true;
|
|
1753
1786
|
this.valueChange = new EventEmitter();
|
|
1787
|
+
this.filterClear = new EventEmitter();
|
|
1788
|
+
this.defaultDisplayColumns = ['description', 'addRemove'];
|
|
1789
|
+
this.displayColumns = [];
|
|
1790
|
+
}
|
|
1791
|
+
ngOnChanges(changes) {
|
|
1792
|
+
// console.log(changes)
|
|
1793
|
+
if (changes.options) {
|
|
1794
|
+
this.refreshRowList();
|
|
1795
|
+
}
|
|
1796
|
+
}
|
|
1797
|
+
ngAfterContentInit() {
|
|
1798
|
+
// console.log('ngAfterContentInit')
|
|
1799
|
+
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
|
|
1800
|
+
setTimeout(() => {
|
|
1801
|
+
this.displayColumns = this.displayColumnsProvider([...this.defaultDisplayColumns]);
|
|
1802
|
+
// console.log( this.displayColumns )
|
|
1803
|
+
// this.changeDetectorRef.detectChanges()
|
|
1804
|
+
});
|
|
1754
1805
|
}
|
|
1755
1806
|
get initialPageState() {
|
|
1756
1807
|
return {
|
|
@@ -1762,12 +1813,7 @@ class ListSelectComponent extends RowListBase {
|
|
|
1762
1813
|
};
|
|
1763
1814
|
}
|
|
1764
1815
|
fetchRowListPage() {
|
|
1765
|
-
|
|
1766
|
-
return of(this.options.filter(o => this.searchRegexp.test(o.description)));
|
|
1767
|
-
}
|
|
1768
|
-
else {
|
|
1769
|
-
return of(this.options);
|
|
1770
|
-
}
|
|
1816
|
+
return of(this.options.filter(o => this.filterOption(o)));
|
|
1771
1817
|
}
|
|
1772
1818
|
displayRowListPage(res) {
|
|
1773
1819
|
return {
|
|
@@ -1801,6 +1847,7 @@ class ListSelectComponent extends RowListBase {
|
|
|
1801
1847
|
onClearFilters() {
|
|
1802
1848
|
this.searchText = null;
|
|
1803
1849
|
this.searchRegexp = null;
|
|
1850
|
+
this.filterClear.emit();
|
|
1804
1851
|
this.refreshRowList();
|
|
1805
1852
|
}
|
|
1806
1853
|
onSearchTextChange(ev) {
|
|
@@ -1815,12 +1862,17 @@ class ListSelectComponent extends RowListBase {
|
|
|
1815
1862
|
}
|
|
1816
1863
|
this.refreshRowList();
|
|
1817
1864
|
}
|
|
1865
|
+
filterOption(option) {
|
|
1866
|
+
if (this.searchRegexp && !this.searchRegexp.test(option.description))
|
|
1867
|
+
return false;
|
|
1868
|
+
return this.filterProvider(option);
|
|
1869
|
+
}
|
|
1818
1870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSelectComponent, selector: "nrcl-list-select", inputs: { options: "options", value: "value", descriptionLabel: "descriptionLabel", single: ["single", "single", booleanAttribute], noRowsMessage: "noRowsMessage" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "@if ( !single ) {\n <div class=\"summary\">\n <h3>{{ value?.length || '0' }} Selected</h3>\n </div>\n}\n\n<nrcl-filters-panel (clearFilters)=\"onClearFilters()\">\n <nrcl-filter-search\n [(value)]=\"searchText\"\n (valueChange)=\"onSearchTextChange( $event )\">\n </nrcl-filter-search>\n</nrcl-filters-panel>\n\n<nrcl-row-list-desktop
|
|
1871
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSelectComponent, selector: "nrcl-list-select", inputs: { options: "options", value: "value", descriptionLabel: "descriptionLabel", single: ["single", "single", booleanAttribute], noRowsMessage: "noRowsMessage", displayColumnsProvider: "displayColumnsProvider", filterProvider: "filterProvider" }, outputs: { valueChange: "valueChange", filterClear: "filterClear" }, queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( !single ) {\n <div class=\"summary\">\n <h3>{{ value?.length || '0' }} Selected</h3>\n </div>\n}\n\n<nrcl-filters-panel (clearFilters)=\"onClearFilters()\">\n <nrcl-filter-search\n [(value)]=\"searchText\"\n (valueChange)=\"onSearchTextChange( $event )\">\n </nrcl-filter-search>\n\n <ng-content select=\"[filter]\"></ng-content>\n</nrcl-filters-panel>\n\n<nrcl-row-list-desktop [class.empty]=\"rows?.length == 0\">\n <mat-table [dataSource]=\"rows\" >\n <ng-container matColumnDef=\"description\">\n <mat-header-cell *matHeaderCellDef>{{ descriptionLabel }}</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content>{{ item.description }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"addRemove\">\n <mat-header-cell *matHeaderCellDef>Add Remove</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-indicator-select [selected]=\"isSelected( item )\"></nrcl-indicator-select>\n </mat-cell>\n </ng-container>\n\n <ng-content></ng-content>\n\n <mat-header-row *matHeaderRowDef=\"displayColumns; sticky: true\"></mat-header-row>\n\n <mat-row\n *matRowDef=\"let item; columns: displayColumns\"\n [class.selected]=\"isSelected( item )\"\n (click)=\"onRowClick( item )\"\n (keypress)=\"onRowClick( item )\"\n ></mat-row>\n </mat-table>\n</nrcl-row-list-desktop>\n\n@if ( totalRowCount == 0 ) {\n <nrcl-row-list-pagination\n paginationId=\"list-select\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host .summary{display:flex;justify-content:flex-end}:host .summary h3{font-size:var(--nrcl-font-size-h3);font-weight:400;padding:0;margin:0;padding-bottom:var(--nrcl-gutter-space)}:host .nrcl-row-list-desktop.empty{display:none}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-description{flex-grow:1}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-addRemove{flex-basis:70px;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: FilterSearchComponent, selector: "nrcl-filter-search", inputs: ["label", "placeholder", "hint", "value", "wide"], outputs: ["valueChange"] }, { kind: "component", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: ["showClear", "showFilters", "hasAdvancedFilters", "showAdvancedFilters"], outputs: ["clearFilters", "showFiltersChange", "showAdvancedFiltersChange"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: IndicatorSelectComponent, selector: "nrcl-indicator-select", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1820
1872
|
}
|
|
1821
1873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectComponent, decorators: [{
|
|
1822
1874
|
type: Component,
|
|
1823
|
-
args: [{ selector: "nrcl-list-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( !single ) {\n <div class=\"summary\">\n <h3>{{ value?.length || '0' }} Selected</h3>\n </div>\n}\n\n<nrcl-filters-panel (clearFilters)=\"onClearFilters()\">\n <nrcl-filter-search\n [(value)]=\"searchText\"\n (valueChange)=\"onSearchTextChange( $event )\">\n </nrcl-filter-search>\n</nrcl-filters-panel>\n\n<nrcl-row-list-desktop
|
|
1875
|
+
args: [{ selector: "nrcl-list-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( !single ) {\n <div class=\"summary\">\n <h3>{{ value?.length || '0' }} Selected</h3>\n </div>\n}\n\n<nrcl-filters-panel (clearFilters)=\"onClearFilters()\">\n <nrcl-filter-search\n [(value)]=\"searchText\"\n (valueChange)=\"onSearchTextChange( $event )\">\n </nrcl-filter-search>\n\n <ng-content select=\"[filter]\"></ng-content>\n</nrcl-filters-panel>\n\n<nrcl-row-list-desktop [class.empty]=\"rows?.length == 0\">\n <mat-table [dataSource]=\"rows\" >\n <ng-container matColumnDef=\"description\">\n <mat-header-cell *matHeaderCellDef>{{ descriptionLabel }}</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content>{{ item.description }}</nrcl-cell-content>\n </mat-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"addRemove\">\n <mat-header-cell *matHeaderCellDef>Add Remove</mat-header-cell>\n <mat-cell *matCellDef=\"let item\">\n <nrcl-indicator-select [selected]=\"isSelected( item )\"></nrcl-indicator-select>\n </mat-cell>\n </ng-container>\n\n <ng-content></ng-content>\n\n <mat-header-row *matHeaderRowDef=\"displayColumns; sticky: true\"></mat-header-row>\n\n <mat-row\n *matRowDef=\"let item; columns: displayColumns\"\n [class.selected]=\"isSelected( item )\"\n (click)=\"onRowClick( item )\"\n (keypress)=\"onRowClick( item )\"\n ></mat-row>\n </mat-table>\n</nrcl-row-list-desktop>\n\n@if ( totalRowCount == 0 ) {\n <nrcl-row-list-pagination\n paginationId=\"list-select\"\n [pageSize]=\"pageSize\"\n [pageNumber]=\"pageNumber\"\n [rowCount]=\"totalRowCount\"\n (pageNumberChange)=\"onPageNumberChange( $event )\"\n (pageSizeChange)=\"onPageSizeChange( $event )\"\n [noRowsMessage]=\"noRowsMessage\"\n ></nrcl-row-list-pagination>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host .summary{display:flex;justify-content:flex-end}:host .summary h3{font-size:var(--nrcl-font-size-h3);font-weight:400;padding:0;margin:0;padding-bottom:var(--nrcl-gutter-space)}:host .nrcl-row-list-desktop.empty{display:none}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-description{flex-grow:1}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-addRemove{flex-basis:70px;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;text-align:center}\n"] }]
|
|
1824
1876
|
}], propDecorators: { options: [{
|
|
1825
1877
|
type: Input
|
|
1826
1878
|
}], value: [{
|
|
@@ -1832,8 +1884,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1832
1884
|
args: [{ transform: booleanAttribute }]
|
|
1833
1885
|
}], noRowsMessage: [{
|
|
1834
1886
|
type: Input
|
|
1887
|
+
}], displayColumnsProvider: [{
|
|
1888
|
+
type: Input
|
|
1889
|
+
}], filterProvider: [{
|
|
1890
|
+
type: Input
|
|
1835
1891
|
}], valueChange: [{
|
|
1836
1892
|
type: Output
|
|
1893
|
+
}], filterClear: [{
|
|
1894
|
+
type: Output
|
|
1895
|
+
}], table: [{
|
|
1896
|
+
type: ViewChild,
|
|
1897
|
+
args: [MatTable, { static: true }]
|
|
1898
|
+
}], columnDefs: [{
|
|
1899
|
+
type: ContentChildren,
|
|
1900
|
+
args: [MatColumnDef]
|
|
1837
1901
|
}] } });
|
|
1838
1902
|
|
|
1839
1903
|
class PageContainerComponent extends NrclBase {
|
|
@@ -1871,7 +1935,7 @@ class SnackbarComponent extends NrclBase {
|
|
|
1871
1935
|
get className() {
|
|
1872
1936
|
return 'snackbar-type-' + this.config.type;
|
|
1873
1937
|
}
|
|
1874
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$
|
|
1938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$8.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1875
1939
|
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", inputs: ["small", "large"] }] }); }
|
|
1876
1940
|
}
|
|
1877
1941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
@@ -1879,7 +1943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1879
1943
|
args: [{ selector: 'nrcl-snackbar', host: {
|
|
1880
1944
|
'[class]': 'className'
|
|
1881
1945
|
}, 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"] }]
|
|
1882
|
-
}], ctorParameters: () => [{ type: i1$
|
|
1946
|
+
}], ctorParameters: () => [{ type: i1$8.MatSnackBarRef }, { type: undefined, decorators: [{
|
|
1883
1947
|
type: Inject,
|
|
1884
1948
|
args: [MAT_SNACK_BAR_DATA]
|
|
1885
1949
|
}] }] });
|
|
@@ -1895,11 +1959,11 @@ class TagListComponent extends NrclBase {
|
|
|
1895
1959
|
this.itemRemoved.emit(this.items.find(i => i.id == id));
|
|
1896
1960
|
}
|
|
1897
1961
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TagListComponent, selector: "nrcl-tag-list", inputs: { items: "items", removable: "removable", noItemsMessage: "noItemsMessage" }, outputs: { itemRemoved: "itemRemoved" }, usesInheritance: true, ngImport: i0, template: "@if ( items?.length > 0 ) {\n <mat-chip-set>\n @for ( item of items; track item.id ) {\n <mat-chip\n (removed)=\"onRemoveItem( item.id )\"\n >\n {{ item.description }}\n\n @if ( removable ) {\n <nrcl-icon small matChipRemove>cancel</nrcl-icon>\n }\n </mat-chip>\n }\n </mat-chip-set>\n} \n@else {\n <span>{{ noItemsMessage }}</span>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep .mat-mdc-chip.mat-mdc-standard-chip{border-radius:5px;border:1px solid #c6c8cb;--mdc-chip-focus-state-layer-opacity: 0;--mdc-chip-label-text-weight: 800;--mdc-chip-elevated-container-color: #f2f2f2}\n"], dependencies: [{ kind: "component", type: i1$
|
|
1962
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TagListComponent, selector: "nrcl-tag-list", inputs: { items: "items", removable: "removable", noItemsMessage: "noItemsMessage" }, outputs: { itemRemoved: "itemRemoved" }, usesInheritance: true, ngImport: i0, template: "@if ( items?.length > 0 ) {\n <mat-chip-set>\n @for ( item of items; track item.id ) {\n <mat-chip\n (removed)=\"onRemoveItem( item.id )\"\n [matTooltip]=\"item.tooltip\"\n >\n @if ( item.icon ) {\n <nrcl-icon small matChipAvatar>{{ item.icon }}</nrcl-icon>\n }\n\n {{ item.description }}\n\n @if ( removable ) {\n <nrcl-icon small matChipRemove>cancel</nrcl-icon>\n }\n </mat-chip>\n }\n </mat-chip-set>\n} \n@else {\n <span>{{ noItemsMessage }}</span>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep .mat-mdc-chip.mat-mdc-standard-chip{border-radius:5px;border:1px solid #c6c8cb;--mdc-chip-focus-state-layer-opacity: 0;--mdc-chip-label-text-weight: 800;--mdc-chip-elevated-container-color: #f2f2f2}\n"], dependencies: [{ kind: "component", type: i1$9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i1$9.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i1$9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$9.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1899
1963
|
}
|
|
1900
1964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagListComponent, decorators: [{
|
|
1901
1965
|
type: Component,
|
|
1902
|
-
args: [{ selector: "nrcl-tag-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( items?.length > 0 ) {\n <mat-chip-set>\n @for ( item of items; track item.id ) {\n <mat-chip\n (removed)=\"onRemoveItem( item.id )\"\n >\n {{ item.description }}\n\n @if ( removable ) {\n <nrcl-icon small matChipRemove>cancel</nrcl-icon>\n }\n </mat-chip>\n }\n </mat-chip-set>\n} \n@else {\n <span>{{ noItemsMessage }}</span>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep .mat-mdc-chip.mat-mdc-standard-chip{border-radius:5px;border:1px solid #c6c8cb;--mdc-chip-focus-state-layer-opacity: 0;--mdc-chip-label-text-weight: 800;--mdc-chip-elevated-container-color: #f2f2f2}\n"] }]
|
|
1966
|
+
args: [{ selector: "nrcl-tag-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( items?.length > 0 ) {\n <mat-chip-set>\n @for ( item of items; track item.id ) {\n <mat-chip\n (removed)=\"onRemoveItem( item.id )\"\n [matTooltip]=\"item.tooltip\"\n >\n @if ( item.icon ) {\n <nrcl-icon small matChipAvatar>{{ item.icon }}</nrcl-icon>\n }\n\n {{ item.description }}\n\n @if ( removable ) {\n <nrcl-icon small matChipRemove>cancel</nrcl-icon>\n }\n </mat-chip>\n }\n </mat-chip-set>\n} \n@else {\n <span>{{ noItemsMessage }}</span>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep .mat-mdc-chip.mat-mdc-standard-chip{border-radius:5px;border:1px solid #c6c8cb;--mdc-chip-focus-state-layer-opacity: 0;--mdc-chip-label-text-weight: 800;--mdc-chip-elevated-container-color: #f2f2f2}\n"] }]
|
|
1903
1967
|
}], propDecorators: { items: [{
|
|
1904
1968
|
type: Input
|
|
1905
1969
|
}], removable: [{
|
|
@@ -1925,7 +1989,7 @@ class DialogComponent extends NrclBase {
|
|
|
1925
1989
|
this.cancelClick = new EventEmitter();
|
|
1926
1990
|
}
|
|
1927
1991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialogComponent, selector: "nrcl-dialog", inputs: { title: "title", isLoading: "isLoading", showClose: "showClose", saveLabel: "saveLabel", saveEnabled: "saveEnabled", cancelLabel: "cancelLabel", cancelEnabled: "cancelEnabled", showWarning: "showWarning", showActions: "showActions" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title >\n <div class=\"title-bar\">\n <h1>{{ title }}</h1>\n\n <div style=\"flex: 1 0\"></div>\n\n @if ( isLoading ) {\n <div class=\"spinner-header\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </div>\n }\n\n @if ( showClose ) {\n <nrcl-button tertiary class=\"close\"\n icon=\"close\"\n (click)=\"cancelClick.emit()\"\n ></nrcl-button> \n }\n </div>\n\n <ng-content select=\"section[title]\"></ng-content>\n</div>\n\n<div mat-dialog-content>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-content select=\"section[footer]\"></ng-content>\n\n@if ( showActions ) {\n <div mat-dialog-actions align=\"end\">\n <ng-content select=\"section[actions]\"></ng-content>\n\n <div class=\"action-button-wrapper\"> \n @if ( saveEnabled && showWarning ) {\n <div class=\"warning\">\n <nrcl-icon attr.alt=\"Unsaved Changes\">warning</nrcl-icon>\n <span>Unsaved Changes</span>\n </div>\n } \n \n @if ( cancelEnabled != null ) {\n <nrcl-button \n [label]=\"cancelLabel\"\n (click)=\"cancelClick.emit()\"\n [disabled]=\"!cancelEnabled\"\n ></nrcl-button>\n }\n\n @if ( saveEnabled != null ) {\n <nrcl-button primary\n [label]=\"saveLabel\"\n (click)=\"saveClick.emit()\" \n [disabled]=\"!saveEnabled\"\n ></nrcl-button>\n }\n </div>\n </div>\n}\n", styles: [":host{display:contents}:host .title-bar{display:flex;align-items:center;background-color:#036;color:#fff;padding:var(--nrcl-gutter-space)}:host .title-bar h1{margin:0;padding:0;font-weight:400;font-family:var(--nrcl-font-family);font-size:var(--mdc-dialog-subhead-size, 1rem);display:flex;align-items:center}:host .title-bar .spinner-header{--mdc-circular-progress-active-indicator-color: white}:host .title-bar .close{display:flex;--nrcl-button-tertiary-foreground-color: white}:host ::ng-deep .mat-mdc-dialog-title{padding:0}:host ::ng-deep .mat-mdc-dialog-title:before{display:none}:host ::ng-deep .mat-mdc-dialog-content{margin:0;padding:0}:host ::ng-deep .mat-mdc-dialog-content .content-wrapper{padding-top:var(--nrcl-gutter-space);padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);padding-bottom:0}:host ::ng-deep .mat-mdc-dialog-actions{margin:0;padding:0}:host ::ng-deep .mat-mdc-dialog-actions .footer{width:100%}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper{background-color:#f2f2f2;border-top:solid 1px #c6c8cb;padding:var(--nrcl-gutter-space);display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper .warning{display:flex;align-items:center}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper .warning .mat-icon{color:#fcba19;margin-right:8px}::ng-deep .cdk-overlay-pane.nrcl-dialog mat-dialog-container.mat-mdc-dialog-container{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .87)}::ng-deep .cdk-overlay-pane.nrcl-dialog mat-dialog-container.mat-mdc-dialog-container .mat-mdc-dialog-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}::ng-deep .nrcl-device-desktop .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface{overflow:hidden}::ng-deep .nrcl-device-desktop .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-content.no-scroll{overflow-y:hidden}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog{width:unset!important;max-width:unset!important}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface{overflow:hidden}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .title-bar .spinner-header{top:10px;right:14px}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-content{overflow-y:auto!important;max-height:calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 135px);width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-actions{width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .max-content-width{width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$
|
|
1992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialogComponent, selector: "nrcl-dialog", inputs: { title: "title", isLoading: "isLoading", showClose: "showClose", saveLabel: "saveLabel", saveEnabled: "saveEnabled", cancelLabel: "cancelLabel", cancelEnabled: "cancelEnabled", showWarning: "showWarning", showActions: "showActions" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title >\n <div class=\"title-bar\">\n <h1>{{ title }}</h1>\n\n <div style=\"flex: 1 0\"></div>\n\n @if ( isLoading ) {\n <div class=\"spinner-header\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </div>\n }\n\n @if ( showClose ) {\n <nrcl-button tertiary class=\"close\"\n icon=\"close\"\n (click)=\"cancelClick.emit()\"\n ></nrcl-button> \n }\n </div>\n\n <ng-content select=\"section[title]\"></ng-content>\n</div>\n\n<div mat-dialog-content>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-content select=\"section[footer]\"></ng-content>\n\n@if ( showActions ) {\n <div mat-dialog-actions align=\"end\">\n <ng-content select=\"section[actions]\"></ng-content>\n\n <div class=\"action-button-wrapper\"> \n @if ( saveEnabled && showWarning ) {\n <div class=\"warning\">\n <nrcl-icon attr.alt=\"Unsaved Changes\">warning</nrcl-icon>\n <span>Unsaved Changes</span>\n </div>\n } \n \n @if ( cancelEnabled != null ) {\n <nrcl-button \n [label]=\"cancelLabel\"\n (click)=\"cancelClick.emit()\"\n [disabled]=\"!cancelEnabled\"\n ></nrcl-button>\n }\n\n @if ( saveEnabled != null ) {\n <nrcl-button primary\n [label]=\"saveLabel\"\n (click)=\"saveClick.emit()\" \n [disabled]=\"!saveEnabled\"\n ></nrcl-button>\n }\n </div>\n </div>\n}\n", styles: [":host{display:contents}:host .title-bar{display:flex;align-items:center;background-color:#036;color:#fff;padding:var(--nrcl-gutter-space)}:host .title-bar h1{margin:0;padding:0;font-weight:400;font-family:var(--nrcl-font-family);font-size:var(--mdc-dialog-subhead-size, 1rem);display:flex;align-items:center}:host .title-bar .spinner-header{--mdc-circular-progress-active-indicator-color: white}:host .title-bar .close{display:flex;--nrcl-button-tertiary-foreground-color: white}:host ::ng-deep .mat-mdc-dialog-title{padding:0}:host ::ng-deep .mat-mdc-dialog-title:before{display:none}:host ::ng-deep .mat-mdc-dialog-content{margin:0;padding:0}:host ::ng-deep .mat-mdc-dialog-content .content-wrapper{padding-top:var(--nrcl-gutter-space);padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);padding-bottom:0}:host ::ng-deep .mat-mdc-dialog-actions{margin:0;padding:0}:host ::ng-deep .mat-mdc-dialog-actions .footer{width:100%}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper{background-color:#f2f2f2;border-top:solid 1px #c6c8cb;padding:var(--nrcl-gutter-space);display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper .warning{display:flex;align-items:center}:host ::ng-deep .mat-mdc-dialog-actions .action-button-wrapper .warning .mat-icon{color:#fcba19;margin-right:8px}::ng-deep .cdk-overlay-pane.nrcl-dialog mat-dialog-container.mat-mdc-dialog-container{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .87)}::ng-deep .cdk-overlay-pane.nrcl-dialog mat-dialog-container.mat-mdc-dialog-container .mat-mdc-dialog-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}::ng-deep .nrcl-device-desktop .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface{overflow:hidden}::ng-deep .nrcl-device-desktop .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-content.no-scroll{overflow-y:hidden}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog{width:unset!important;max-width:unset!important}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-surface{overflow:hidden}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .title-bar .spinner-header{top:10px;right:14px}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-content{overflow-y:auto!important;max-height:calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 135px);width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .mat-mdc-dialog-actions{width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}::ng-deep .nrcl-device-mobile .cdk-overlay-pane.nrcl-dialog .mat-mdc-dialog-container .max-content-width{width:calc(var(--vw, 1vw) * 100 - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--nrcl-gutter-space))}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1929
1993
|
}
|
|
1930
1994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1931
1995
|
type: Component,
|