@bcgov/nr-ngx-component-lib 0.0.2 → 0.0.3
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/list-attachments/list-attachments.component.d.ts +55 -0
- package/components/list-event-history/list-event-history.component.d.ts +47 -0
- package/esm2022/components/cell-content/cell-content.component.mjs +2 -2
- package/esm2022/components/list-attachments/list-attachments.component.mjs +80 -0
- package/esm2022/components/list-event-history/list-event-history.component.mjs +65 -0
- package/esm2022/components/row-list-desktop/row-list-desktop.component.mjs +2 -2
- package/esm2022/components/row-list-mobile/row-list-mobile.component.mjs +2 -2
- package/esm2022/nr-ngx-component-lib.module.mjs +11 -1
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs +359 -234
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/nr-ngx-component-lib.module.d.ts +31 -29
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -27,18 +27,21 @@ import { TemplatePortal } from '@angular/cdk/portal';
|
|
|
27
27
|
import { filter } from 'rxjs/operators';
|
|
28
28
|
import * as i6$1 from '@angular/material/list';
|
|
29
29
|
import { MatListModule } from '@angular/material/list';
|
|
30
|
+
import * as i1$3 from '@angular/material/card';
|
|
31
|
+
import { MatCardModule } from '@angular/material/card';
|
|
32
|
+
import * as i3$3 from '@angular/material/sort';
|
|
33
|
+
import { MatSortModule } from '@angular/material/sort';
|
|
34
|
+
import * as i4 from '@angular/material/table';
|
|
35
|
+
import { MatTableModule } from '@angular/material/table';
|
|
30
36
|
import * as i1$2 from 'ngx-pagination';
|
|
31
37
|
import { NgxPaginationModule } from 'ngx-pagination';
|
|
32
38
|
import * as i2$3 from '@angular/material/radio';
|
|
33
39
|
import { MatRadioModule } from '@angular/material/radio';
|
|
34
|
-
import * as i1$
|
|
40
|
+
import * as i1$4 from '@angular/material/snack-bar';
|
|
35
41
|
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
|
|
36
42
|
import { CommonModule } from '@angular/common';
|
|
37
|
-
import { MatCardModule } from '@angular/material/card';
|
|
38
43
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
39
44
|
import { MatMenuModule } from '@angular/material/menu';
|
|
40
|
-
import { MatSortModule } from '@angular/material/sort';
|
|
41
|
-
import { MatTableModule } from '@angular/material/table';
|
|
42
45
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
43
46
|
import { RouterModule } from '@angular/router';
|
|
44
47
|
|
|
@@ -185,11 +188,11 @@ class CellContentComponent {
|
|
|
185
188
|
});
|
|
186
189
|
}
|
|
187
190
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
189
192
|
}
|
|
190
193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, decorators: [{
|
|
191
194
|
type: Component,
|
|
192
|
-
args: [{ selector: 'nrcl-cell-content', template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)
|
|
195
|
+
args: [{ selector: 'nrcl-cell-content', template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n @if ( content ) {\n {{ content }}\n }\n @else {\n <ng-content></ng-content>\n }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"] }]
|
|
193
196
|
}], propDecorators: { tooltip: [{
|
|
194
197
|
type: Input
|
|
195
198
|
}], content: [{
|
|
@@ -893,233 +896,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
893
896
|
args: [{ transform: booleanAttribute }]
|
|
894
897
|
}] } });
|
|
895
898
|
|
|
896
|
-
class PageContainerComponent {
|
|
897
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageContainerComponent, selector: "nrcl-page-container", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
899
|
-
}
|
|
900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, decorators: [{
|
|
901
|
-
type: Component,
|
|
902
|
-
args: [{ selector: "nrcl-page-container", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"] }]
|
|
903
|
-
}] });
|
|
904
|
-
|
|
905
|
-
class PageHeaderComponent {
|
|
906
|
-
constructor() {
|
|
907
|
-
this.isLoading = false;
|
|
908
|
-
}
|
|
909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, ngImport: i0, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
911
|
-
}
|
|
912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
913
|
-
type: Component,
|
|
914
|
-
args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
915
|
-
'[class.isLoading]': 'isLoading',
|
|
916
|
-
}, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"] }]
|
|
917
|
-
}], propDecorators: { isLoading: [{
|
|
918
|
-
type: Input
|
|
919
|
-
}] } });
|
|
920
|
-
|
|
921
|
-
class RowListDesktopComponent {
|
|
922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
924
|
-
}
|
|
925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, decorators: [{
|
|
926
|
-
type: Component,
|
|
927
|
-
args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"] }]
|
|
928
|
-
}] });
|
|
929
|
-
|
|
930
|
-
class RowListMobileComponent {
|
|
931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListMobileComponent, selector: "nrcl-row-list-mobile", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;line-height:normal}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section cell-content{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
933
|
-
}
|
|
934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, decorators: [{
|
|
935
|
-
type: Component,
|
|
936
|
-
args: [{ selector: "nrcl-row-list-mobile", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;line-height:normal}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section cell-content{font-weight:700}\n"] }]
|
|
937
|
-
}] });
|
|
938
|
-
|
|
939
|
-
class RowListPaginationComponent {
|
|
940
|
-
constructor() {
|
|
941
|
-
this.paginationId = '1';
|
|
942
|
-
this.pageSizeOptions = [
|
|
943
|
-
{ code: 5, description: '5 Rows' },
|
|
944
|
-
{ code: 10, description: '10 Rows' },
|
|
945
|
-
{ code: 20, description: '20 Rows' },
|
|
946
|
-
{ code: 50, description: '50 Rows' },
|
|
947
|
-
{ code: 100, description: '100 Rows' },
|
|
948
|
-
];
|
|
949
|
-
this.pageSize = 20;
|
|
950
|
-
this.showPageSize = true;
|
|
951
|
-
this.pageSizeChange = new EventEmitter();
|
|
952
|
-
this.pageNumberChange = new EventEmitter();
|
|
953
|
-
this.componentWidth = 'sufficient';
|
|
954
|
-
this.paginationMaxSize = 5;
|
|
955
|
-
this.elementRef = inject(ElementRef);
|
|
956
|
-
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
957
|
-
}
|
|
958
|
-
ngAfterViewInit() {
|
|
959
|
-
this.checkWidth();
|
|
960
|
-
}
|
|
961
|
-
onPageSizeChange(ev) {
|
|
962
|
-
this.pageSizeChange.emit(Number(ev));
|
|
963
|
-
}
|
|
964
|
-
onPageNumberChange(ev) {
|
|
965
|
-
this.pageNumberChange.emit(Number(ev));
|
|
966
|
-
}
|
|
967
|
-
onResize(event) {
|
|
968
|
-
this.checkWidth();
|
|
969
|
-
}
|
|
970
|
-
checkWidth() {
|
|
971
|
-
setTimeout(() => {
|
|
972
|
-
let w = this.elementRef?.nativeElement.offsetWidth;
|
|
973
|
-
if (!w)
|
|
974
|
-
return;
|
|
975
|
-
switch (true) {
|
|
976
|
-
case w > 600:
|
|
977
|
-
this.componentWidth = 'sufficient';
|
|
978
|
-
this.paginationMaxSize = 5;
|
|
979
|
-
break;
|
|
980
|
-
case w > 500:
|
|
981
|
-
this.componentWidth = 'tight';
|
|
982
|
-
this.paginationMaxSize = 3;
|
|
983
|
-
break;
|
|
984
|
-
default:
|
|
985
|
-
this.componentWidth = 'restrictive';
|
|
986
|
-
this.paginationMaxSize = 4;
|
|
987
|
-
}
|
|
988
|
-
this.changeDetectorRef.detectChanges();
|
|
989
|
-
});
|
|
990
|
-
}
|
|
991
|
-
get pageCount() {
|
|
992
|
-
if (!this.hasRows)
|
|
993
|
-
return 0;
|
|
994
|
-
return Math.ceil(this.rowCount / this.pageSize);
|
|
995
|
-
}
|
|
996
|
-
get firstRow() {
|
|
997
|
-
if (!this.hasRows)
|
|
998
|
-
return 0;
|
|
999
|
-
return (Math.min(this.pageCount, this.pageNumber) - 1) * this.pageSize + 1;
|
|
1000
|
-
}
|
|
1001
|
-
get lastRow() {
|
|
1002
|
-
if (!this.hasRows)
|
|
1003
|
-
return 0;
|
|
1004
|
-
return Math.min(this.firstRow + this.pageSize - 1, this.rowCount);
|
|
1005
|
-
}
|
|
1006
|
-
get hasRows() {
|
|
1007
|
-
return this.rowCount && this.pageSize;
|
|
1008
|
-
}
|
|
1009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1010
|
-
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" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">No records to display.</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 ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i1$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1011
|
-
}
|
|
1012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1013
|
-
type: Component,
|
|
1014
|
-
args: [{ selector: "nrcl-row-list-pagination", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1015
|
-
'[class.width-sufficient]': "componentWidth == 'sufficient'",
|
|
1016
|
-
'[class.width-tight]': "componentWidth == 'tight'",
|
|
1017
|
-
'[class.width-restrictive]': "componentWidth == 'restrictive'",
|
|
1018
|
-
}, 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\">No records to display.</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 ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"] }]
|
|
1019
|
-
}], propDecorators: { paginationId: [{
|
|
1020
|
-
type: Input
|
|
1021
|
-
}], pageSizeOptions: [{
|
|
1022
|
-
type: Input
|
|
1023
|
-
}], pageSize: [{
|
|
1024
|
-
type: Input
|
|
1025
|
-
}], pageNumber: [{
|
|
1026
|
-
type: Input
|
|
1027
|
-
}], rowCount: [{
|
|
1028
|
-
type: Input
|
|
1029
|
-
}], showPageSize: [{
|
|
1030
|
-
type: Input
|
|
1031
|
-
}], pageSizeChange: [{
|
|
1032
|
-
type: Output
|
|
1033
|
-
}], pageNumberChange: [{
|
|
1034
|
-
type: Output
|
|
1035
|
-
}], onResize: [{
|
|
1036
|
-
type: HostListener,
|
|
1037
|
-
args: ["window:resize", ["$event"]]
|
|
1038
|
-
}] } });
|
|
1039
|
-
|
|
1040
|
-
function wrapFilterValue(val) {
|
|
1041
|
-
if (!val)
|
|
1042
|
-
return [];
|
|
1043
|
-
if (Array.isArray(val))
|
|
1044
|
-
return val;
|
|
1045
|
-
return [val];
|
|
1046
|
-
}
|
|
1047
|
-
function unwrapFilterValue(val) {
|
|
1048
|
-
if (!val)
|
|
1049
|
-
return '';
|
|
1050
|
-
if (Array.isArray(val))
|
|
1051
|
-
return val[0] || '';
|
|
1052
|
-
return val;
|
|
1053
|
-
}
|
|
1054
|
-
function mapToCodeDescription(list, codeField, descriptionField) {
|
|
1055
|
-
if (!list)
|
|
1056
|
-
return list;
|
|
1057
|
-
return list.map(v => {
|
|
1058
|
-
return {
|
|
1059
|
-
code: v[codeField],
|
|
1060
|
-
description: v[descriptionField]
|
|
1061
|
-
};
|
|
1062
|
-
});
|
|
1063
|
-
}
|
|
1064
|
-
|
|
1065
|
-
class RowListSortingComponent {
|
|
1066
|
-
constructor() {
|
|
1067
|
-
this.sortColumnOptions = [];
|
|
1068
|
-
this.sortDirection = 'asc';
|
|
1069
|
-
this.sortChange = new EventEmitter();
|
|
1070
|
-
this.wrapFilterValue = wrapFilterValue;
|
|
1071
|
-
this.unwrapFilterValue = unwrapFilterValue;
|
|
1072
|
-
}
|
|
1073
|
-
onSortColumnChange(ev) {
|
|
1074
|
-
this.sortColumn = ev;
|
|
1075
|
-
this.emitSortChange();
|
|
1076
|
-
}
|
|
1077
|
-
onSortDirectionChange() {
|
|
1078
|
-
this.emitSortChange();
|
|
1079
|
-
}
|
|
1080
|
-
emitSortChange() {
|
|
1081
|
-
this.sortChange.emit({
|
|
1082
|
-
active: this.sortColumn,
|
|
1083
|
-
direction: this.sortDirection
|
|
1084
|
-
});
|
|
1085
|
-
}
|
|
1086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }] }); }
|
|
1088
|
-
}
|
|
1089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1090
|
-
type: Component,
|
|
1091
|
-
args: [{ selector: "nrcl-row-list-sorting", 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"] }]
|
|
1092
|
-
}], propDecorators: { sortColumn: [{
|
|
1093
|
-
type: Input
|
|
1094
|
-
}], sortColumnOptions: [{
|
|
1095
|
-
type: Input
|
|
1096
|
-
}], sortDirection: [{
|
|
1097
|
-
type: Input
|
|
1098
|
-
}], sortChange: [{
|
|
1099
|
-
type: Output
|
|
1100
|
-
}] } });
|
|
1101
|
-
|
|
1102
|
-
class SnackbarComponent {
|
|
1103
|
-
constructor(snackBarRef, config) {
|
|
1104
|
-
this.snackBarRef = snackBarRef;
|
|
1105
|
-
this.config = config;
|
|
1106
|
-
}
|
|
1107
|
-
get className() {
|
|
1108
|
-
return 'snackbar-type-' + this.config.type;
|
|
1109
|
-
}
|
|
1110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$3.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SnackbarComponent, selector: "nrcl-snackbar", host: { properties: { "class": "className" } }, ngImport: i0, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <mat-icon>check_circle</mat-icon>\n }\n @case ( 'error' ) {\n <mat-icon>cancel</mat-icon>\n }\n @case ( 'info' ) {\n <mat-icon>info</mat-icon>\n }\n @case ( 'update' ) {\n <mat-icon>error</mat-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 ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 mat-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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1112
|
-
}
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
1114
|
-
type: Component,
|
|
1115
|
-
args: [{ selector: 'nrcl-snackbar', host: {
|
|
1116
|
-
'[class]': 'className'
|
|
1117
|
-
}, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <mat-icon>check_circle</mat-icon>\n }\n @case ( 'error' ) {\n <mat-icon>cancel</mat-icon>\n }\n @case ( 'info' ) {\n <mat-icon>info</mat-icon>\n }\n @case ( 'update' ) {\n <mat-icon>error</mat-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 ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 mat-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"] }]
|
|
1118
|
-
}], ctorParameters: () => [{ type: i1$3.MatSnackBarRef }, { type: undefined, decorators: [{
|
|
1119
|
-
type: Inject,
|
|
1120
|
-
args: [MAT_SNACK_BAR_DATA]
|
|
1121
|
-
}] }] });
|
|
1122
|
-
|
|
1123
899
|
class PageStateService {
|
|
1124
900
|
constructor() {
|
|
1125
901
|
this.classRegistry = new WeakMap();
|
|
@@ -1336,6 +1112,347 @@ function makeSummary(rowCount, pageNumber, pageSize) {
|
|
|
1336
1112
|
}
|
|
1337
1113
|
}
|
|
1338
1114
|
|
|
1115
|
+
class RowListDesktopComponent {
|
|
1116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1118
|
+
}
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, decorators: [{
|
|
1120
|
+
type: Component,
|
|
1121
|
+
args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"] }]
|
|
1122
|
+
}] });
|
|
1123
|
+
|
|
1124
|
+
class RowListMobileComponent {
|
|
1125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListMobileComponent, selector: "nrcl-row-list-mobile", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1127
|
+
}
|
|
1128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, decorators: [{
|
|
1129
|
+
type: Component,
|
|
1130
|
+
args: [{ selector: "nrcl-row-list-mobile", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"] }]
|
|
1131
|
+
}] });
|
|
1132
|
+
|
|
1133
|
+
class RowListPaginationComponent {
|
|
1134
|
+
constructor() {
|
|
1135
|
+
this.paginationId = '1';
|
|
1136
|
+
this.pageSizeOptions = [
|
|
1137
|
+
{ code: 5, description: '5 Rows' },
|
|
1138
|
+
{ code: 10, description: '10 Rows' },
|
|
1139
|
+
{ code: 20, description: '20 Rows' },
|
|
1140
|
+
{ code: 50, description: '50 Rows' },
|
|
1141
|
+
{ code: 100, description: '100 Rows' },
|
|
1142
|
+
];
|
|
1143
|
+
this.pageSize = 20;
|
|
1144
|
+
this.showPageSize = true;
|
|
1145
|
+
this.pageSizeChange = new EventEmitter();
|
|
1146
|
+
this.pageNumberChange = new EventEmitter();
|
|
1147
|
+
this.componentWidth = 'sufficient';
|
|
1148
|
+
this.paginationMaxSize = 5;
|
|
1149
|
+
this.elementRef = inject(ElementRef);
|
|
1150
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
1151
|
+
}
|
|
1152
|
+
ngAfterViewInit() {
|
|
1153
|
+
this.checkWidth();
|
|
1154
|
+
}
|
|
1155
|
+
onPageSizeChange(ev) {
|
|
1156
|
+
this.pageSizeChange.emit(Number(ev));
|
|
1157
|
+
}
|
|
1158
|
+
onPageNumberChange(ev) {
|
|
1159
|
+
this.pageNumberChange.emit(Number(ev));
|
|
1160
|
+
}
|
|
1161
|
+
onResize(event) {
|
|
1162
|
+
this.checkWidth();
|
|
1163
|
+
}
|
|
1164
|
+
checkWidth() {
|
|
1165
|
+
setTimeout(() => {
|
|
1166
|
+
let w = this.elementRef?.nativeElement.offsetWidth;
|
|
1167
|
+
if (!w)
|
|
1168
|
+
return;
|
|
1169
|
+
switch (true) {
|
|
1170
|
+
case w > 600:
|
|
1171
|
+
this.componentWidth = 'sufficient';
|
|
1172
|
+
this.paginationMaxSize = 5;
|
|
1173
|
+
break;
|
|
1174
|
+
case w > 500:
|
|
1175
|
+
this.componentWidth = 'tight';
|
|
1176
|
+
this.paginationMaxSize = 3;
|
|
1177
|
+
break;
|
|
1178
|
+
default:
|
|
1179
|
+
this.componentWidth = 'restrictive';
|
|
1180
|
+
this.paginationMaxSize = 4;
|
|
1181
|
+
}
|
|
1182
|
+
this.changeDetectorRef.detectChanges();
|
|
1183
|
+
});
|
|
1184
|
+
}
|
|
1185
|
+
get pageCount() {
|
|
1186
|
+
if (!this.hasRows)
|
|
1187
|
+
return 0;
|
|
1188
|
+
return Math.ceil(this.rowCount / this.pageSize);
|
|
1189
|
+
}
|
|
1190
|
+
get firstRow() {
|
|
1191
|
+
if (!this.hasRows)
|
|
1192
|
+
return 0;
|
|
1193
|
+
return (Math.min(this.pageCount, this.pageNumber) - 1) * this.pageSize + 1;
|
|
1194
|
+
}
|
|
1195
|
+
get lastRow() {
|
|
1196
|
+
if (!this.hasRows)
|
|
1197
|
+
return 0;
|
|
1198
|
+
return Math.min(this.firstRow + this.pageSize - 1, this.rowCount);
|
|
1199
|
+
}
|
|
1200
|
+
get hasRows() {
|
|
1201
|
+
return this.rowCount && this.pageSize;
|
|
1202
|
+
}
|
|
1203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1204
|
+
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" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">No records to display.</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 ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i1$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1205
|
+
}
|
|
1206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1207
|
+
type: Component,
|
|
1208
|
+
args: [{ selector: "nrcl-row-list-pagination", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1209
|
+
'[class.width-sufficient]': "componentWidth == 'sufficient'",
|
|
1210
|
+
'[class.width-tight]': "componentWidth == 'tight'",
|
|
1211
|
+
'[class.width-restrictive]': "componentWidth == 'restrictive'",
|
|
1212
|
+
}, 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\">No records to display.</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 ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"] }]
|
|
1213
|
+
}], propDecorators: { paginationId: [{
|
|
1214
|
+
type: Input
|
|
1215
|
+
}], pageSizeOptions: [{
|
|
1216
|
+
type: Input
|
|
1217
|
+
}], pageSize: [{
|
|
1218
|
+
type: Input
|
|
1219
|
+
}], pageNumber: [{
|
|
1220
|
+
type: Input
|
|
1221
|
+
}], rowCount: [{
|
|
1222
|
+
type: Input
|
|
1223
|
+
}], showPageSize: [{
|
|
1224
|
+
type: Input
|
|
1225
|
+
}], pageSizeChange: [{
|
|
1226
|
+
type: Output
|
|
1227
|
+
}], pageNumberChange: [{
|
|
1228
|
+
type: Output
|
|
1229
|
+
}], onResize: [{
|
|
1230
|
+
type: HostListener,
|
|
1231
|
+
args: ["window:resize", ["$event"]]
|
|
1232
|
+
}] } });
|
|
1233
|
+
|
|
1234
|
+
class ListAttachmentsComponent extends RowListBase {
|
|
1235
|
+
constructor() {
|
|
1236
|
+
super(...arguments);
|
|
1237
|
+
this.canDelete = true;
|
|
1238
|
+
this.showPagination = false;
|
|
1239
|
+
this.DATE_FORMATS = DATE_FORMATS;
|
|
1240
|
+
this.columns = ['attachmentTypeCode', 'fileName', 'sourceObjectNameCode', 'uploadedBy', 'uploadedTimestamp', 'description', 'download'];
|
|
1241
|
+
}
|
|
1242
|
+
initializeRowList() {
|
|
1243
|
+
super.initializeRowList();
|
|
1244
|
+
}
|
|
1245
|
+
get initialPageState() {
|
|
1246
|
+
return {
|
|
1247
|
+
filter: {},
|
|
1248
|
+
pageSize: 5,
|
|
1249
|
+
pageNumber: 1,
|
|
1250
|
+
sortActive: null,
|
|
1251
|
+
sortDirection: 'desc',
|
|
1252
|
+
};
|
|
1253
|
+
}
|
|
1254
|
+
ngAfterViewInit() {
|
|
1255
|
+
if (this.canDelete)
|
|
1256
|
+
this.columns.push('delete');
|
|
1257
|
+
super.ngAfterViewInit();
|
|
1258
|
+
}
|
|
1259
|
+
fetchRowListPage() {
|
|
1260
|
+
if (!this.rowListProvider?.fetchAttachments)
|
|
1261
|
+
throw Error('no provider');
|
|
1262
|
+
return this.rowListProvider.fetchAttachments({
|
|
1263
|
+
pageNumber: this.pageNumber,
|
|
1264
|
+
pageRowCount: this.pageSize,
|
|
1265
|
+
sortColumn: this.sortActive,
|
|
1266
|
+
sortDirection: this.sortDirection,
|
|
1267
|
+
});
|
|
1268
|
+
}
|
|
1269
|
+
displayRowListPage(res) {
|
|
1270
|
+
if (!this.rowListProvider?.displayRowListPage)
|
|
1271
|
+
throw Error('no provider');
|
|
1272
|
+
return this.rowListProvider.displayRowListPage(res);
|
|
1273
|
+
}
|
|
1274
|
+
onDownloadClick(item) {
|
|
1275
|
+
if (!this.rowListProvider?.downloadItem)
|
|
1276
|
+
throw Error('no provider');
|
|
1277
|
+
return this.rowListProvider.downloadItem(item);
|
|
1278
|
+
}
|
|
1279
|
+
onDeleteClick(item) {
|
|
1280
|
+
if (!this.rowListProvider?.deleteItem)
|
|
1281
|
+
throw Error('no provider');
|
|
1282
|
+
return this.rowListProvider.deleteItem(item);
|
|
1283
|
+
}
|
|
1284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination" }, usesInheritance: true, ngImport: i0, template: "<nrcl-desktop-view>\n <nrcl-row-list-desktop>\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: showPagination ? pageSize : totalRowCount, \n currentPage: showPagination ? pageNumber : 1, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"make\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Make</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.make }}</nrcl-cell-content>\n </td>\n </ng-container>\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 At</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 <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n label=\"Download\"\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></th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n label=\"Delete\"\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 </nrcl-row-list-desktop>\n\n @if ( showPagination ) {\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n }\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: showPagination ? pageSize : totalRowCount, \n currentPage: showPagination ? pageNumber : 1, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.fileName }}</h2>\n </section>\n\n <section actions>\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </section>\n </mat-card-title>\n\n <mat-card-content>\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 At</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 </mat-card>\n }\n </nrcl-row-list-mobile>\n\n @if ( showPagination ) {\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n }\n</nrcl-mobile-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:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}: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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "disabled"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: DesktopViewComponent, selector: "nrcl-desktop-view" }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: MobileViewComponent, selector: "nrcl-mobile-view" }, { 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"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "pipe", type: i1$2.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1286
|
+
}
|
|
1287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
|
|
1288
|
+
type: Component,
|
|
1289
|
+
args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-desktop-view>\n <nrcl-row-list-desktop>\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: showPagination ? pageSize : totalRowCount, \n currentPage: showPagination ? pageNumber : 1, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"make\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Make</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.make }}</nrcl-cell-content>\n </td>\n </ng-container>\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 At</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 <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"download\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n label=\"Download\"\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></th>\n <td mat-cell *matCellDef=\"let item\">\n <div class=\"button-container\">\n <nrcl-button compact\n label=\"Delete\"\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 </nrcl-row-list-desktop>\n\n @if ( showPagination ) {\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n }\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: showPagination ? pageSize : totalRowCount, \n currentPage: showPagination ? pageNumber : 1, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.fileName }}</h2>\n </section>\n\n <section actions>\n <nrcl-button compact\n label=\"Download\"\n icon=\"download\"\n (click)=\"onDownloadClick( item )\" \n ></nrcl-button>\n\n @if ( canDelete ) {\n <nrcl-button compact\n label=\"Delete\"\n icon=\"delete\"\n (click)=\"onDeleteClick( item )\"\n ></nrcl-button>\n }\n </section>\n </mat-card-title>\n\n <mat-card-content>\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 At</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 </mat-card>\n }\n </nrcl-row-list-mobile>\n\n @if ( showPagination ) {\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n }\n</nrcl-mobile-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:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}: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"] }]
|
|
1290
|
+
}], propDecorators: { rowListProvider: [{
|
|
1291
|
+
type: Input
|
|
1292
|
+
}], canDelete: [{
|
|
1293
|
+
type: Input
|
|
1294
|
+
}], showPagination: [{
|
|
1295
|
+
type: Input
|
|
1296
|
+
}] } });
|
|
1297
|
+
|
|
1298
|
+
class ListEventHistoryComponent extends RowListBase {
|
|
1299
|
+
constructor() {
|
|
1300
|
+
super(...arguments);
|
|
1301
|
+
this.canDelete = true;
|
|
1302
|
+
this.showPagination = false;
|
|
1303
|
+
this.isSupplier = false;
|
|
1304
|
+
this.DATE_FORMATS = DATE_FORMATS;
|
|
1305
|
+
this.columns = ['dateTime', 'changedBy', 'type', 'section', 'comment'];
|
|
1306
|
+
}
|
|
1307
|
+
fetchRowListPage() {
|
|
1308
|
+
if (!this.rowListProvider?.fetchEventHistory)
|
|
1309
|
+
throw Error('no provider');
|
|
1310
|
+
return this.rowListProvider.fetchEventHistory({
|
|
1311
|
+
isSupplier: this.isSupplier,
|
|
1312
|
+
pageNumber: this.pageNumber,
|
|
1313
|
+
pageRowCount: this.pageSize,
|
|
1314
|
+
sortColumn: this.sortActive,
|
|
1315
|
+
sortDirection: this.sortDirection,
|
|
1316
|
+
});
|
|
1317
|
+
}
|
|
1318
|
+
displayRowListPage(res) {
|
|
1319
|
+
if (!this.rowListProvider?.displayRowListPage)
|
|
1320
|
+
throw Error('no provider');
|
|
1321
|
+
return this.rowListProvider.displayRowListPage(res);
|
|
1322
|
+
}
|
|
1323
|
+
get initialPageState() {
|
|
1324
|
+
return {
|
|
1325
|
+
filter: {},
|
|
1326
|
+
pageSize: 20,
|
|
1327
|
+
pageNumber: 1,
|
|
1328
|
+
sortActive: 'dateTime',
|
|
1329
|
+
sortDirection: 'desc',
|
|
1330
|
+
};
|
|
1331
|
+
}
|
|
1332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1333
|
+
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" }, usesInheritance: true, ngImport: i0, template: "<nrcl-desktop-view>\n <nrcl-row-list-desktop>\n <table 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 <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"changedBy\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"type\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"section\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"comment\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\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 </nrcl-row-list-desktop>\n\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\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.attachmentId ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.comment }}</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>Time</mat-label>\n <div class=\"value\">{{ item.eventTimestamp }}</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 vertical/>\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 ></nrcl-row-list-pagination>\n</nrcl-mobile-view>\n\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"], dependencies: [{ kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: DesktopViewComponent, selector: "nrcl-desktop-view" }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: MobileViewComponent, selector: "nrcl-mobile-view" }, { 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"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "pipe", type: i1$2.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1334
|
+
}
|
|
1335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, decorators: [{
|
|
1336
|
+
type: Component,
|
|
1337
|
+
args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-desktop-view>\n <nrcl-row-list-desktop>\n <table 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 <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"changedBy\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"type\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"section\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"comment\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\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 </nrcl-row-list-desktop>\n\n <nrcl-gap vertical/>\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 ></nrcl-row-list-pagination>\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\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.attachmentId ) {\n <mat-card>\n <mat-card-title>\n <section title>\n <h2>{{ item.comment }}</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>Time</mat-label>\n <div class=\"value\">{{ item.eventTimestamp }}</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 vertical/>\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 ></nrcl-row-list-pagination>\n</nrcl-mobile-view>\n\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"] }]
|
|
1338
|
+
}], propDecorators: { rowListProvider: [{
|
|
1339
|
+
type: Input
|
|
1340
|
+
}], canDelete: [{
|
|
1341
|
+
type: Input
|
|
1342
|
+
}], showPagination: [{
|
|
1343
|
+
type: Input
|
|
1344
|
+
}], isSupplier: [{
|
|
1345
|
+
type: Input
|
|
1346
|
+
}] } });
|
|
1347
|
+
|
|
1348
|
+
class PageContainerComponent {
|
|
1349
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1350
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageContainerComponent, selector: "nrcl-page-container", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1351
|
+
}
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, decorators: [{
|
|
1353
|
+
type: Component,
|
|
1354
|
+
args: [{ selector: "nrcl-page-container", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"] }]
|
|
1355
|
+
}] });
|
|
1356
|
+
|
|
1357
|
+
class PageHeaderComponent {
|
|
1358
|
+
constructor() {
|
|
1359
|
+
this.isLoading = false;
|
|
1360
|
+
}
|
|
1361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, ngImport: i0, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1363
|
+
}
|
|
1364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1365
|
+
type: Component,
|
|
1366
|
+
args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1367
|
+
'[class.isLoading]': 'isLoading',
|
|
1368
|
+
}, template: "<div class=\"left-side\">\n <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"] }]
|
|
1369
|
+
}], propDecorators: { isLoading: [{
|
|
1370
|
+
type: Input
|
|
1371
|
+
}] } });
|
|
1372
|
+
|
|
1373
|
+
function wrapFilterValue(val) {
|
|
1374
|
+
if (!val)
|
|
1375
|
+
return [];
|
|
1376
|
+
if (Array.isArray(val))
|
|
1377
|
+
return val;
|
|
1378
|
+
return [val];
|
|
1379
|
+
}
|
|
1380
|
+
function unwrapFilterValue(val) {
|
|
1381
|
+
if (!val)
|
|
1382
|
+
return '';
|
|
1383
|
+
if (Array.isArray(val))
|
|
1384
|
+
return val[0] || '';
|
|
1385
|
+
return val;
|
|
1386
|
+
}
|
|
1387
|
+
function mapToCodeDescription(list, codeField, descriptionField) {
|
|
1388
|
+
if (!list)
|
|
1389
|
+
return list;
|
|
1390
|
+
return list.map(v => {
|
|
1391
|
+
return {
|
|
1392
|
+
code: v[codeField],
|
|
1393
|
+
description: v[descriptionField]
|
|
1394
|
+
};
|
|
1395
|
+
});
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
class RowListSortingComponent {
|
|
1399
|
+
constructor() {
|
|
1400
|
+
this.sortColumnOptions = [];
|
|
1401
|
+
this.sortDirection = 'asc';
|
|
1402
|
+
this.sortChange = new EventEmitter();
|
|
1403
|
+
this.wrapFilterValue = wrapFilterValue;
|
|
1404
|
+
this.unwrapFilterValue = unwrapFilterValue;
|
|
1405
|
+
}
|
|
1406
|
+
onSortColumnChange(ev) {
|
|
1407
|
+
this.sortColumn = ev;
|
|
1408
|
+
this.emitSortChange();
|
|
1409
|
+
}
|
|
1410
|
+
onSortDirectionChange() {
|
|
1411
|
+
this.emitSortChange();
|
|
1412
|
+
}
|
|
1413
|
+
emitSortChange() {
|
|
1414
|
+
this.sortChange.emit({
|
|
1415
|
+
active: this.sortColumn,
|
|
1416
|
+
direction: this.sortDirection
|
|
1417
|
+
});
|
|
1418
|
+
}
|
|
1419
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }] }); }
|
|
1421
|
+
}
|
|
1422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1423
|
+
type: Component,
|
|
1424
|
+
args: [{ selector: "nrcl-row-list-sorting", 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"] }]
|
|
1425
|
+
}], propDecorators: { sortColumn: [{
|
|
1426
|
+
type: Input
|
|
1427
|
+
}], sortColumnOptions: [{
|
|
1428
|
+
type: Input
|
|
1429
|
+
}], sortDirection: [{
|
|
1430
|
+
type: Input
|
|
1431
|
+
}], sortChange: [{
|
|
1432
|
+
type: Output
|
|
1433
|
+
}] } });
|
|
1434
|
+
|
|
1435
|
+
class SnackbarComponent {
|
|
1436
|
+
constructor(snackBarRef, config) {
|
|
1437
|
+
this.snackBarRef = snackBarRef;
|
|
1438
|
+
this.config = config;
|
|
1439
|
+
}
|
|
1440
|
+
get className() {
|
|
1441
|
+
return 'snackbar-type-' + this.config.type;
|
|
1442
|
+
}
|
|
1443
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$4.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SnackbarComponent, selector: "nrcl-snackbar", host: { properties: { "class": "className" } }, ngImport: i0, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <mat-icon>check_circle</mat-icon>\n }\n @case ( 'error' ) {\n <mat-icon>cancel</mat-icon>\n }\n @case ( 'info' ) {\n <mat-icon>info</mat-icon>\n }\n @case ( 'update' ) {\n <mat-icon>error</mat-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 ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 mat-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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1445
|
+
}
|
|
1446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
1447
|
+
type: Component,
|
|
1448
|
+
args: [{ selector: 'nrcl-snackbar', host: {
|
|
1449
|
+
'[class]': 'className'
|
|
1450
|
+
}, template: "<div class=\"icon\">\n @switch ( config.type ) {\n @case ( 'success' ) {\n <mat-icon>check_circle</mat-icon>\n }\n @case ( 'error' ) {\n <mat-icon>cancel</mat-icon>\n }\n @case ( 'info' ) {\n <mat-icon>info</mat-icon>\n }\n @case ( 'update' ) {\n <mat-icon>error</mat-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 ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 mat-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"] }]
|
|
1451
|
+
}], ctorParameters: () => [{ type: i1$4.MatSnackBarRef }, { type: undefined, decorators: [{
|
|
1452
|
+
type: Inject,
|
|
1453
|
+
args: [MAT_SNACK_BAR_DATA]
|
|
1454
|
+
}] }] });
|
|
1455
|
+
|
|
1339
1456
|
class SnackbarUtilService {
|
|
1340
1457
|
constructor() {
|
|
1341
1458
|
this.snackbar = inject(MatSnackBar);
|
|
@@ -1440,6 +1557,8 @@ class NrNgxComponentLibModule {
|
|
|
1440
1557
|
FormFieldComponent,
|
|
1441
1558
|
FormLayoutComponent,
|
|
1442
1559
|
GapComponent,
|
|
1560
|
+
ListAttachmentsComponent,
|
|
1561
|
+
ListEventHistoryComponent,
|
|
1443
1562
|
MobileViewComponent,
|
|
1444
1563
|
PageContainerComponent,
|
|
1445
1564
|
PageHeaderComponent,
|
|
@@ -1483,6 +1602,8 @@ class NrNgxComponentLibModule {
|
|
|
1483
1602
|
FormFieldComponent,
|
|
1484
1603
|
FormLayoutComponent,
|
|
1485
1604
|
GapComponent,
|
|
1605
|
+
ListAttachmentsComponent,
|
|
1606
|
+
ListEventHistoryComponent,
|
|
1486
1607
|
MobileViewComponent,
|
|
1487
1608
|
PageContainerComponent,
|
|
1488
1609
|
PageHeaderComponent,
|
|
@@ -1563,6 +1684,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1563
1684
|
FormFieldComponent,
|
|
1564
1685
|
FormLayoutComponent,
|
|
1565
1686
|
GapComponent,
|
|
1687
|
+
ListAttachmentsComponent,
|
|
1688
|
+
ListEventHistoryComponent,
|
|
1566
1689
|
MobileViewComponent,
|
|
1567
1690
|
PageContainerComponent,
|
|
1568
1691
|
PageHeaderComponent,
|
|
@@ -1587,6 +1710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1587
1710
|
FormFieldComponent,
|
|
1588
1711
|
FormLayoutComponent,
|
|
1589
1712
|
GapComponent,
|
|
1713
|
+
ListAttachmentsComponent,
|
|
1714
|
+
ListEventHistoryComponent,
|
|
1590
1715
|
MobileViewComponent,
|
|
1591
1716
|
PageContainerComponent,
|
|
1592
1717
|
PageHeaderComponent,
|
|
@@ -1613,5 +1738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1613
1738
|
* Generated bundle index. Do not edit.
|
|
1614
1739
|
*/
|
|
1615
1740
|
|
|
1616
|
-
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, MobileViewComponent, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
1741
|
+
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewComponent, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
1617
1742
|
//# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map
|