@bcgov/nr-ngx-component-lib 0.0.1

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

@@ -0,0 +1,1617 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, Directive, EventEmitter, NgZone, booleanAttribute, Component, Input, Output, ElementRef, ChangeDetectionStrategy, ViewChild, ViewContainerRef, numberAttribute, Renderer2, HostListener, Inject, NgModule } from '@angular/core';
+import { BehaviorSubject, fromEvent } from 'rxjs';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i2$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import moment from 'moment';
+import * as i1$1 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@busacca/ng-pick-datetime';
+import { OwlDateTimeModule, OwlMomentDateTimeModule, OWL_DATE_TIME_FORMATS } from '@busacca/ng-pick-datetime';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+import * as i6$1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i1$2 from 'ngx-pagination';
+import { NgxPaginationModule } from 'ngx-pagination';
+import * as i2$3 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i1$3 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+
+class ConfigurationService {
+    constructor() {
+        this._defaultConfiguration = {
+            displayMode: 'desktop'
+        };
+        this.configSubject = new BehaviorSubject(this._defaultConfiguration);
+        // Observable that components can subscribe to
+        this.configurationObservable = this.configSubject.asObservable();
+        this.configurationObservable.subscribe((c) => {
+            let el = document.querySelector('body');
+            el.classList.toggle('nrcl-device-desktop', c.displayMode == 'desktop');
+            el.classList.toggle('nrcl-device-mobile', c.displayMode == 'mobile');
+        });
+    }
+    // Get current config value synchronously
+    get configuration() {
+        return this.configSubject.value;
+    }
+    // Update entire config
+    update(configuration) {
+        this.configSubject.next({
+            ...this.configSubject.value,
+            ...configuration
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ConfigurationSubscriberBase {
+    constructor() {
+        this.configurationService = inject(ConfigurationService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    ngOnInit() {
+        this.configurationSubscription = this.configurationService.configurationObservable.subscribe((c) => {
+            this.configuration = c;
+            this.onConfigurationChange();
+            this.changeDetectorRef.detectChanges();
+        });
+        this.configuration = this.configurationService.configuration;
+    }
+    ngOnDestroy() {
+        if (this.configurationSubscription)
+            this.configurationSubscription.unsubscribe();
+    }
+    onConfigurationChange() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationSubscriberBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConfigurationSubscriberBase, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfigurationSubscriberBase, decorators: [{
+            type: Directive
+        }] });
+
+class ButtonComponent extends ConfigurationSubscriberBase {
+    constructor() {
+        super(...arguments);
+        this.primary = false;
+        this.disabled = false;
+        this.click = new EventEmitter();
+        this.zone = inject(NgZone);
+    }
+    onClick(ev) {
+        if (this.disabled)
+            return;
+        this.click.emit(ev);
+    }
+    onConfigurationChange() {
+        // apparently this is needed to ensure that the host binding updates properly
+        this.zone.run(() => {
+            if (this.compact == null || this.compact === false) {
+                this.isCompact = false;
+            }
+            else if (this.compact == '' || this.compact === true) {
+                this.isCompact = true;
+            }
+            else {
+                this.isCompact = this.compact == this.configuration.displayMode;
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, selector: "nrcl-button", inputs: { label: "label", icon: "icon", iconRight: "iconRight", iconCompact: "iconCompact", tooltip: "tooltip", compact: "compact", primary: ["primary", "primary", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { click: "click" }, host: { properties: { "class.primary": "primary", "class.disabled": "disabled", "class.compact": "isCompact", "class.icon-left": "!isCompact && icon", "class.icon-right": "!isCompact && iconRight && label", "class.label": "label" } }, usesInheritance: true, ngImport: i0, template: "<button \n    matRipple\n    (click)=\"onClick( $event )\"\n    [disabled]=\"disabled\"\n    [matTooltip]=\"tooltip\"\n>\n    @if ( icon || iconRight || iconCompact || label ) {\n        @if ( icon && ( !isCompact || !iconCompact ) ) { \n            <mat-icon class=\"left\">{{ icon }}</mat-icon> \n        }\n\n        @if ( !isCompact && iconRight && label ) { \n            <mat-icon class=\"right\">{{ iconRight }}</mat-icon> \n        }\n\n        @if ( isCompact && iconCompact ) { \n            <mat-icon class=\"compact\">{{ iconCompact }}</mat-icon> \n        }\n\n        @if ( label ) {\n            <span class=\"label\">{{ label }}</span>        \n        }\n    }\n    @else {\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    }\n</button>\n", styles: ["::ng-deep :root{--nrcl-button-height: 36px;--nrcl-compact-button-height: 44px;--nrcl-button-foreground-color: black;--nrcl-button-background-color: white;--nrcl-button-border-color: #003366;--nrcl-button-hover-background-color: #f5f5f5;--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-disabled-foreground-color: #7E7E7E;--nrcl-button-disabled-background-color: #CCCCCC;--nrcl-button-disabled-border-color: #CCCCCC;--nrcl-button-disabled-hover-background-color: #CCCCCC}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host button{height:var(--nrcl-button-height);cursor:pointer;margin:0;padding:0;display:flex;align-items:center;position:relative;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host button .label,:host button .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);white-space:nowrap;font-weight:500}:host button:hover{background-color:var(--nrcl-button-hover-background-color)}:host.label button{padding-left:16px;padding-right:16px}:host.icon-left button{padding-left:var(--nrcl-button-height)}:host.icon-left button .mat-icon.left{position:absolute;left:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.icon-right button{padding-right:var(--nrcl-button-height)}:host.icon-right button .mat-icon.right{position:absolute;right:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.primary button{background-color:var(--nrcl-button-primary-background-color);color:var(--nrcl-button-primary-foreground-color);border-color:var(--nrcl-button-primary-border-color)}:host.primary button:hover{background-color:var(--nrcl-button-primary-hover-background-color)}:host.compact button{height:var(--nrcl-compact-button-height);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;box-shadow:none;background-color:transparent;color:var(--nrcl-button-foreground-color)}:host.compact button:hover{background-color:var(--nrcl-button-hover-background-color)}:host.compact button .label{line-height:20px;font-size:var(--nrcl-font-size-small)}:host button .content{padding-left:16px;padding-right:16px}:host.disabled button{background-color:var(--nrcl-button-disabled-background-color);color:var(--nrcl-button-disabled-foreground-color);border-color:var(--nrcl-button-disabled-border-color)}:host.disabled button:hover{background-color:var(--nrcl-button-disabled-hover-background-color)}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-button', host: {
+                        '[class.primary]': 'primary',
+                        '[class.disabled]': 'disabled',
+                        '[class.compact]': 'isCompact',
+                        '[class.icon-left]': '!isCompact && icon',
+                        '[class.icon-right]': '!isCompact && iconRight && label',
+                        '[class.label]': 'label'
+                    }, template: "<button \n    matRipple\n    (click)=\"onClick( $event )\"\n    [disabled]=\"disabled\"\n    [matTooltip]=\"tooltip\"\n>\n    @if ( icon || iconRight || iconCompact || label ) {\n        @if ( icon && ( !isCompact || !iconCompact ) ) { \n            <mat-icon class=\"left\">{{ icon }}</mat-icon> \n        }\n\n        @if ( !isCompact && iconRight && label ) { \n            <mat-icon class=\"right\">{{ iconRight }}</mat-icon> \n        }\n\n        @if ( isCompact && iconCompact ) { \n            <mat-icon class=\"compact\">{{ iconCompact }}</mat-icon> \n        }\n\n        @if ( label ) {\n            <span class=\"label\">{{ label }}</span>        \n        }\n    }\n    @else {\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    }\n</button>\n", styles: ["::ng-deep :root{--nrcl-button-height: 36px;--nrcl-compact-button-height: 44px;--nrcl-button-foreground-color: black;--nrcl-button-background-color: white;--nrcl-button-border-color: #003366;--nrcl-button-hover-background-color: #f5f5f5;--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-disabled-foreground-color: #7E7E7E;--nrcl-button-disabled-background-color: #CCCCCC;--nrcl-button-disabled-border-color: #CCCCCC;--nrcl-button-disabled-hover-background-color: #CCCCCC}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host button{height:var(--nrcl-button-height);cursor:pointer;margin:0;padding:0;display:flex;align-items:center;position:relative;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host button .label,:host button .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);white-space:nowrap;font-weight:500}:host button:hover{background-color:var(--nrcl-button-hover-background-color)}:host.label button{padding-left:16px;padding-right:16px}:host.icon-left button{padding-left:var(--nrcl-button-height)}:host.icon-left button .mat-icon.left{position:absolute;left:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.icon-right button{padding-right:var(--nrcl-button-height)}:host.icon-right button .mat-icon.right{position:absolute;right:calc((var(--nrcl-button-height) - var(--nrcl-icon-size)) / 2)}:host.primary button{background-color:var(--nrcl-button-primary-background-color);color:var(--nrcl-button-primary-foreground-color);border-color:var(--nrcl-button-primary-border-color)}:host.primary button:hover{background-color:var(--nrcl-button-primary-hover-background-color)}:host.compact button{height:var(--nrcl-compact-button-height);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;box-shadow:none;background-color:transparent;color:var(--nrcl-button-foreground-color)}:host.compact button:hover{background-color:var(--nrcl-button-hover-background-color)}:host.compact button .label{line-height:20px;font-size:var(--nrcl-font-size-small)}:host button .content{padding-left:16px;padding-right:16px}:host.disabled button{background-color:var(--nrcl-button-disabled-background-color);color:var(--nrcl-button-disabled-foreground-color);border-color:var(--nrcl-button-disabled-border-color)}:host.disabled button:hover{background-color:var(--nrcl-button-disabled-hover-background-color)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconRight: [{
+                type: Input
+            }], iconCompact: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], primary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], click: [{
+                type: Output
+            }] } });
+
+class CellContentComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            if (this.tooltip == null || this.tooltip === false) {
+                // no tooltip                
+            }
+            else if (this.tooltip == '' || this.tooltip === true) {
+                this.tooltipContent = this.content || this.elementRef?.nativeElement?.textContent;
+            }
+            else {
+                this.tooltipContent = this.tooltip;
+            }
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n    @if ( content ) {\n        {{ content }}\n    }\n    @else {\n        <ng-content></ng-content>\n    }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-cell-content', template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n    @if ( content ) {\n        {{ content }}\n    }\n    @else {\n        <ng-content></ng-content>\n    }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"] }]
+        }], propDecorators: { tooltip: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }] } });
+
+class DesktopViewComponent extends ConfigurationSubscriberBase {
+    get visible() { return this.configuration.displayMode == 'desktop'; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesktopViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DesktopViewComponent, selector: "nrcl-desktop-view", host: { properties: { "class.nrcl-device-desktop": "true" } }, usesInheritance: true, ngImport: i0, template: '@if ( visible ) { <ng-content></ng-content> }', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesktopViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "nrcl-desktop-view",
+                    template: '@if ( visible ) { <ng-content></ng-content> }',
+                    host: {
+                        '[class.nrcl-device-desktop]': 'true'
+                    }
+                }]
+        }] });
+class MobileViewComponent extends ConfigurationSubscriberBase {
+    get visible() { return this.configuration.displayMode == 'mobile'; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MobileViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MobileViewComponent, selector: "nrcl-mobile-view", host: { properties: { "class.nrcl-device-mobile": "true" } }, usesInheritance: true, ngImport: i0, template: '@if ( visible ) { <ng-content></ng-content> }', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MobileViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "nrcl-mobile-view",
+                    template: '@if ( visible ) { <ng-content></ng-content> }',
+                    host: {
+                        '[class.nrcl-device-mobile]': 'true'
+                    }
+                }]
+        }] });
+
+class ExpansionPanelComponent {
+    constructor() {
+        this.isLoading = false;
+        this.disabled = false;
+        this.expanded = false;
+        this.expandedChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, selector: "nrcl-expansion-panel", inputs: { isLoading: "isLoading", disabled: "disabled", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class.is-loading": "isLoading", "class.expanded": "matExpansionPanel?.expanded", "class.disabled": "disabled" } }, viewQueries: [{ propertyName: "matExpansionPanel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<mat-expansion-panel #panel \n    togglePosition=\"before\"\n    [expanded]=\"expanded\" \n    [disabled]=\"disabled\" \n    (opened)=\"expandedChange.emit( true )\"   \n    (closed)=\"expandedChange.emit( false )\"   \n>\n    <mat-expansion-panel-header>\n        <mat-panel-description>\n            <ng-content select=\"nrcl-expansion-panel-header\"></ng-content>\n\n            @if ( isLoading ) {\n                <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n            }\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <div class=\"body\">\n        <ng-content></ng-content>\n    </div>\n\n    <ng-content select=\"nrcl-expansion-panel-footer\"></ng-content>\n</mat-expansion-panel>", styles: [":host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host mat-expansion-panel>.mat-expansion-panel-header{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);height:unset;min-height:50px;border-bottom:1px solid #c6c8cb;border-bottom-left-radius:0;border-bottom-right-radius:0;font-family:var(--nrcl-font-family);align-items:flex-start}:host mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-expansion-indicator{align-self:center;padding-bottom:4px}:host mat-expansion-panel>.mat-expansion-panel-header.mat-expanded>::ng-deep .mat-expansion-indicator{padding-bottom:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description{position:relative;margin-right:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description .loading{position:absolute;top:10px;right:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{padding:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body .body{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}:host.is-loading .mat-expansion-panel>.mat-expansion-panel-header ::ng-deep nrcl-expansion-panel-header .right-side{visibility:hidden}:host.disabled .mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-content{margin-left:0}\n"], dependencies: [{ kind: "component", type: i1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-expansion-panel", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.is-loading]': 'isLoading',
+                        '[class.expanded]': 'matExpansionPanel?.expanded',
+                        '[class.disabled]': 'disabled',
+                    }, template: "<mat-expansion-panel #panel \n    togglePosition=\"before\"\n    [expanded]=\"expanded\" \n    [disabled]=\"disabled\" \n    (opened)=\"expandedChange.emit( true )\"   \n    (closed)=\"expandedChange.emit( false )\"   \n>\n    <mat-expansion-panel-header>\n        <mat-panel-description>\n            <ng-content select=\"nrcl-expansion-panel-header\"></ng-content>\n\n            @if ( isLoading ) {\n                <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n            }\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <div class=\"body\">\n        <ng-content></ng-content>\n    </div>\n\n    <ng-content select=\"nrcl-expansion-panel-footer\"></ng-content>\n</mat-expansion-panel>", styles: [":host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host mat-expansion-panel>.mat-expansion-panel-header{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space);height:unset;min-height:50px;border-bottom:1px solid #c6c8cb;border-bottom-left-radius:0;border-bottom-right-radius:0;font-family:var(--nrcl-font-family);align-items:flex-start}:host mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-expansion-indicator{align-self:center;padding-bottom:4px}:host mat-expansion-panel>.mat-expansion-panel-header.mat-expanded>::ng-deep .mat-expansion-indicator{padding-bottom:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description{position:relative;margin-right:0}:host mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-description .loading{position:absolute;top:10px;right:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{padding:0}:host mat-expansion-panel>::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body .body{padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}:host.is-loading .mat-expansion-panel>.mat-expansion-panel-header ::ng-deep nrcl-expansion-panel-header .right-side{visibility:hidden}:host.disabled .mat-expansion-panel>.mat-expansion-panel-header>::ng-deep .mat-content{margin-left:0}\n"] }]
+        }], propDecorators: { isLoading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], matExpansionPanel: [{
+                type: ViewChild,
+                args: ['panel']
+            }] } });
+class ExpansionPanelHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExpansionPanelHeaderComponent, selector: "nrcl-expansion-panel-header", ngImport: i0, template: `
+        <div class="left-side">
+            <ng-content select="[left-side],h2,h3"></ng-content>
+        </div>
+
+        <div class="right-side">
+            <ng-content></ng-content>
+        </div>
+    `, isInline: true, styles: [":host{display:flex;color:#212121;width:100%}.left-side{display:flex;flex-direction:column;padding:10px 0;align-self:flex-start}.left-side ::ng-deep h2{font-size:var( --nrcl-font-size-h2);font-weight:200;padding:0;margin:0}.left-side ::ng-deep h3{font-size:var( --nrcl-font-size-h3 );font-weight:200;padding:0;margin:0}.right-side{flex-grow:1;display:flex;justify-content:flex-end;align-self:center}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-expansion-panel-header", template: `
+        <div class="left-side">
+            <ng-content select="[left-side],h2,h3"></ng-content>
+        </div>
+
+        <div class="right-side">
+            <ng-content></ng-content>
+        </div>
+    `, styles: [":host{display:flex;color:#212121;width:100%}.left-side{display:flex;flex-direction:column;padding:10px 0;align-self:flex-start}.left-side ::ng-deep h2{font-size:var( --nrcl-font-size-h2);font-weight:200;padding:0;margin:0}.left-side ::ng-deep h3{font-size:var( --nrcl-font-size-h3 );font-weight:200;padding:0;margin:0}.right-side{flex-grow:1;display:flex;justify-content:flex-end;align-self:center}\n"] }]
+        }] });
+class ExpansionPanelFooterComponent {
+    constructor() {
+        this.warningMessage = 'Unsaved Changes';
+        this.showWarning = false;
+        this.saveClick = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelFooterComponent, selector: "nrcl-expansion-panel-footer", inputs: { saveEnabled: "saveEnabled", cancelEnabled: "cancelEnabled", warningMessage: "warningMessage", showWarning: "showWarning" }, outputs: { saveClick: "saveClick", cancelClick: "cancelClick" }, ngImport: i0, template: `
+        @if ( showWarning ) {
+            <div class="warning">
+                <mat-icon>warning</mat-icon>
+                <span>{{ warningMessage }}</span>
+            </div>
+        }
+
+        @if ( cancelEnabled != null ) {
+            <nrcl-button
+                label="Cancel"
+                iconCompact="cancel"
+                compact="mobile"
+                [disabled]="!cancelEnabled"
+                click="cancelClick.emit( $event )"
+            ></nrcl-button>
+        }
+
+        @if ( saveEnabled != null ) {
+            <nrcl-button primary
+                label="Save"
+                iconCompact="save"
+                compact="mobile"
+                [disabled]="!saveEnabled"
+                click="saveClick.emit( $event )"
+            ></nrcl-button>
+        }
+
+        <ng-content></ng-content>
+    `, isInline: true, styles: [":host{border-top:1px solid #c6c8cb;padding:var(--nrcl-gutter-space);background-color:#f2f2f2;display:flex;gap:8px;justify-content:flex-end}:host:empty{display:none}.warning{display:flex;gap:4px;align-items:center}.warning .mat-icon{color:#fcba19}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "disabled"], outputs: ["click"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-expansion-panel-footer", template: `
+        @if ( showWarning ) {
+            <div class="warning">
+                <mat-icon>warning</mat-icon>
+                <span>{{ warningMessage }}</span>
+            </div>
+        }
+
+        @if ( cancelEnabled != null ) {
+            <nrcl-button
+                label="Cancel"
+                iconCompact="cancel"
+                compact="mobile"
+                [disabled]="!cancelEnabled"
+                click="cancelClick.emit( $event )"
+            ></nrcl-button>
+        }
+
+        @if ( saveEnabled != null ) {
+            <nrcl-button primary
+                label="Save"
+                iconCompact="save"
+                compact="mobile"
+                [disabled]="!saveEnabled"
+                click="saveClick.emit( $event )"
+            ></nrcl-button>
+        }
+
+        <ng-content></ng-content>
+    `, styles: [":host{border-top:1px solid #c6c8cb;padding:var(--nrcl-gutter-space);background-color:#f2f2f2;display:flex;gap:8px;justify-content:flex-end}:host:empty{display:none}.warning{display:flex;gap:4px;align-items:center}.warning .mat-icon{color:#fcba19}\n"] }]
+        }], propDecorators: { saveEnabled: [{
+                type: Input
+            }], cancelEnabled: [{
+                type: Input
+            }], warningMessage: [{
+                type: Input
+            }], showWarning: [{
+                type: Input
+            }], saveClick: [{
+                type: Output
+            }], cancelClick: [{
+                type: Output
+            }] } });
+
+class FilterContainerComponent {
+    constructor() {
+        this.label = '[label]';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<mat-form-field\n    floatLabel=\"always\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input matInput>\n\n    <div class=\"content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-container-width: var( --nrcl-filter-width-default );--nrcl-filter-container-height: var( --nrcl-filter-height-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent,:host ::ng-deep mat-selection-list .mat-mdc-list-option{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox{padding-left:0;padding-right:0}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background{left:0;border:1px solid #c6c8cb}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{background-color:#fff}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__ripple{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}:host ::ng-deep .table-search-header .search-and-filters .field.filter-checkbox-group .checkbox-group{gap:15px}:host ::ng-deep .mat-mdc-radio-button.mat-accent{--mdc-radio-selected-focus-icon-color: #003366;--mdc-radio-selected-hover-icon-color: #003366;--mdc-radio-selected-icon-color: #003366;--mdc-radio-selected-pressed-icon-color: #003366;--mat-mdc-radio-checked-ripple-color: #003366}:host ::ng-deep .mat-mdc-radio-button.mat-accent .mdc-form-field .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:#fff}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix>input{display:none}:host .content{display:flex;gap:var(--nrcl-gutter-space);align-items:center;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host .content ::ng-deep .mdc-checkbox{padding:0}:host .content ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:0}:host .content ::ng-deep .mat-mdc-radio-group{display:flex;gap:var(--nrcl-gutter-space)}:host .content ::ng-deep .mat-mdc-radio-group .mdc-radio{padding:0}\n"], dependencies: [{ kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-filter-container", changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n    floatLabel=\"always\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input matInput>\n\n    <div class=\"content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-container-width: var( --nrcl-filter-width-default );--nrcl-filter-container-height: var( --nrcl-filter-height-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent,:host ::ng-deep mat-selection-list .mat-mdc-list-option{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox{padding-left:0;padding-right:0}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control~.mdc-checkbox__background{left:0;border:1px solid #c6c8cb}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{background-color:#fff}:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-checkbox.mat-mdc-checkbox.mat-accent .mdc-checkbox .mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mat-mdc-checkbox-ripple,:host ::ng-deep mat-selection-list .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__ripple{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}:host ::ng-deep .table-search-header .search-and-filters .field.filter-checkbox-group .checkbox-group{gap:15px}:host ::ng-deep .mat-mdc-radio-button.mat-accent{--mdc-radio-selected-focus-icon-color: #003366;--mdc-radio-selected-hover-icon-color: #003366;--mdc-radio-selected-icon-color: #003366;--mdc-radio-selected-pressed-icon-color: #003366;--mat-mdc-radio-checked-ripple-color: #003366}:host ::ng-deep .mat-mdc-radio-button.mat-accent .mdc-form-field .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:#fff}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-container-width, var(--nrcl-filter-width-default));padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix>input{display:none}:host .content{display:flex;gap:var(--nrcl-gutter-space);align-items:center;height:var(--nrcl-filter-container-height, var(--nrcl-filter-height-default))}:host .content ::ng-deep .mdc-checkbox{padding:0}:host .content ::ng-deep .mdc-checkbox .mdc-checkbox__background{top:0}:host .content ::ng-deep .mat-mdc-radio-group{display:flex;gap:var(--nrcl-gutter-space)}:host .content ::ng-deep .mat-mdc-radio-group .mdc-radio{padding:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }] } });
+
+const DATE_FORMATS = {
+    fullPickerInput: "Y-MM-DD HH:mm",
+    datePickerInput: "Y-MM-DD",
+    timePickerInput: "HH:mm",
+    monthYearLabel: "Y-MM",
+    dateA11yLabel: "Y-MMM-DD",
+    monthYearA11yLabel: "YYYY-MMM",
+    simplifiedDate: "MMM DD",
+    simplifiedMonthDate: "MM-DD",
+    fullPickerInputWithSlash: "Y-MM-DD/ HH:mm",
+    API_DATE: "Y-MM-DD",
+    API_TIMESTAMP: 'Y-MM-DD HH:mm:ss',
+    API_TIMESTAMP_WITH_SEP: 'Y-MM-DDTHH:mm:ss'
+};
+
+class FilterDateComponent {
+    constructor() {
+        this.label = '[label]]';
+        this.placeholder = 'Select...';
+        this.value = moment().format(DATE_FORMATS.datePickerInput);
+        this.valueChange = new EventEmitter();
+    }
+    onDateChange(ev) {
+        if (!ev) {
+            this.valueChange.emit(null);
+            return;
+        }
+        let date = ev.format(DATE_FORMATS.datePickerInput);
+        this.valueChange.emit(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterDateComponent, selector: "nrcl-filter-date", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<mat-form-field\n    floatLabel=\"auto\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input matInput class=\"search-input\"            \n        [ngModel]=\"value\" \n        (ngModelChange)=\"onDateChange( $event )\"\n        [placeholder]=\"placeholder\"\n        [owlDateTime]=\"selectedDateDT\" \n        maxlength=\"10\" \n        appWFDateMask\n    >\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <button class=\"select-date\"\n        [owlDateTimeTrigger]=\"selectedDateDT\" \n        aria-label=\"Open Select Date Picker\"\n        mat-icon-button\n        matSuffix\n    >\n        <mat-icon>event</mat-icon>\n    </button>\n</mat-form-field>\n\n<owl-date-time #selectedDateDT pickerType=\"calendar\"></owl-date-time>\n", styles: ["::ng-deep :root{--nrcl-filter-date-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep .mat-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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default))}:host .select-date{padding:0;width:36px;height:36px;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i6.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i6.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-filter-date", changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n    floatLabel=\"auto\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input matInput class=\"search-input\"            \n        [ngModel]=\"value\" \n        (ngModelChange)=\"onDateChange( $event )\"\n        [placeholder]=\"placeholder\"\n        [owlDateTime]=\"selectedDateDT\" \n        maxlength=\"10\" \n        appWFDateMask\n    >\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <button class=\"select-date\"\n        [owlDateTimeTrigger]=\"selectedDateDT\" \n        aria-label=\"Open Select Date Picker\"\n        mat-icon-button\n        matSuffix\n    >\n        <mat-icon>event</mat-icon>\n    </button>\n</mat-form-field>\n\n<owl-date-time #selectedDateDT pickerType=\"calendar\"></owl-date-time>\n", styles: ["::ng-deep :root{--nrcl-filter-date-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep .mat-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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default))}:host .select-date{padding:0;width:36px;height:36px;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class FilterSearchComponent {
+    constructor() {
+        this.label = 'Search';
+        this.placeholder = 'Search...';
+        this.valueChange = new EventEmitter();
+        this.hasValue = false;
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    emitValueChange(val) {
+        this.hasValue = !!val;
+        this.valueChange.emit(val);
+    }
+    onInput(ev) {
+        this.value = ev?.target?.value;
+        this.emitValueChange(ev?.target?.value);
+    }
+    onCancelClick() {
+        this.value = null;
+        this.emitValueChange();
+    }
+    focus() {
+        this.inputEl.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSearchComponent, selector: "nrcl-filter-search", inputs: { label: "label", placeholder: "placeholder", hint: "hint", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<mat-form-field\n    floatLabel=\"auto\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input class=\"search-input\" #input\n        matInput\n        [value]=\"value || ''\"\n        (input)=\"onInput( $event )\"\n        [placeholder]=\"placeholder\"\n    >\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if ( value ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCancelClick($event); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }                \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: calc( var( --nrcl-filter-width-default ) * 2 + 8px )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px))}:host .cancel{padding:0;width:36px;height:36px;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-filter-search", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.has-value]': "hasValue"
+                    }, template: "<mat-form-field\n    floatLabel=\"auto\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    <mat-label>{{ label }}</mat-label>\n\n    <input class=\"search-input\" #input\n        matInput\n        [value]=\"value || ''\"\n        (input)=\"onInput( $event )\"\n        [placeholder]=\"placeholder\"\n    >\n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if ( value ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCancelClick($event); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }                \n</mat-form-field>\n", styles: ["::ng-deep :root{--nrcl-filter-search-width: calc( var( --nrcl-filter-width-default ) * 2 + 8px )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px))}:host .cancel{padding:0;width:36px;height:36px;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+/**
+ * A filter select component that allows users to select multiple options from a list.
+ *
+ * Features:
+ * - Multi-select with optional maximum selection limit
+ * - Search/filter functionality
+ * - Tooltips for long descriptions
+ * - Summary display of selected items
+ */
+class FilterSelectComponent {
+    constructor() {
+        this.placeholder = 'Filter...';
+        this.selectMax = 0;
+        this.tooltips = true;
+        this.summary = true;
+        this.clear = true;
+        this.valueChange = new EventEmitter();
+        this.floatLabel = 'auto';
+        this.isFiltered = false;
+        this.isOpen = false;
+        this.hasValue = false;
+        this.selection = new FormControl();
+        this.match = (o) => true;
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.overlay = inject(Overlay);
+        this.viewContainerRef = inject(ViewContainerRef);
+    }
+    ngOnChanges(changes) {
+        if (this.isOpen)
+            return;
+        if (changes.options) {
+            let pv = JSON.stringify(changes.options.previousValue);
+            let cv = JSON.stringify(changes.options.currentValue);
+            if (pv != cv) {
+                this.selection.setValue(null);
+                this.setInputToSelection();
+                this.setFilter();
+            }
+        }
+        if (changes.value) {
+            let pv = JSON.stringify(changes.value.previousValue);
+            let cv = JSON.stringify(changes.value.currentValue);
+            if (pv != cv) {
+                if (this.value) {
+                    this.hasValue = this.value.length > 0;
+                    this.selection.setValue(this.value);
+                    if (this.selectMax > 1 && this.value.length >= this.selectMax) {
+                        this.selection.disable();
+                    }
+                    else {
+                        this.selection.enable();
+                    }
+                }
+                else {
+                    this.hasValue = false;
+                    this.selection.setValue(null);
+                    this.selection.enable();
+                }
+                this.setFilter();
+                this.setInputToSelection();
+                this.changeDetectorRef.detectChanges();
+            }
+        }
+    }
+    get single() {
+        return this.selectMax == 1;
+    }
+    emitValueChange() {
+        this.hasValue = (this.selection.value || []).length > 0;
+        this.valueChange.emit(this.selection.value || []);
+    }
+    open() {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.floatLabel = 'always';
+        this.inputValue = '';
+        // Create overlay
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.trigger)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 0
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: 0
+            }
+        ])
+            .withPush(false);
+        const scrollStrategy = this.overlay.scrollStrategies.reposition();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: false,
+            maxWidth: this.trigger.nativeElement.offsetWidth * 2,
+            minWidth: this.trigger.nativeElement.offsetWidth,
+            maxHeight: 300,
+        });
+        // Attach template
+        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Listen to document clicks after a small delay to avoid closing immediately
+        setTimeout(() => {
+            this.clickSubscription = fromEvent(document, 'click')
+                .pipe(filter((event) => {
+                const clickTarget = event.target;
+                const triggerEl = this.trigger.nativeElement;
+                const overlayEl = this.overlayRef?.overlayElement;
+                // Only close if click is outside both trigger and overlay
+                return !triggerEl.contains(clickTarget)
+                    && !overlayEl?.contains(clickTarget);
+            }))
+                .subscribe(() => {
+                this.close();
+            });
+        });
+        // Focus input after overlay is attached
+        setTimeout(() => {
+            this.filterInput?.nativeElement.focus();
+            // prevent list from scrolling when selection changes
+            this.overlayRef.overlayElement.children[0].scroll(0, 1);
+        });
+        this.setFilter();
+        this.openingValue = JSON.stringify(this.selection.value);
+    }
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.setInputToSelection();
+        this.floatLabel = 'auto';
+        if (this.clickSubscription) {
+            this.clickSubscription.unsubscribe();
+            this.clickSubscription = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.changeDetectorRef.detectChanges();
+        let closingValue = JSON.stringify(this.selection.value);
+        if (this.openingValue != closingValue)
+            this.emitValueChange();
+    }
+    setInputToSelection() {
+        this.inputValue = this.selection?.value?.map(c => this.descriptionForCode(c)).join(', ') || null;
+    }
+    onInput(ev) {
+        this.setFilter(ev?.target?.value);
+    }
+    setFilter(text) {
+        let t = text?.trim().toLowerCase();
+        if (t) {
+            this.isFiltered = true;
+            this.match = (option) => option.description.toLowerCase().includes(t);
+        }
+        else {
+            this.isFiltered = false;
+            this.match = (o) => true;
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    matchesFilter(option) {
+        return this.match(option);
+    }
+    onSelectionChange(ev) {
+        if (this.single) {
+            this.close();
+        }
+        else {
+            this.filterInput?.nativeElement.focus();
+        }
+        if (this.selectMax > 1) {
+            if (this.selection.value.length >= this.selectMax) {
+                this.selection.disable();
+            }
+            else {
+                this.selection.enable();
+            }
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    onUpperSelectionChange(ev) {
+        setTimeout(() => {
+            let codes = this.selection.value.filter(c => c != ev.options[0].value);
+            this.selection.setValue(codes);
+            this.onSelectionChange(ev);
+        });
+    }
+    onCancelClick() {
+        this.selection.setValue(null);
+        this.selection.enable();
+        this.setInputToSelection();
+        this.emitValueChange();
+    }
+    onInputFocus() {
+        this.open();
+    }
+    descriptionForCode(code) {
+        return this.options.find(o => o.code == code)?.description;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, deps: [], 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] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen" } }, 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 }], 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    >\n\n    @if ( isOpen ) {\n        <mat-icon matSuffix>arrow_drop_up</mat-icon>\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            <mat-icon>close</mat-icon>\n        </button>\n    }\n    @else {\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\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: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 ::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:36px;height:36px;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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.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: i6$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i6$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-filter-select", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.has-value]': "hasValue",
+                        '[class.is-open]': "isOpen",
+                        '[class.is-closed]': "!isOpen"
+                    }, 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    >\n\n    @if ( isOpen ) {\n        <mat-icon matSuffix>arrow_drop_up</mat-icon>\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            <mat-icon>close</mat-icon>\n        </button>\n    }\n    @else {\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\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: 10px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.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 ::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:36px;height:36px;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: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selectMax: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], tooltips: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], summary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], clear: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { read: ElementRef }]
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }] } });
+
+class FiltersPanelComponent {
+    constructor() {
+        this.showClear = true;
+        this.showFilters = true;
+        this.clearFilters = new EventEmitter();
+        this.showFiltersChange = new EventEmitter();
+    }
+    onClearClick() {
+        this.clearFilters.emit();
+    }
+    onHideClick() {
+        this.showFilters = false;
+        this.showFiltersChange.emit(false);
+    }
+    onShowClick() {
+        this.showFilters = true;
+        this.showFiltersChange.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FiltersPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: { showClear: "showClear", showFilters: "showFilters" }, outputs: { clearFilters: "clearFilters", showFiltersChange: "showFiltersChange" }, ngImport: i0, template: "@if ( showFilters ) {\n    <ng-content></ng-content>\n}\n\n<div class=\"actions\">\n    <nrcl-mobile-view>\n        @if ( showFilters ) {\n            <button mat-stroked-button class=\"hide\"\n                (click)=\"onHideClick()\"\n            >\n                <mat-icon>expand_less</mat-icon>\n                Hide Filters\n            </button>\n        }\n        @else {\n            <button mat-stroked-button class=\"show\"\n                (click)=\"onShowClick()\"\n            >\n                <mat-icon>expand_more</mat-icon>\n                Show Filters\n            </button>\n        }\n    </nrcl-mobile-view>\n\n    <div class=\"spacer\"></div>        \n\n    @if ( showClear && showFilters ) {\n        <button mat-stroked-button class=\"clear\"\n            (click)=\"onClearClick()\"\n        >\n            <mat-icon>filter_list_off</mat-icon>\n            Clear\n        </button>\n    }\n</div>\n", styles: [":host{display:flex;flex-flow:row wrap;gap:8px;position:relative;border:1px solid #c6c8cb;padding:8px;background-color:#f2f2f2}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab,:host ::ng-deep button.mat-mdc-raised-button,:host ::ng-deep button.mat-mdc-button,:host ::ng-deep button.mat-mdc-icon-button,:host ::ng-deep button.mat-mdc-outlined-button,:host ::ng-deep button.mat-mdc-unelevated-button,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);white-space:nowrap;font-weight:500}:host ::ng-deep button.mat-mdc-fab[disabled],:host ::ng-deep button.mat-mdc-raised-button[disabled],:host ::ng-deep button.mat-mdc-button[disabled],:host ::ng-deep button.mat-mdc-icon-button[disabled],:host ::ng-deep button.mat-mdc-outlined-button[disabled],:host ::ng-deep button.mat-mdc-unelevated-button[disabled],:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item[disabled]{border:1px solid #d7d7d7!important}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]),:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]){background-color:var(--nrcl-button-primary-background-color);color:var(--nrcl-button-primary-foreground-color)}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]).intermediate-action{background-color:#2e7940}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]):hover{background-color:var(--nrcl-button-primary-hover-background-color)}:host ::ng-deep button.mat-mdc-fab,:host ::ng-deep button.mat-mdc-raised-button{background-color:#aaa;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);box-shadow:none!important;border:1px solid #003366}:host ::ng-deep button.mat-mdc-fab:not([class*=mat-elevation-z]),:host ::ng-deep button.mat-mdc-raised-button:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f!important}:host ::ng-deep button.mdc-button.right-side-icon{display:flex}:host ::ng-deep button.mdc-button.right-side-icon mat-icon{order:1;margin-left:8px;margin-right:-4px}:host .actions{flex-grow:1;flex-direction:row;justify-content:flex-end;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions .spacer{flex-grow:1}:host-context(.nrcl-device-mobile) :host{display:grid;grid-template-columns:1fr 1fr}:host-context(.nrcl-device-mobile) :host .actions{grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-search{--nrcl-filter-search-width: auto;grid-row:1;grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-select{--nrcl-filter-select-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-date{--nrcl-filter-date-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-container{--nrcl-filter-container-width: auto}\n"], dependencies: [{ kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MobileViewComponent, selector: "nrcl-mobile-view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FiltersPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-filters-panel", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( showFilters ) {\n    <ng-content></ng-content>\n}\n\n<div class=\"actions\">\n    <nrcl-mobile-view>\n        @if ( showFilters ) {\n            <button mat-stroked-button class=\"hide\"\n                (click)=\"onHideClick()\"\n            >\n                <mat-icon>expand_less</mat-icon>\n                Hide Filters\n            </button>\n        }\n        @else {\n            <button mat-stroked-button class=\"show\"\n                (click)=\"onShowClick()\"\n            >\n                <mat-icon>expand_more</mat-icon>\n                Show Filters\n            </button>\n        }\n    </nrcl-mobile-view>\n\n    <div class=\"spacer\"></div>        \n\n    @if ( showClear && showFilters ) {\n        <button mat-stroked-button class=\"clear\"\n            (click)=\"onClearClick()\"\n        >\n            <mat-icon>filter_list_off</mat-icon>\n            Clear\n        </button>\n    }\n</div>\n", styles: [":host{display:flex;flex-flow:row wrap;gap:8px;position:relative;border:1px solid #c6c8cb;padding:8px;background-color:#f2f2f2}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab,:host ::ng-deep button.mat-mdc-raised-button,:host ::ng-deep button.mat-mdc-button,:host ::ng-deep button.mat-mdc-icon-button,:host ::ng-deep button.mat-mdc-outlined-button,:host ::ng-deep button.mat-mdc-unelevated-button,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);white-space:nowrap;font-weight:500}:host ::ng-deep button.mat-mdc-fab[disabled],:host ::ng-deep button.mat-mdc-raised-button[disabled],:host ::ng-deep button.mat-mdc-button[disabled],:host ::ng-deep button.mat-mdc-icon-button[disabled],:host ::ng-deep button.mat-mdc-outlined-button[disabled],:host ::ng-deep button.mat-mdc-unelevated-button[disabled],:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item[disabled]{border:1px solid #d7d7d7!important}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]),:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]),:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]){background-color:var(--nrcl-button-primary-background-color);color:var(--nrcl-button-primary-foreground-color)}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]).intermediate-action,:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]).intermediate-action{background-color:#2e7940}:host ::ng-deep button.primary.mat-mdc-fab:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-raised-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-icon-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-outlined-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-unelevated-button:not([disabled]):hover,:host ::ng-deep button.primary.mat-mdc-mini-fab .mat-mdc-menu-item:not([disabled]):hover{background-color:var(--nrcl-button-primary-hover-background-color)}:host ::ng-deep button.mat-mdc-fab,:host ::ng-deep button.mat-mdc-raised-button{background-color:#aaa;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);box-shadow:none!important;border:1px solid #003366}:host ::ng-deep button.mat-mdc-fab:not([class*=mat-elevation-z]),:host ::ng-deep button.mat-mdc-raised-button:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f!important}:host ::ng-deep button.mdc-button.right-side-icon{display:flex}:host ::ng-deep button.mdc-button.right-side-icon mat-icon{order:1;margin-left:8px;margin-right:-4px}:host .actions{flex-grow:1;flex-direction:row;justify-content:flex-end;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions .spacer{flex-grow:1}:host-context(.nrcl-device-mobile) :host{display:grid;grid-template-columns:1fr 1fr}:host-context(.nrcl-device-mobile) :host .actions{grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-search{--nrcl-filter-search-width: auto;grid-row:1;grid-column:1/span 2}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-select{--nrcl-filter-select-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-date{--nrcl-filter-date-width: auto}:host-context(.nrcl-device-mobile) :host ::ng-deep nrcl-filter-container{--nrcl-filter-container-width: auto}\n"] }]
+        }], propDecorators: { showClear: [{
+                type: Input
+            }], showFilters: [{
+                type: Input
+            }], clearFilters: [{
+                type: Output
+            }], showFiltersChange: [{
+                type: Output
+            }] } });
+
+class FormFieldComponent {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+    }
+    ngOnChanges(changes) {
+        if (changes.readonly) {
+            if (this.readonly) {
+                makeFormFieldReadonly(this.renderer, this.element.nativeElement);
+            }
+            else {
+                makeFormFieldNotReadonly(this.renderer, this.element.nativeElement);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: FormFieldComponent, selector: "nrcl-form-field", inputs: { required: ["required", "required", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, host: { properties: { "class.required": "required", "class.readonly": "readonly" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [":host ::ng-deep .mat-mdc-form-field{width:100%;font-family:var(--nrcl-font-family)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:0;padding-right:0;background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{font-size:var(--nrcl-font-size);padding-bottom:2px;line-height:20px;min-height:50px;width:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-form-field-required-marker{display:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding:0}:host.required ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mdc-floating-label :after{color:red;content:\" *\"}:host.readonly ::ng-deep .mat-mdc-form-field{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field [readonly=true]{color:#0000008c;cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before{border-style:dashed;border-width:1px;border-color:#00000021}:host.readonly ::ng-deep .mat-mdc-form-field mat-error{display:none}:host.readonly ::ng-deep .mat-mdc-form-field input,:host.readonly ::ng-deep .mat-mdc-form-field textarea{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .select-read-only-cursor{cursor:not-allowed;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-form-field", template: "<ng-content></ng-content>", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.required]': "required",
+                        '[class.readonly]': "readonly",
+                    }, styles: [":host ::ng-deep .mat-mdc-form-field{width:100%;font-family:var(--nrcl-font-family)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:0;padding-right:0;background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{font-size:var(--nrcl-font-size);padding-bottom:2px;line-height:20px;min-height:50px;width:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-form-field-required-marker{display:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding:0}:host.required ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mdc-floating-label :after{color:red;content:\" *\"}:host.readonly ::ng-deep .mat-mdc-form-field{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field [readonly=true]{color:#0000008c;cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before{border-style:dashed;border-width:1px;border-color:#00000021}:host.readonly ::ng-deep .mat-mdc-form-field mat-error{display:none}:host.readonly ::ng-deep .mat-mdc-form-field input,:host.readonly ::ng-deep .mat-mdc-form-field textarea{cursor:not-allowed}:host.readonly ::ng-deep .mat-mdc-form-field .select-read-only-cursor{cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+function makeFormFieldReadonly(renderer, formFieldEl) {
+    let editableElements;
+    //make input element readonly
+    let inputHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('input');
+    if (editableElements && editableElements.length) {
+        inputHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.setAttribute(inputHtmlElement, "readonly", "readonly");
+        });
+    }
+    //make textarea element readonly
+    let textareaHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('textarea');
+    if (editableElements && editableElements.length) {
+        textareaHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.setAttribute(textareaHtmlElement, "readonly", "readonly");
+        });
+    }
+    //make select element readonly
+    let selectHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('select');
+    if (editableElements && editableElements.length) {
+        selectHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.addClass(selectHtmlElement, "select-read-only-cursor");
+            renderer.setAttribute(selectHtmlElement, "readonly", "readonly");
+            for (let i = 0; i < selectHtmlElement.options.length; i++) {
+                selectHtmlElement.options[i].disabled = true;
+            }
+        });
+    }
+}
+function makeFormFieldNotReadonly(renderer, formFieldEl) {
+    // renderer.removeClass(formFieldEl, "readonly");
+    let editableElements;
+    //make input element readonly
+    let inputHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('input');
+    if (editableElements && editableElements.length) {
+        inputHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.removeAttribute(inputHtmlElement, "readonly");
+        });
+    }
+    //make textarea element readonly
+    let textareaHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('textarea');
+    if (editableElements && editableElements.length) {
+        textareaHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.removeAttribute(textareaHtmlElement, "readonly");
+        });
+    }
+    //make select element readonly
+    let selectHtmlElement;
+    editableElements = formFieldEl.getElementsByTagName('select');
+    if (editableElements && editableElements.length) {
+        selectHtmlElement = editableElements[0];
+        setTimeout(() => {
+            renderer.removeClass(selectHtmlElement, "select-read-only-cursor");
+            renderer.removeAttribute(selectHtmlElement, "readonly");
+            for (let i = 0; i < selectHtmlElement.options.length; i++) {
+                selectHtmlElement.options[i].disabled = undefined;
+            }
+        });
+    }
+}
+
+class FormLayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormLayoutComponent, selector: "nrcl-form-layout", ngImport: i0, template: "<ng-content></ng-content>", isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormLayoutComponent, decorators: [{
+            type: Component,
+            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 GapComponent {
+    constructor() {
+        this.horizontal = false;
+        this.vertical = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: GapComponent, selector: "nrcl-gap", inputs: { horizontal: ["horizontal", "horizontal", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute] }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}:host[horizontal]{width:var(--nrcl-gutter-space)}:host[vertical]{height:var(--nrcl-gutter-space)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-gap', template: '', styles: [":host{display:block}:host[horizontal]{width:var(--nrcl-gutter-space)}:host[vertical]{height:var(--nrcl-gutter-space)}\n"] }]
+        }], propDecorators: { horizontal: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], vertical: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class PageContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageContainerComponent, selector: "nrcl-page-container", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-page-container", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;padding-left:var(--nrcl-gutter-space);padding-right:var(--nrcl-gutter-space)}\n"] }]
+        }] });
+
+class PageHeaderComponent {
+    constructor() {
+        this.isLoading = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, ngImport: i0, template: "<div class=\"left-side\">\n    <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n    <ng-content select=\"[right-side]\"></ng-content>\n    <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.isLoading]': 'isLoading',
+                    }, template: "<div class=\"left-side\">\n    <ng-content select=\"[left-side],h1,h2\"></ng-content>\n</div>\n\n<div class=\"right-side\">\n    <ng-content select=\"[right-side]\"></ng-content>\n    <ng-content></ng-content>\n</div>\n\n<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n", styles: [":host{display:flex;gap:var(--nrcl-gutter-space);position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .left-side{display:flex;flex-direction:column}:host .left-side ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .left-side ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .right-side{flex-grow:1;display:flex;justify-content:flex-end;align-items:center}:host .loading{position:absolute;top:var(--nrcl-gutter-space);right:0;display:none}:host.isLoading .loading{display:block}:host.isLoading .right-side{visibility:hidden}\n"] }]
+        }], propDecorators: { isLoading: [{
+                type: Input
+            }] } });
+
+class RowListDesktopComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListDesktopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-row-list-desktop", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid #c6c8cb}:host ::ng-deep .mat-mdc-table{width:100%}:host ::ng-deep .mat-mdc-table .mat-mdc-row{background-color:#fff;cursor:pointer}:host ::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell{padding:5px;color:#000;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host ::ng-deep .mat-mdc-table .mat-mdc-row:hover{background-color:#d7d7d7}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(odd):not(:hover){background-color:#f2f2f2}:host ::ng-deep .mat-mdc-table .mat-mdc-row:nth-child(2n):not(:hover){background-color:#fff}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell{padding:5px;color:#000}:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-sort-header-content{text-align:left;align-items:flex-end;font-size:15px}\n"] }]
+        }] });
+
+class RowListMobileComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RowListMobileComponent, selector: "nrcl-row-list-mobile", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;line-height:normal}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section cell-content{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-row-list-mobile", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:var(--nrcl-gutter-space)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;line-height:normal}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section cell-content{font-weight:700}\n"] }]
+        }] });
+
+class RowListPaginationComponent {
+    constructor() {
+        this.paginationId = '1';
+        this.pageSizeOptions = [
+            { code: 5, description: '5 Rows' },
+            { code: 10, description: '10 Rows' },
+            { code: 20, description: '20 Rows' },
+            { code: 50, description: '50 Rows' },
+            { code: 100, description: '100 Rows' },
+        ];
+        this.pageSize = 20;
+        this.showPageSize = true;
+        this.pageSizeChange = new EventEmitter();
+        this.pageNumberChange = new EventEmitter();
+        this.componentWidth = 'sufficient';
+        this.paginationMaxSize = 5;
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    ngAfterViewInit() {
+        this.checkWidth();
+    }
+    onPageSizeChange(ev) {
+        this.pageSizeChange.emit(Number(ev));
+    }
+    onPageNumberChange(ev) {
+        this.pageNumberChange.emit(Number(ev));
+    }
+    onResize(event) {
+        this.checkWidth();
+    }
+    checkWidth() {
+        setTimeout(() => {
+            let w = this.elementRef?.nativeElement.offsetWidth;
+            if (!w)
+                return;
+            switch (true) {
+                case w > 600:
+                    this.componentWidth = 'sufficient';
+                    this.paginationMaxSize = 5;
+                    break;
+                case w > 500:
+                    this.componentWidth = 'tight';
+                    this.paginationMaxSize = 3;
+                    break;
+                default:
+                    this.componentWidth = 'restrictive';
+                    this.paginationMaxSize = 4;
+            }
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    get pageCount() {
+        if (!this.hasRows)
+            return 0;
+        return Math.ceil(this.rowCount / this.pageSize);
+    }
+    get firstRow() {
+        if (!this.hasRows)
+            return 0;
+        return (Math.min(this.pageCount, this.pageNumber) - 1) * this.pageSize + 1;
+    }
+    get lastRow() {
+        if (!this.hasRows)
+            return 0;
+        return Math.min(this.firstRow + this.pageSize - 1, this.rowCount);
+    }
+    get hasRows() {
+        return this.rowCount && this.pageSize;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, deps: [], 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" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, ngImport: i0, template: "@if ( hasRows ) {\n    <nrcl-filter-container class=\"summary\"\n        label=\"Showing Rows\"\n    >\n        <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n    </nrcl-filter-container>\n}\n@else {\n    <div class=\"no-rows\">No records to display.</div>\n}\n\n@if ( hasRows ) {\n    <div class=\"pagination\">\n        <pagination-controls \n            [id]=\"paginationId\" \n            [maxSize]=\"paginationMaxSize\"\n            [responsive]=\"false\"\n            [directionLinks]=\"true\"\n            previousLabel=\"\"\n            nextLabel=\"\"\n            [autoHide]=\"false\"\n            (pageChange)=\"onPageNumberChange( $event )\"\n        ></pagination-controls>\n    </div>\n}\n\n@if ( hasRows && showPageSize ) {\n    <nrcl-filter-select class=\"page-size\"\n        label=\"Page Size\"\n        [value]=\"[ pageSize ]\"\n        [options]=\"pageSizeOptions\"\n        (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n        selectMax=\"1\"\n        [clear]=\"false\"\n    ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i1$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-row-list-pagination", changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.width-sufficient]': "componentWidth == 'sufficient'",
+                        '[class.width-tight]': "componentWidth == 'tight'",
+                        '[class.width-restrictive]': "componentWidth == 'restrictive'",
+                    }, template: "@if ( hasRows ) {\n    <nrcl-filter-container class=\"summary\"\n        label=\"Showing Rows\"\n    >\n        <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n    </nrcl-filter-container>\n}\n@else {\n    <div class=\"no-rows\">No records to display.</div>\n}\n\n@if ( hasRows ) {\n    <div class=\"pagination\">\n        <pagination-controls \n            [id]=\"paginationId\" \n            [maxSize]=\"paginationMaxSize\"\n            [responsive]=\"false\"\n            [directionLinks]=\"true\"\n            previousLabel=\"\"\n            nextLabel=\"\"\n            [autoHide]=\"false\"\n            (pageChange)=\"onPageNumberChange( $event )\"\n        ></pagination-controls>\n    </div>\n}\n\n@if ( hasRows && showPageSize ) {\n    <nrcl-filter-select class=\"page-size\"\n        label=\"Page Size\"\n        [value]=\"[ pageSize ]\"\n        [options]=\"pageSizeOptions\"\n        (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n        selectMax=\"1\"\n        [clear]=\"false\"\n    ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"] }]
+        }], propDecorators: { paginationId: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageNumber: [{
+                type: Input
+            }], rowCount: [{
+                type: Input
+            }], showPageSize: [{
+                type: Input
+            }], pageSizeChange: [{
+                type: Output
+            }], pageNumberChange: [{
+                type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ["window:resize", ["$event"]]
+            }] } });
+
+function wrapFilterValue(val) {
+    if (!val)
+        return [];
+    if (Array.isArray(val))
+        return val;
+    return [val];
+}
+function unwrapFilterValue(val) {
+    if (!val)
+        return '';
+    if (Array.isArray(val))
+        return val[0] || '';
+    return val;
+}
+function mapToCodeDescription(list, codeField, descriptionField) {
+    if (!list)
+        return list;
+    return list.map(v => {
+        return {
+            code: v[codeField],
+            description: v[descriptionField]
+        };
+    });
+}
+
+class RowListSortingComponent {
+    constructor() {
+        this.sortColumnOptions = [];
+        this.sortDirection = 'asc';
+        this.sortChange = new EventEmitter();
+        this.wrapFilterValue = wrapFilterValue;
+        this.unwrapFilterValue = unwrapFilterValue;
+    }
+    onSortColumnChange(ev) {
+        this.sortColumn = ev;
+        this.emitSortChange();
+    }
+    onSortDirectionChange() {
+        this.emitSortChange();
+    }
+    emitSortChange() {
+        this.sortChange.emit({
+            active: this.sortColumn,
+            direction: this.sortDirection
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, deps: [], 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" }, 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear"], outputs: ["valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "nrcl-row-list-sorting", template: "<nrcl-filter-select class=\"sort-order\" \n    label=\"Sort By\"\n    [value]=\"wrapFilterValue( sortColumn )\"\n    [options]=\"sortColumnOptions\"\n    (valueChange)=\"onSortColumnChange( unwrapFilterValue( $event ) )\"\n    selectMax=\"1\"        \n></nrcl-filter-select>\n\n<nrcl-filter-container class=\"sort-direction\" \n    label=\"Sort Order\"\n>\n    <mat-radio-group\n        [(ngModel)]=\"sortDirection\" \n        (ngModelChange)=\"onSortDirectionChange()\"\n        [disabled]=\"!sortColumn\"\n    >\n        <mat-radio-button aria-label=\"Sort A to Z\" value=\"asc\">A &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"] }]
+        }], propDecorators: { sortColumn: [{
+                type: Input
+            }], sortColumnOptions: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }] } });
+
+class SnackbarComponent {
+    constructor(snackBarRef, config) {
+        this.snackBarRef = snackBarRef;
+        this.config = config;
+    }
+    get className() {
+        return 'snackbar-type-' + this.config.type;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$3.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SnackbarComponent, selector: "nrcl-snackbar", host: { properties: { "class": "className" } }, ngImport: i0, template: "<div class=\"icon\">\n    @switch ( config.type ) {\n        @case ( 'success' ) {\n            <mat-icon>check_circle</mat-icon>\n        }\n        @case ( 'error' ) {\n            <mat-icon>cancel</mat-icon>\n        }\n        @case ( 'info' ) {\n            <mat-icon>info</mat-icon>\n        }\n        @case ( 'update' ) {\n            <mat-icon>error</mat-icon>\n        }\n    }\n</div>\n\n<div class=\"message\">\n    <span>{{ config.message }}</span>\n</div>\n\n<div class=\"button\">\n    <button (click)=\"snackBarRef.dismissWithAction()\">Close</button>\n</div>\n", styles: ["::ng-deep :root{--nrcl-snackbar-success-background-color: #2E7940;--nrcl-snackbar-error-background-color: #D8292F;--nrcl-snackbar-info-background-color: #37474f;--nrcl-snackbar-update-background-color: #37474f;--nrcl-snackbar-update-button-color: #f9ca81}:host{display:flex;align-items:stretch;height:100%;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word;background-color:var(--snackbar-background-color)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.snackbar-type-success{--snackbar-background-color: var(--nrcl-snackbar-success-background-color )}:host.snackbar-type-error{--snackbar-background-color: var(--nrcl-snackbar-error-background-color )}:host.snackbar-type-info{--snackbar-background-color: var( --nrcl-snackbar-info-background-color )}:host.snackbar-type-update{--snackbar-background-color: var( --nrcl-snackbar-update-background-color );--snackbar-button-color: var( --nrcl-snackbar-update-button-color )}:host .icon{display:flex;background-color:#f2f2f2;align-items:center;justify-content:center;pointer-events:none}:host .icon mat-icon{padding:var(--nrcl-gutter-space);color:var(--snackbar-background-color)}:host .message{padding:var(--nrcl-gutter-space);flex:1;cursor:default;pointer-events:none}:host .button{padding-right:8px;display:flex;align-items:center;justify-content:center}:host .button button{padding:calc(var(--nrcl-gutter-space) / 2);border:1px white solid;border-radius:5px;color:#fff;cursor:pointer;font-family:var(--nrcl-font-family);background-color:var(--snackbar-button-color, --snackbar-background-color)}::ng-deep .mat-mdc-snack-bar-container{color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{padding-right:0}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface .mat-mdc-snack-bar-label{padding:0}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-snackbar', host: {
+                        '[class]': 'className'
+                    }, template: "<div class=\"icon\">\n    @switch ( config.type ) {\n        @case ( 'success' ) {\n            <mat-icon>check_circle</mat-icon>\n        }\n        @case ( 'error' ) {\n            <mat-icon>cancel</mat-icon>\n        }\n        @case ( 'info' ) {\n            <mat-icon>info</mat-icon>\n        }\n        @case ( 'update' ) {\n            <mat-icon>error</mat-icon>\n        }\n    }\n</div>\n\n<div class=\"message\">\n    <span>{{ config.message }}</span>\n</div>\n\n<div class=\"button\">\n    <button (click)=\"snackBarRef.dismissWithAction()\">Close</button>\n</div>\n", styles: ["::ng-deep :root{--nrcl-snackbar-success-background-color: #2E7940;--nrcl-snackbar-error-background-color: #D8292F;--nrcl-snackbar-info-background-color: #37474f;--nrcl-snackbar-update-background-color: #37474f;--nrcl-snackbar-update-button-color: #f9ca81}:host{display:flex;align-items:stretch;height:100%;color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word;background-color:var(--snackbar-background-color)}:host ::ng-deep .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host ::ng-deep .mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host ::ng-deep button.mat-mdc-fab>.mat-icon,:host ::ng-deep button.mat-mdc-raised-button>.mat-icon,:host ::ng-deep button.mat-mdc-button>.mat-icon,:host ::ng-deep button.mat-mdc-icon-button>.mat-icon,:host ::ng-deep button.mat-mdc-outlined-button>.mat-icon,:host ::ng-deep button.mat-mdc-unelevated-button>.mat-icon,:host ::ng-deep button.mat-mdc-mini-fab .mat-mdc-menu-item>.mat-icon{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.snackbar-type-success{--snackbar-background-color: var(--nrcl-snackbar-success-background-color )}:host.snackbar-type-error{--snackbar-background-color: var(--nrcl-snackbar-error-background-color )}:host.snackbar-type-info{--snackbar-background-color: var( --nrcl-snackbar-info-background-color )}:host.snackbar-type-update{--snackbar-background-color: var( --nrcl-snackbar-update-background-color );--snackbar-button-color: var( --nrcl-snackbar-update-button-color )}:host .icon{display:flex;background-color:#f2f2f2;align-items:center;justify-content:center;pointer-events:none}:host .icon mat-icon{padding:var(--nrcl-gutter-space);color:var(--snackbar-background-color)}:host .message{padding:var(--nrcl-gutter-space);flex:1;cursor:default;pointer-events:none}:host .button{padding-right:8px;display:flex;align-items:center;justify-content:center}:host .button button{padding:calc(var(--nrcl-gutter-space) / 2);border:1px white solid;border-radius:5px;color:#fff;cursor:pointer;font-family:var(--nrcl-font-family);background-color:var(--snackbar-button-color, --snackbar-background-color)}::ng-deep .mat-mdc-snack-bar-container{color:#fff;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size);word-break:break-word}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{padding-right:0}::ng-deep .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface .mat-mdc-snack-bar-label{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatSnackBarRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }] });
+
+class PageStateService {
+    constructor() {
+        this.classRegistry = new WeakMap();
+    }
+    getPageState(classConstructor, defaultState, label) {
+        if (this.classRegistry.has(classConstructor)) {
+            let sc = this.classRegistry.get(classConstructor);
+            return sc.state;
+        }
+        this.setPageState(classConstructor, defaultState, label);
+        return defaultState;
+    }
+    setPageState(classConstructor, state, label) {
+        let sc = { label, state };
+        this.classRegistry.set(classConstructor, sc);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageStateService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: () => [] });
+
+class Aborted {
+    constructor(reason) {
+        this.reason = reason;
+    }
+}
+class ObservableAborter {
+    constructor(observable, delay = 500) {
+        this.observable = observable;
+        this.delay = delay;
+        this._promise = new Promise((res, rej) => {
+            let timer = setTimeout(() => {
+                let sub = this.observable().subscribe({
+                    next: res,
+                    error: rej
+                });
+                this._abort = () => {
+                    sub.unsubscribe();
+                    rej(new Aborted('aborted request'));
+                    this._abort = null;
+                };
+            }, this.delay);
+            this._abort = () => {
+                clearTimeout(timer);
+                rej(new Aborted('aborted timer'));
+                this._abort = null;
+            };
+        });
+    }
+    abort() {
+        if (this._aborted)
+            return;
+        this._aborted = true;
+        if (!this._abort)
+            return;
+        this._abort();
+    }
+    get aborted() {
+        return this._aborted;
+    }
+    get promise() {
+        return this._promise;
+    }
+}
+
+class RowListBase {
+    get isLoading() { return this._isLoading; }
+    set isLoading(v) {
+        if (v == this._isLoading)
+            return;
+        this._isLoading = v;
+        this.isLoadingChange.emit(v);
+    }
+    constructor() {
+        this.isLoadingChange = new EventEmitter();
+        this._isLoading = false;
+        this.rows = [];
+        this.pageStateService = inject(PageStateService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.initializeRowList();
+    }
+    initializeRowList() {
+        this.loadPageState();
+    }
+    ngAfterViewInit() {
+        this.refreshRowList();
+    }
+    refreshRowList() {
+        this.isLoading = true;
+        return Promise.resolve()
+            .then(() => {
+            return this.loadRowList();
+        })
+            .then(({ rows, totalRowCount }) => {
+            this.rows = rows;
+            this.totalRowCount = totalRowCount;
+            this.isLoading = false;
+        })
+            .catch((e) => {
+            if (e instanceof Aborted)
+                return;
+            this.loadRowListPageFailed(e);
+            this.isLoading = false;
+        })
+            .finally(() => {
+            this.updateSummaryMobile();
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    loadRowList() {
+        if (this._loadRowListRequest)
+            this._loadRowListRequest.abort();
+        this._loadRowListRequest = new ObservableAborter(() => {
+            return this.fetchRowListPage();
+        });
+        return this._loadRowListRequest.promise
+            .then(res => {
+            return this.displayRowListPage(res);
+        });
+    }
+    fetchRowListPage() {
+        throw 'unimplemented';
+    }
+    displayRowListPage(res) {
+        throw 'unimplemented';
+    }
+    loadRowListPageFailed(error) {
+        console.warn(error);
+        this.rows = [];
+        this.totalRowCount = 0;
+    }
+    onFilterChange(ev) {
+        this.filter = ev;
+        this.pageNumber = 1;
+        this.refreshRowList()
+            .then(() => {
+            this.savePageState();
+            this.updateSummaryMobile();
+        });
+    }
+    onSortChange(ev) {
+        this.sortActive = ev.active;
+        this.sortDirection = ev.direction;
+        this.pageNumber = 1;
+        this.refreshRowList()
+            .then(() => {
+            this.savePageState();
+            this.updateSummaryMobile();
+        });
+    }
+    onPageNumberChange(ev) {
+        this.pageNumber = ev;
+        this.refreshRowList()
+            .then(() => {
+            this.savePageState();
+            this.updateSummaryMobile();
+        });
+    }
+    onPageSizeChange(ev) {
+        this.pageSize = ev;
+        this.pageNumber = 1;
+        this.refreshRowList()
+            .then(() => {
+            this.savePageState();
+            this.updateSummaryMobile();
+        });
+    }
+    updateSummaryMobile() {
+        [this.summaryMobile, this.showPagingMobile] = makeSummary(this.totalRowCount, this.pageNumber, this.pageSize);
+    }
+    get initialPageState() {
+        throw 'unimplemented';
+    }
+    loadPageState() {
+        let state = this.pageStateService.getPageState(this.constructor, this.initialPageState);
+        this.filter = state.filter;
+        this.pageSize = state.pageSize;
+        this.pageNumber = state.pageNumber;
+        this.sortActive = state.sortActive;
+        this.sortDirection = state.sortDirection;
+    }
+    savePageState() {
+        let state = JSON.parse(JSON.stringify({
+            filter: this.filter,
+            pageSize: this.pageSize,
+            pageNumber: this.pageNumber,
+            sortActive: this.sortActive,
+            sortDirection: this.sortDirection,
+        }));
+        this.pageStateService.setPageState(this.constructor, state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowListBase, outputs: { isLoadingChange: "isLoadingChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { isLoadingChange: [{
+                type: Output
+            }] } });
+function makeSummary(rowCount, pageNumber, pageSize) {
+    if (rowCount && pageSize) {
+        let pageCount = Math.ceil(rowCount / pageSize);
+        let first = (Math.min(pageCount, pageNumber) - 1) * pageSize + 1;
+        let last = Math.min(first + pageSize - 1, rowCount);
+        return [`Showing ${first} to ${last} of ${rowCount}`, true];
+    }
+    else {
+        return ["No records to display.", false];
+    }
+}
+
+class SnackbarUtilService {
+    constructor() {
+        this.snackbar = inject(MatSnackBar);
+    }
+    successful(message, duration = 5000) {
+        this.snackbar.openFromComponent(SnackbarComponent, {
+            duration: duration,
+            data: {
+                type: 'success',
+                message: message
+            }
+        });
+    }
+    successfullySaved(message, duration = 5000) {
+        this.successful(`${message} saved successfully.`, duration);
+    }
+    successfullyDeleted(message, duration = 5000) {
+        this.successful(`${message} deleted successfully.`, duration);
+    }
+    successfullyRemoved(message, duration = 5000) {
+        this.successful(`${message} removed successfully.`, duration);
+    }
+    successfullyCreated(message, duration = 5000) {
+        this.successful(`${message} created successfully.`, duration);
+    }
+    successfullyAdded(message, duration = 5000) {
+        this.successful(`${message} added successfully.`, duration);
+    }
+    information(message, duration = null) {
+        this.snackbar.openFromComponent(SnackbarComponent, {
+            duration: duration,
+            data: {
+                type: 'info',
+                message: message
+            }
+        });
+    }
+    error(message, duration = null) {
+        this.snackbar.openFromComponent(SnackbarComponent, {
+            duration: duration,
+            data: {
+                type: 'error',
+                message: message
+            }
+        });
+    }
+    updated(message, duration = null) {
+        this.snackbar.openFromComponent(SnackbarComponent, {
+            duration: duration,
+            data: {
+                type: 'update',
+                message: message
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarUtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarUtilService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarUtilService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CodeTable {
+    constructor(
+    // private _items: ( CodeDescription | CodeData | Option )[], 
+    _items, _reload) {
+        this._items = _items;
+        this._reload = _reload;
+    }
+    get items() {
+        return this._items;
+    }
+    forCode(code) {
+        return this._items.find(o => o.code == code);
+    }
+    reload() {
+        if (!this._reload)
+            return Promise.reject('no reload defined');
+        return this._reload()
+            .then(res => {
+            this._items = res;
+        });
+    }
+}
+
+class NrNgxComponentLibModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, declarations: [ButtonComponent,
+            CellContentComponent,
+            DesktopViewComponent,
+            ExpansionPanelComponent,
+            ExpansionPanelHeaderComponent,
+            ExpansionPanelFooterComponent,
+            FilterContainerComponent,
+            FilterDateComponent,
+            FilterSearchComponent,
+            FilterSelectComponent,
+            FiltersPanelComponent,
+            FormFieldComponent,
+            FormLayoutComponent,
+            GapComponent,
+            MobileViewComponent,
+            PageContainerComponent,
+            PageHeaderComponent,
+            RowListDesktopComponent,
+            RowListMobileComponent,
+            RowListPaginationComponent,
+            RowListSortingComponent,
+            SnackbarComponent], imports: [BrowserAnimationsModule,
+            CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatExpansionModule,
+            MatRadioModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatProgressSpinnerModule,
+            MatRippleModule,
+            MatSortModule,
+            MatTableModule,
+            MatTooltipModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlMomentDateTimeModule,
+            NgxPaginationModule], exports: [ButtonComponent,
+            CellContentComponent,
+            DesktopViewComponent,
+            ExpansionPanelComponent,
+            ExpansionPanelHeaderComponent,
+            ExpansionPanelFooterComponent,
+            FilterContainerComponent,
+            FilterDateComponent,
+            FilterSearchComponent,
+            FilterSelectComponent,
+            FiltersPanelComponent,
+            FormFieldComponent,
+            FormLayoutComponent,
+            GapComponent,
+            MobileViewComponent,
+            PageContainerComponent,
+            PageHeaderComponent,
+            RowListDesktopComponent,
+            RowListMobileComponent,
+            RowListPaginationComponent,
+            RowListSortingComponent,
+            SnackbarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, providers: [
+            SnackbarUtilService,
+            ConfigurationService,
+            PageStateService,
+            { provide: OWL_DATE_TIME_FORMATS, useValue: DATE_FORMATS },
+        ], imports: [BrowserAnimationsModule,
+            CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatExpansionModule,
+            MatRadioModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMenuModule,
+            MatProgressSpinnerModule,
+            MatRippleModule,
+            MatSortModule,
+            MatTableModule,
+            MatTooltipModule,
+            ReactiveFormsModule,
+            RouterModule,
+            OwlDateTimeModule,
+            OwlMomentDateTimeModule,
+            NgxPaginationModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        BrowserAnimationsModule,
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatExpansionModule,
+                        MatRadioModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatProgressSpinnerModule,
+                        MatRippleModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatTooltipModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        OwlDateTimeModule,
+                        OwlMomentDateTimeModule,
+                        NgxPaginationModule,
+                    ],
+                    declarations: [
+                        ButtonComponent,
+                        CellContentComponent,
+                        DesktopViewComponent,
+                        ExpansionPanelComponent,
+                        ExpansionPanelHeaderComponent,
+                        ExpansionPanelFooterComponent,
+                        FilterContainerComponent,
+                        FilterDateComponent,
+                        FilterSearchComponent,
+                        FilterSelectComponent,
+                        FiltersPanelComponent,
+                        FormFieldComponent,
+                        FormLayoutComponent,
+                        GapComponent,
+                        MobileViewComponent,
+                        PageContainerComponent,
+                        PageHeaderComponent,
+                        RowListDesktopComponent,
+                        RowListMobileComponent,
+                        RowListPaginationComponent,
+                        RowListSortingComponent,
+                        SnackbarComponent,
+                    ],
+                    exports: [
+                        ButtonComponent,
+                        CellContentComponent,
+                        DesktopViewComponent,
+                        ExpansionPanelComponent,
+                        ExpansionPanelHeaderComponent,
+                        ExpansionPanelFooterComponent,
+                        FilterContainerComponent,
+                        FilterDateComponent,
+                        FilterSearchComponent,
+                        FilterSelectComponent,
+                        FiltersPanelComponent,
+                        FormFieldComponent,
+                        FormLayoutComponent,
+                        GapComponent,
+                        MobileViewComponent,
+                        PageContainerComponent,
+                        PageHeaderComponent,
+                        RowListDesktopComponent,
+                        RowListMobileComponent,
+                        RowListPaginationComponent,
+                        RowListSortingComponent,
+                        SnackbarComponent,
+                    ],
+                    providers: [
+                        SnackbarUtilService,
+                        ConfigurationService,
+                        PageStateService,
+                        { provide: OWL_DATE_TIME_FORMATS, useValue: DATE_FORMATS },
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of wfcc-application-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, MobileViewComponent, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
+//# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map