@bcgov/nr-ngx-component-lib 0.0.9 → 0.0.10
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 +8 -3
- package/esm2022/components/filter-select/filter-select.component.mjs +57 -35
- 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 +58 -36
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -603,6 +603,7 @@ class FilterSelectComponent extends NrclBase {
|
|
|
603
603
|
this.summary = true;
|
|
604
604
|
this.clear = true;
|
|
605
605
|
this.filter = true;
|
|
606
|
+
this.filterCharsMin = 0;
|
|
606
607
|
this.valueChange = new EventEmitter();
|
|
607
608
|
this.floatLabel = 'auto';
|
|
608
609
|
this.isFiltered = false;
|
|
@@ -614,6 +615,26 @@ class FilterSelectComponent extends NrclBase {
|
|
|
614
615
|
this.overlay = inject(Overlay);
|
|
615
616
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
616
617
|
}
|
|
618
|
+
ngOnInit() {
|
|
619
|
+
super.ngOnInit();
|
|
620
|
+
this.clickSubscription = fromEvent(document, 'click')
|
|
621
|
+
.pipe(filter((event) => {
|
|
622
|
+
const clickTarget = event.target;
|
|
623
|
+
const triggerEl = this.trigger.nativeElement;
|
|
624
|
+
const overlayEl = this.overlayRef?.overlayElement;
|
|
625
|
+
// console.log(triggerEl,overlayEl)
|
|
626
|
+
// Only close if click is outside both trigger and overlay
|
|
627
|
+
return !triggerEl?.contains(clickTarget)
|
|
628
|
+
&& !overlayEl?.contains(clickTarget);
|
|
629
|
+
}))
|
|
630
|
+
.subscribe(() => {
|
|
631
|
+
// console.log('outside click')
|
|
632
|
+
this.close();
|
|
633
|
+
this.setInputToSelection();
|
|
634
|
+
this.floatLabel = 'auto';
|
|
635
|
+
this.changeDetectorRef.detectChanges();
|
|
636
|
+
});
|
|
637
|
+
}
|
|
617
638
|
ngOnChanges(changes) {
|
|
618
639
|
if (this.isOpen)
|
|
619
640
|
return;
|
|
@@ -651,6 +672,9 @@ class FilterSelectComponent extends NrclBase {
|
|
|
651
672
|
}
|
|
652
673
|
}
|
|
653
674
|
}
|
|
675
|
+
ngOnDestroy() {
|
|
676
|
+
this.clickSubscription?.unsubscribe();
|
|
677
|
+
}
|
|
654
678
|
get single() {
|
|
655
679
|
return this.selectMax == 1;
|
|
656
680
|
}
|
|
@@ -659,15 +683,12 @@ class FilterSelectComponent extends NrclBase {
|
|
|
659
683
|
this.valueChange.emit(this.selection.value || []);
|
|
660
684
|
}
|
|
661
685
|
open() {
|
|
686
|
+
// console.log('open',this.isOpen,this.filterCharsMin && !this.isFiltered)
|
|
662
687
|
if (this.isOpen)
|
|
663
688
|
return;
|
|
689
|
+
if (this.filterCharsMin && !this.isFiltered)
|
|
690
|
+
return;
|
|
664
691
|
this.isOpen = true;
|
|
665
|
-
this.floatLabel = 'always';
|
|
666
|
-
if (this.filter) {
|
|
667
|
-
this.inputValue = '';
|
|
668
|
-
}
|
|
669
|
-
else {
|
|
670
|
-
}
|
|
671
692
|
// Create overlay
|
|
672
693
|
const positionStrategy = this.overlay
|
|
673
694
|
.position()
|
|
@@ -701,40 +722,19 @@ class FilterSelectComponent extends NrclBase {
|
|
|
701
722
|
// Attach template
|
|
702
723
|
const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
|
|
703
724
|
this.overlayRef.attach(portal);
|
|
704
|
-
// Listen to document clicks after a small delay to avoid closing immediately
|
|
705
|
-
setTimeout(() => {
|
|
706
|
-
this.clickSubscription = fromEvent(document, 'click')
|
|
707
|
-
.pipe(filter((event) => {
|
|
708
|
-
const clickTarget = event.target;
|
|
709
|
-
const triggerEl = this.trigger.nativeElement;
|
|
710
|
-
const overlayEl = this.overlayRef?.overlayElement;
|
|
711
|
-
// Only close if click is outside both trigger and overlay
|
|
712
|
-
return !triggerEl.contains(clickTarget)
|
|
713
|
-
&& !overlayEl?.contains(clickTarget);
|
|
714
|
-
}))
|
|
715
|
-
.subscribe(() => {
|
|
716
|
-
this.close();
|
|
717
|
-
});
|
|
718
|
-
});
|
|
719
725
|
// Focus input after overlay is attached
|
|
720
726
|
setTimeout(() => {
|
|
721
727
|
this.filterInput?.nativeElement.focus();
|
|
722
|
-
// prevent list from scrolling when selection changes
|
|
723
|
-
this.overlayRef
|
|
724
|
-
});
|
|
725
|
-
this.setFilter();
|
|
728
|
+
// prevent list from scrolling when selection changes
|
|
729
|
+
this.overlayRef?.overlayElement.children[0].scroll(0, 1);
|
|
730
|
+
}, 100);
|
|
726
731
|
this.openingValue = JSON.stringify(this.selection.value);
|
|
727
732
|
}
|
|
728
733
|
close() {
|
|
734
|
+
// console.log('close',this.isOpen)
|
|
729
735
|
if (!this.isOpen)
|
|
730
736
|
return;
|
|
731
737
|
this.isOpen = false;
|
|
732
|
-
this.setInputToSelection();
|
|
733
|
-
this.floatLabel = 'auto';
|
|
734
|
-
if (this.clickSubscription) {
|
|
735
|
-
this.clickSubscription.unsubscribe();
|
|
736
|
-
this.clickSubscription = null;
|
|
737
|
-
}
|
|
738
738
|
if (this.overlayRef) {
|
|
739
739
|
this.overlayRef.dispose();
|
|
740
740
|
this.overlayRef = null;
|
|
@@ -746,19 +746,26 @@ class FilterSelectComponent extends NrclBase {
|
|
|
746
746
|
}
|
|
747
747
|
setInputToSelection() {
|
|
748
748
|
this.inputValue = this.selection?.value?.map(c => this.descriptionForCode(c)).join(', ') || null;
|
|
749
|
+
this.isFiltered = false;
|
|
749
750
|
}
|
|
750
751
|
onInput(ev) {
|
|
751
752
|
this.setFilter(ev?.target?.value);
|
|
752
753
|
}
|
|
753
754
|
setFilter(text) {
|
|
754
755
|
let t = text?.trim().toLowerCase();
|
|
755
|
-
if (t) {
|
|
756
|
+
if (t?.length >= this.filterCharsMin) {
|
|
757
|
+
// console.log('filtering')
|
|
756
758
|
this.isFiltered = true;
|
|
757
759
|
this.match = (option) => option.description.toLowerCase().includes(t);
|
|
760
|
+
if (this.filterCharsMin)
|
|
761
|
+
this.open();
|
|
758
762
|
}
|
|
759
763
|
else {
|
|
764
|
+
// console.log('not filtering')
|
|
760
765
|
this.isFiltered = false;
|
|
761
766
|
this.match = (o) => true;
|
|
767
|
+
if (this.filterCharsMin)
|
|
768
|
+
this.close();
|
|
762
769
|
}
|
|
763
770
|
this.changeDetectorRef.detectChanges();
|
|
764
771
|
}
|
|
@@ -768,6 +775,8 @@ class FilterSelectComponent extends NrclBase {
|
|
|
768
775
|
onSelectionChange(ev) {
|
|
769
776
|
if (this.single) {
|
|
770
777
|
this.close();
|
|
778
|
+
this.setInputToSelection();
|
|
779
|
+
this.floatLabel = 'auto';
|
|
771
780
|
}
|
|
772
781
|
else {
|
|
773
782
|
this.filterInput?.nativeElement.focus();
|
|
@@ -796,8 +805,18 @@ class FilterSelectComponent extends NrclBase {
|
|
|
796
805
|
this.emitValueChange();
|
|
797
806
|
}
|
|
798
807
|
onInputFocus() {
|
|
808
|
+
// console.log('onInputFocus')
|
|
809
|
+
this.floatLabel = 'always';
|
|
810
|
+
if (this.filter) {
|
|
811
|
+
this.inputValue = '';
|
|
812
|
+
this.setFilter();
|
|
813
|
+
}
|
|
799
814
|
this.open();
|
|
800
815
|
}
|
|
816
|
+
onInputBlur() {
|
|
817
|
+
// if ( this.filterCharsMin )
|
|
818
|
+
// console.log('onInputBlur')
|
|
819
|
+
}
|
|
801
820
|
onCloseClick() {
|
|
802
821
|
this.close();
|
|
803
822
|
}
|
|
@@ -805,7 +824,7 @@ class FilterSelectComponent extends NrclBase {
|
|
|
805
824
|
return this.options.find(o => o.code == code)?.description;
|
|
806
825
|
}
|
|
807
826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
808
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 (blur)=\"onInputBlur()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
809
828
|
}
|
|
810
829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
811
830
|
type: Component,
|
|
@@ -814,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
814
833
|
'[class.is-open]': "isOpen",
|
|
815
834
|
'[class.is-closed]': "!isOpen",
|
|
816
835
|
'[class.use-filter]': "filter",
|
|
817
|
-
}, template: "<mat-form-field #trigger\n [floatLabel]=\"floatLabel\"\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n>\n @if ( label ) {\n <mat-label>{{ label }}</mat-label>\n }\n\n <input class=\"filter-input\" #searchInput\n matInput \n [placeholder]=\"placeholder\" \n [value]=\"inputValue\"\n (input)=\"onInput( $event )\"\n (keydown.escape)=\"close()\"\n (focus)=\"onInputFocus()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"] }]
|
|
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 (blur)=\"onInputBlur()\"\n [matTooltip]=\"inputValue\"\n [readonly]=\"!filter\"\n >\n\n @if ( isOpen ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCloseClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>arrow_drop_up</nrcl-icon>\n </button>\n }\n @else if ( selection?.value?.length > 0 && clear ) {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n (click)=\"onCancelClick($event); $event.stopPropagation()\"\n >\n <nrcl-icon>close</nrcl-icon>\n </button>\n }\n @else {\n <button class=\"cancel\"\n mat-icon-button\n matSuffix\n >\n <nrcl-icon>arrow_drop_down</nrcl-icon>\n </button>\n } \n\n @if ( hint ) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n</mat-form-field> \n\n<ng-template #overlayTemplate>\n <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n @if ( !isFiltered && !single && summary ) {\n @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n <mat-selection-list\n (selectionChange)=\"onUpperSelectionChange( $event )\"\n >\n @for ( code of selection?.value; track code ) {\n <mat-list-option \n [value]=\"code\" \n togglePosition=\"before\"\n selected\n [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n matTooltipPosition=\"after\"\n >\n {{ descriptionForCode( code ) }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n }\n\n @if ( selection?.value?.length == options?.length ) {\n <div class=\"selection-overview\">\n <div class=\"summary\">All options selected</div>\n </div>\n }\n }\n\n <mat-selection-list\n [formControl]=\"selection\"\n (selectionChange)=\"onSelectionChange( $event )\"\n [multiple]=\"!single\"\n hideSingleSelectionIndicator\n >\n @for ( option of options; track option ) {\n <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n [value]=\"option.code\" \n togglePosition=\"before\" \n [matTooltip]=\"tooltips ? option.description : null\"\n matTooltipPosition=\"after\" \n >\n {{ option.description }}\n </mat-list-option>\n }\n </mat-selection-list>\n </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"] }]
|
|
818
837
|
}], propDecorators: { label: [{
|
|
819
838
|
type: Input
|
|
820
839
|
}], placeholder: [{
|
|
@@ -840,6 +859,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
840
859
|
}], filter: [{
|
|
841
860
|
type: Input,
|
|
842
861
|
args: [{ transform: booleanAttribute }]
|
|
862
|
+
}], filterCharsMin: [{
|
|
863
|
+
type: Input,
|
|
864
|
+
args: [{ transform: numberAttribute }]
|
|
843
865
|
}], valueChange: [{
|
|
844
866
|
type: Output
|
|
845
867
|
}], trigger: [{
|
|
@@ -1346,7 +1368,7 @@ class RowListPaginationComponent extends NrclBase {
|
|
|
1346
1368
|
return this.rowCount;
|
|
1347
1369
|
}
|
|
1348
1370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, usesInheritance: true, ngImport: i0, template: "@if ( hasRows ) {\n <nrcl-filter-container class=\"summary\"\n label=\"Showing Rows\"\n >\n <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n </nrcl-filter-container>\n}\n@else {\n <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n <div class=\"pagination\">\n <pagination-controls \n [id]=\"paginationId\" \n [maxSize]=\"paginationMaxSize\"\n [responsive]=\"false\"\n [directionLinks]=\"true\"\n previousLabel=\"\"\n nextLabel=\"\"\n [autoHide]=\"false\"\n (pageChange)=\"onPageNumberChange( $event )\"\n ></pagination-controls>\n </div>\n}\n\n@if ( hasRows && showPageSize ) {\n <nrcl-filter-select class=\"page-size\"\n label=\"Page Size\"\n [value]=\"[ pageSize ]\"\n [options]=\"pageSizeOptions\"\n (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n selectMax=\"1\"\n [clear]=\"false\"\n [filter]=\"false\"\n placeholder=\"Select...\"\n ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
1350
1372
|
}
|
|
1351
1373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
|
|
1352
1374
|
type: Component,
|
|
@@ -1568,7 +1590,7 @@ class RowListSortingComponent extends NrclBase {
|
|
|
1568
1590
|
});
|
|
1569
1591
|
}
|
|
1570
1592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: { sortColumn: "sortColumn", sortColumnOptions: "sortColumnOptions", sortDirection: "sortDirection" }, outputs: { sortChange: "sortChange" }, usesInheritance: true, ngImport: i0, template: "<nrcl-filter-select class=\"sort-order\" \n label=\"Sort By\"\n [value]=\"wrapFilterValue( sortColumn )\"\n [options]=\"sortColumnOptions\"\n (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n selectMax=\"1\" \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n label=\"Sort Order\"\n>\n <mat-radio-group\n [(ngModel)]=\"sortDirection\" \n (ngModelChange)=\"onSortDirectionChange()\"\n [disabled]=\"!sortColumn\"\n >\n <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A → Z</mat-radio-button>\n <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z → A</mat-radio-button>\n </mat-radio-group>\n</nrcl-filter-container>\n", styles: [":host{gap:8px;width:100%;display:grid;grid-template-columns:1fr 1fr}:host .sort-order{--nrcl-filter-select-width: auto;grid-column:1}:host .sort-direction{--nrcl-filter-container-width: auto;grid-column:2}:host .sort-direction ::ng-deep .content .mat-mdc-radio-group{justify-content:space-evenly;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }] }); }
|
|
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"] }] }); }
|
|
1572
1594
|
}
|
|
1573
1595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
|
|
1574
1596
|
type: Component,
|