@bcgov/nr-ngx-component-lib 0.0.12 → 0.0.14

package/fesm2022/bcgov-nr-ngx-component-lib.mjs

@@ -827,7 +827,7 @@ class FilterSelectComponent extends NrclBase {
         return this.optionFormatter(option, false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterCharsMin: ["filterCharsMin", "filterCharsMin", numberAttribute], optionFormatter: "optionFormatter", overlayClass: "overlayClass" }, 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\" [class]=\"overlayClass\">\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
@@ -836,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[class.is-open]': "isOpen",
                         '[class.is-closed]': "!isOpen",
                         '[class.use-filter]': "filter",
-                    }, 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"] }]
+                    }, 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\" [class]=\"overlayClass\">\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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -867,6 +867,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ transform: numberAttribute }]
             }], optionFormatter: [{
                 type: Input
+            }], overlayClass: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], trigger: [{
@@ -1045,6 +1047,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "nrcl-form-layout", template: "<ng-content></ng-content>", changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;gap:var(--nrcl-gutter-space);grid-template-columns:repeat(var(--nrcl-form-layout-columns),1fr)}:host>::ng-deep [layoutwidth=\"2\"]{grid-column:span 2}:host>::ng-deep [layoutwidth=full]{grid-column:span var(--nrcl-form-layout-columns)}\n"] }]
         }] });
 
+class IndicatorComponent extends NrclBase {
+    constructor() {
+        super(...arguments);
+        this._content = 'none';
+        this.elementRef = inject(ElementRef);
+    }
+    set status(v) {
+        this._status = v;
+    }
+    get status() {
+        if (this._status)
+            return this._status;
+        return this._content;
+    }
+    ngAfterContentChecked() {
+        let t = this.elementRef?.nativeElement?.textContent;
+        this._content = t?.toLowerCase().trim().replace(/[^-a-z0-9]+/g, '-') || 'none';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IndicatorComponent, selector: "nrcl-indicator", inputs: { status: "status" }, host: { properties: { "class": "'status-' + status" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content><div class="none"></div>', isInline: true, styles: ["::ng-deep :root{--nrcl-indicator-text-color: black;--nrcl-indicator-border-color: black;--nrcl-indicator-background-color: #f2f2f2}:host{display:inline-block;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size-small);font-weight:700;padding:2px;color:var(--nrcl-indicator-text-color);border:2px solid var(--nrcl-indicator-border-color);background-color:var(--nrcl-indicator-background-color);border-radius:5px;align-self:flex-start;text-align:center;min-width:80px}:host .none{display:none}:host .none:after{content:\"(None)\"}:host.status-none{--nrcl-indicator-text-color: gray;--nrcl-indicator-border-color: gray}:host.status-none .none{display:block}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-indicator', template: '<ng-content></ng-content><div class="none"></div>', host: {
+                        '[class]': "'status-' + status"
+                    }, styles: ["::ng-deep :root{--nrcl-indicator-text-color: black;--nrcl-indicator-border-color: black;--nrcl-indicator-background-color: #f2f2f2}:host{display:inline-block;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size-small);font-weight:700;padding:2px;color:var(--nrcl-indicator-text-color);border:2px solid var(--nrcl-indicator-border-color);background-color:var(--nrcl-indicator-background-color);border-radius:5px;align-self:flex-start;text-align:center;min-width:80px}:host .none{display:none}:host .none:after{content:\"(None)\"}:host.status-none{--nrcl-indicator-text-color: gray;--nrcl-indicator-border-color: gray}:host.status-none .none{display:block}\n"] }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
+
 class GapComponent extends NrclBase {
     constructor() {
         super(...arguments);
@@ -1373,7 +1405,7 @@ class RowListPaginationComponent extends NrclBase {
         return this.rowCount;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
+    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", "overlayClass"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
             type: Component,
@@ -1595,7 +1627,7 @@ class RowListSortingComponent extends NrclBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    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 &rarr; Z</mat-radio-button>\n        <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z &rarr; 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"] }] }); }
+    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 &rarr; Z</mat-radio-button>\n        <mat-radio-button aria-label=\"Sort Z to A\" value=\"desc\">Z &rarr; 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", "overlayClass"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
             type: Component,
@@ -1747,7 +1779,8 @@ class NrNgxComponentLibModule {
             DesktopViewDirective,
             MobileViewDirective,
             DeviceViewComponent,
-            IconComponent], imports: [BrowserAnimationsModule,
+            IconComponent,
+            IndicatorComponent], imports: [BrowserAnimationsModule,
             CommonModule,
             FormsModule,
             MatButtonModule,
@@ -1794,7 +1827,8 @@ class NrNgxComponentLibModule {
             DesktopViewDirective,
             MobileViewDirective,
             DeviceViewComponent,
-            IconComponent] }); }
+            IconComponent,
+            IndicatorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, providers: [
             SnackbarUtilService,
             ConfigurationService,
@@ -1879,6 +1913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MobileViewDirective,
                         DeviceViewComponent,
                         IconComponent,
+                        IndicatorComponent,
                     ],
                     exports: [
                         ButtonComponent,
@@ -1907,6 +1942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MobileViewDirective,
                         DeviceViewComponent,
                         IconComponent,
+                        IndicatorComponent,
                     ],
                     providers: [
                         SnackbarUtilService,
@@ -1925,5 +1961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
+export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, IndicatorComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
 //# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map