@bcgov/nr-ngx-component-lib 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/filter-select/filter-select.component.d.ts +4 -2
- package/esm2022/components/filter-select/filter-select.component.mjs +13 -8
- package/esm2022/components/list-attachments/list-attachments.component.mjs +3 -3
- package/esm2022/components/row-list-pagination/row-list-pagination.component.mjs +1 -1
- package/esm2022/components/row-list-sorting/row-list-sorting.component.mjs +1 -1
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs +16 -11
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -604,6 +604,7 @@ class FilterSelectComponent extends NrclBase {
|
|
|
604
604
|
this.clear = true;
|
|
605
605
|
this.filter = true;
|
|
606
606
|
this.filterCharsMin = 0;
|
|
607
|
+
this.optionFormatter = (o, p) => o.description;
|
|
607
608
|
this.valueChange = new EventEmitter();
|
|
608
609
|
this.floatLabel = 'auto';
|
|
609
610
|
this.isFiltered = false;
|
|
@@ -745,7 +746,7 @@ class FilterSelectComponent extends NrclBase {
|
|
|
745
746
|
this.emitValueChange();
|
|
746
747
|
}
|
|
747
748
|
setInputToSelection() {
|
|
748
|
-
this.inputValue = this.selection?.value?.map(c => this.
|
|
749
|
+
this.inputValue = this.selection?.value?.map(c => this.optionFormatter(this.optionForCode(c), true)).join(', ') || null;
|
|
749
750
|
this.isFiltered = false;
|
|
750
751
|
}
|
|
751
752
|
onInput(ev) {
|
|
@@ -813,18 +814,20 @@ class FilterSelectComponent extends NrclBase {
|
|
|
813
814
|
}
|
|
814
815
|
this.open();
|
|
815
816
|
}
|
|
816
|
-
onInputBlur() {
|
|
817
|
-
// if ( this.filterCharsMin )
|
|
818
|
-
// console.log('onInputBlur')
|
|
819
|
-
}
|
|
820
817
|
onCloseClick() {
|
|
821
818
|
this.close();
|
|
822
819
|
}
|
|
823
820
|
descriptionForCode(code) {
|
|
824
821
|
return this.options.find(o => o.code == code)?.description;
|
|
825
822
|
}
|
|
823
|
+
optionForCode(code) {
|
|
824
|
+
return this.options.find(o => o.code == code);
|
|
825
|
+
}
|
|
826
|
+
formatOption(option) {
|
|
827
|
+
return this.optionFormatter(option, false);
|
|
828
|
+
}
|
|
826
829
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterCharsMin: ["filterCharsMin", "filterCharsMin", numberAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n
|
|
830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterCharsMin: ["filterCharsMin", "filterCharsMin", numberAttribute], optionFormatter: "optionFormatter" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n <span [innerHTML]=\"formatOption( optionForCode( code ) )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n <span [innerHTML]=\"formatOption( option )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
828
831
|
}
|
|
829
832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
830
833
|
type: Component,
|
|
@@ -833,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
833
836
|
'[class.is-open]': "isOpen",
|
|
834
837
|
'[class.is-closed]': "!isOpen",
|
|
835
838
|
'[class.use-filter]': "filter",
|
|
836
|
-
}, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n
|
|
839
|
+
}, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n <span [innerHTML]=\"formatOption( optionForCode( code ) )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n <span [innerHTML]=\"formatOption( option )\"></span>\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"] }]
|
|
837
840
|
}], propDecorators: { label: [{
|
|
838
841
|
type: Input
|
|
839
842
|
}], placeholder: [{
|
|
@@ -862,6 +865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
862
865
|
}], filterCharsMin: [{
|
|
863
866
|
type: Input,
|
|
864
867
|
args: [{ transform: numberAttribute }]
|
|
868
|
+
}], optionFormatter: [{
|
|
869
|
+
type: Input
|
|
865
870
|
}], valueChange: [{
|
|
866
871
|
type: Output
|
|
867
872
|
}], trigger: [{
|
|
@@ -1368,7 +1373,7 @@ class RowListPaginationComponent extends NrclBase {
|
|
|
1368
1373
|
return this.rowCount;
|
|
1369
1374
|
}
|
|
1370
1375
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, usesInheritance: true, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n <div class=\"pagination\">\n <pagination-controls \n [id]=\"paginationId\" \n [maxSize]=\"paginationMaxSize\"\n [responsive]=\"false\"\n [directionLinks]=\"true\"\n previousLabel=\"\"\n nextLabel=\"\"\n [autoHide]=\"false\"\n (pageChange)=\"onPageNumberChange( $event )\"\n ></pagination-controls>\n </div>\n}\n\n@if ( hasRows && showPageSize ) {\n <nrcl-filter-select class=\"page-size\"\n label=\"Page Size\"\n [value]=\"[ pageSize ]\"\n [options]=\"pageSizeOptions\"\n (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n selectMax=\"1\"\n [clear]=\"false\"\n [filter]=\"false\"\n placeholder=\"Select...\"\n ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, usesInheritance: true, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n <div class=\"pagination\">\n <pagination-controls \n [id]=\"paginationId\" \n [maxSize]=\"paginationMaxSize\"\n [responsive]=\"false\"\n [directionLinks]=\"true\"\n previousLabel=\"\"\n nextLabel=\"\"\n [autoHide]=\"false\"\n (pageChange)=\"onPageNumberChange( $event )\"\n ></pagination-controls>\n </div>\n}\n\n@if ( hasRows && showPageSize ) {\n <nrcl-filter-select class=\"page-size\"\n label=\"Page Size\"\n [value]=\"[ pageSize ]\"\n [options]=\"pageSizeOptions\"\n (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n selectMax=\"1\"\n [clear]=\"false\"\n [filter]=\"false\"\n placeholder=\"Select...\"\n ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin", "optionFormatter"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1372
1377
|
}
|
|
1373
1378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1374
1379
|
type: Component,
|
|
@@ -1453,11 +1458,11 @@ class ListAttachmentsComponent extends RowListBase {
|
|
|
1453
1458
|
return this.rowListProvider.deleteItem(item);
|
|
1454
1459
|
}
|
|
1455
1460
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", canDownload: "canDownload" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: showPagination ? pageSize : totalRowCount, \n currentPage: showPagination ? pageNumber : 1, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <th mat-header-cell *matHeaderCellDef>File Name</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <th mat-header-cell *matHeaderCellDef>File Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <th mat-header-cell *matHeaderCellDef>Uploaded 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\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell\" colspan=\"8\">No records to display.</td>\n </tr> \n </table>\n }\n </nrcl-row-list-desktop>\n\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 </ng-template>\n\n <ng-template 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 <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 </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width: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$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$5.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1461
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", canDownload: "canDownload" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <th mat-header-cell *matHeaderCellDef>File Name</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <th mat-header-cell *matHeaderCellDef>File Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <th mat-header-cell *matHeaderCellDef>Uploaded 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 }\n </nrcl-row-list-desktop>\n\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 </ng-template>\n\n <ng-template mobile-view>\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-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 <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 </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width: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$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$5.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1457
1462
|
}
|
|
1458
1463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
|
|
1459
1464
|
type: Component,
|
|
1460
|
-
args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage:
|
|
1465
|
+
args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n <ng-template desktop-view>\n <nrcl-row-list-desktop>\n @if ( rows?.length > 0 ) {\n <table mat-table\n [dataSource]=\"rows | paginate: { \n id: 'desktop-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }\"\n >\n <ng-container matColumnDef=\"attachmentTypeCode\">\n <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"fileName\">\n <th mat-header-cell *matHeaderCellDef>File Name</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"sourceObjectNameCode\">\n <th mat-header-cell *matHeaderCellDef>File Type</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedBy\">\n <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n <td mat-cell *matCellDef=\"let item\">\n <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"uploadedTimestamp\">\n <th mat-header-cell *matHeaderCellDef>Uploaded 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 }\n </nrcl-row-list-desktop>\n\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 </ng-template>\n\n <ng-template mobile-view>\n <nrcl-row-list-mobile>\n @for ( item of rows | paginate: { \n id: 'mobile-attachments', \n itemsPerPage: pageSize, \n currentPage: pageNumber, \n totalItems: totalRowCount \n }; track item.attachmentId ) {\n <mat-card>\n <mat-card-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 <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 </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width: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"] }]
|
|
1461
1466
|
}], propDecorators: { rowListProvider: [{
|
|
1462
1467
|
type: Input
|
|
1463
1468
|
}], canDelete: [{
|
|
@@ -1590,7 +1595,7 @@ class RowListSortingComponent extends NrclBase {
|
|
|
1590
1595
|
});
|
|
1591
1596
|
}
|
|
1592
1597
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, usesInheritance: true, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin"], outputs: ["valueChange"] }] }); }
|
|
1598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, usesInheritance: true, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter", "filterCharsMin", "optionFormatter"], outputs: ["valueChange"] }] }); }
|
|
1594
1599
|
}
|
|
1595
1600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1596
1601
|
type: Component,
|