@bcgov/nr-ngx-component-lib 0.0.3 → 0.0.5

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

@@ -1,45 +1,48 @@
 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 { Injectable, inject, ChangeDetectorRef, Directive, ElementRef, Component, EventEmitter, NgZone, booleanAttribute, Input, Output, ContentChild, 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 * as i1$1 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@angular/material/expansion';
+import * as i2$4 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$3 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 * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import moment from 'moment';
-import * as i1$1 from '@angular/forms';
+import * as i1$4 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 * as i5 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 * as i5$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$3 from '@angular/material/card';
+import * as i1$5 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$3 from '@angular/material/sort';
-import { MatSortModule } from '@angular/material/sort';
-import * as i4 from '@angular/material/table';
+import * as i3$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i1$2 from 'ngx-pagination';
+import * as i11 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
+import * as i3$2 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
 import * as i2$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i1$4 from '@angular/material/snack-bar';
+import * as i1$6 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
-import { CommonModule } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatMenuModule } from '@angular/material/menu';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -105,10 +108,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Directive
         }] });
 
+class IconComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.domSanitizer = inject(DomSanitizer);
+    }
+    ngAfterContentInit() {
+        this.name = this.elementRef?.nativeElement?.textContent;
+        if (ICON[this.name])
+            this.svg = this.domSanitizer.bypassSecurityTrustHtml(ICON[this.name]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg" } }, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: [":host{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.show-svg .mat-icon{display:none}:host.show-svg .svg{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.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: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nrcl-icon', host: {
+                        '[class.show-icon]': '!svg',
+                        '[class.show-svg]': '!!svg',
+                    }, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: [":host{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.show-svg .mat-icon{display:none}:host.show-svg .svg{width:var(--nrcl-icon-size);height:var(--nrcl-icon-size);font-size:var(--nrcl-icon-size);line-height:var(--nrcl-icon-size)}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"] }]
+        }] });
+const ICON = {
+    'clear-filters': `
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -7.934265 133.15887 133.15887" height="100%" width="100%">
+            <g transform="translate(-34.473864,-66.676034)">
+                <g>
+                    <g>
+                        <path d="M 94.473677,137.49393 34.473864,66.783005 34.564632,66.676034 H 154.38314 l 0.0907,0.106971 z" />
+                        <rect y="129.02737" x="88.416046" height="45.357258" width="12.115609" />
+                    </g>
+                    <rect width="29.482143" height="76.351196" x="79.73278" y="107.61517" />
+                </g>
+                <g transform="translate(500.06128,136.57473)">
+                    <rect width="14.363094" height="49.892857" x="-249.284" y="235.20406" transform="rotate(45)" />
+                    <rect width="14.363095" height="49.892857" x="-267.59927" y="-266.99539" transform="rotate(-45)" />
+                </g>
+            </g>
+        </svg>
+    `
+};
+
 class ButtonComponent extends ConfigurationSubscriberBase {
     constructor() {
         super(...arguments);
         this.primary = false;
+        this.outline = false;
         this.disabled = false;
         this.click = new EventEmitter();
         this.zone = inject(NgZone);
@@ -134,18 +178,19 @@ class ButtonComponent extends ConfigurationSubscriberBase {
         });
     }
     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"] }] }); }
+    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], outline: ["outline", "outline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { click: "click" }, host: { properties: { "class.primary": "primary", "class.outline": "outline && !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            <nrcl-icon class=\"left\">{{ icon }}</nrcl-icon> \n        }\n\n        @if ( !isCompact && iconRight && label ) { \n            <nrcl-icon class=\"right\">{{ iconRight }}</nrcl-icon> \n        }\n\n        @if ( isCompact && iconCompact ) { \n            <nrcl-icon class=\"compact\">{{ iconCompact }}</nrcl-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-outline-foreground-color: black;--nrcl-button-outline-background-color: transparent;--nrcl-button-outline-border-color: rgba(0, 0, 0, .12);--nrcl-button-outline-hover-background-color: rgba(0, 0, 0, .04);--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 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 button .content{padding-left:16px;padding-right:16px;display:flex;align-items:center}:host.label button{padding-left:16px;padding-right:16px}:host.icon-left button{padding-left:var(--nrcl-button-height)}:host.icon-left button .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-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 .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-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.outline button{background-color:var(--nrcl-button-outline-background-color);color:var(--nrcl-button-outline-foreground-color);border-color:var(--nrcl-button-outline-border-color);box-shadow:none}:host.outline button:hover{background-color:var(--nrcl-button-outline-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.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: "directive", type: i1$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }] }); }
 }
 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.outline]': 'outline && !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"] }]
+                    }, 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            <nrcl-icon class=\"left\">{{ icon }}</nrcl-icon> \n        }\n\n        @if ( !isCompact && iconRight && label ) { \n            <nrcl-icon class=\"right\">{{ iconRight }}</nrcl-icon> \n        }\n\n        @if ( isCompact && iconCompact ) { \n            <nrcl-icon class=\"compact\">{{ iconCompact }}</nrcl-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-outline-foreground-color: black;--nrcl-button-outline-background-color: transparent;--nrcl-button-outline-border-color: rgba(0, 0, 0, .12);--nrcl-button-outline-hover-background-color: rgba(0, 0, 0, .04);--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 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 button .content{padding-left:16px;padding-right:16px;display:flex;align-items:center}:host.label button{padding-left:16px;padding-right:16px}:host.icon-left button{padding-left:var(--nrcl-button-height)}:host.icon-left button .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-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 .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-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.outline button{background-color:var(--nrcl-button-outline-background-color);color:var(--nrcl-button-outline-foreground-color);border-color:var(--nrcl-button-outline-border-color);box-shadow:none}:host.outline button:hover{background-color:var(--nrcl-button-outline-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.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: [{
@@ -161,6 +206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], primary: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], outline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -188,7 +236,7 @@ class CellContentComponent {
         });
     }
     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)}: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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellContentComponent, selector: "nrcl-cell-content", inputs: { tooltip: "tooltip", content: "content" }, ngImport: i0, template: "<div [matTooltip]=\"tooltipContent\" class=\"content\">\n    @if ( content ) {\n        {{ content }}\n    }\n    @else {\n        <ng-content></ng-content>\n    }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--nrcl-font-family)}:host .content{width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.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,
@@ -199,36 +247,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 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 }); }
+class DesktopViewDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesktopViewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DesktopViewDirective, selector: "[desktop-view]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesktopViewComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DesktopViewDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: "nrcl-desktop-view",
-                    template: '@if ( visible ) { <ng-content></ng-content> }',
-                    host: {
-                        '[class.nrcl-device-desktop]': 'true'
-                    }
+                    selector: "[desktop-view]"
                 }]
-        }] });
-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 }); }
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class MobileViewDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MobileViewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MobileViewDirective, selector: "[mobile-view]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MobileViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[mobile-view]"
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class DeviceViewComponent extends ConfigurationSubscriberBase {
+    constructor() {
+        super(...arguments);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    get desktopVisible() { return this.configuration.displayMode == 'desktop'; }
+    get mobileVisible() { return this.configuration.displayMode == 'mobile'; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeviceViewComponent, selector: "nrcl-device-view", queries: [{ propertyName: "desktopContent", first: true, predicate: DesktopViewDirective, descendants: true }, { propertyName: "mobileContent", first: true, predicate: MobileViewDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        @if ( mobileVisible && mobileContent ) {
+            <ng-container [ngTemplateOutlet]="mobileContent.templateRef"></ng-container>
+        }
+
+        @if ( desktopVisible && desktopContent ) {
+            <ng-container [ngTemplateOutlet]="desktopContent.templateRef"></ng-container>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MobileViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeviceViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "nrcl-mobile-view",
-                    template: '@if ( visible ) { <ng-content></ng-content> }',
-                    host: {
-                        '[class.nrcl-device-mobile]': 'true'
-                    }
+                    selector: "nrcl-device-view",
+                    template: `
+        @if ( mobileVisible && mobileContent ) {
+            <ng-container [ngTemplateOutlet]="mobileContent.templateRef"></ng-container>
+        }
+
+        @if ( desktopVisible && desktopContent ) {
+            <ng-container [ngTemplateOutlet]="desktopContent.templateRef"></ng-container>
+        }
+    `,
                 }]
-        }] });
+        }], propDecorators: { desktopContent: [{
+                type: ContentChild,
+                args: [DesktopViewDirective]
+            }], mobileContent: [{
+                type: ContentChild,
+                args: [MobileViewDirective]
+            }] } });
 
 class ExpansionPanelComponent {
     constructor() {
@@ -238,7 +321,7 @@ class ExpansionPanelComponent {
         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 }); }
+    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 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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$3.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,
@@ -246,7 +329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[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"] }]
+                    }, 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 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: [{
@@ -294,7 +377,7 @@ class ExpansionPanelFooterComponent {
     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>
+                <nrcl-icon>warning</nrcl-icon>
                 <span>{{ warningMessage }}</span>
             </div>
         }
@@ -320,14 +403,14 @@ class ExpansionPanelFooterComponent {
         }
 
         <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"] }] }); }
+    `, 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 nrcl-icon{color:#fcba19}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }] }); }
 }
 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>
+                <nrcl-icon>warning</nrcl-icon>
                 <span>{{ warningMessage }}</span>
             </div>
         }
@@ -353,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
 
         <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"] }]
+    `, 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 nrcl-icon{color:#fcba19}\n"] }]
         }], propDecorators: { saveEnabled: [{
                 type: Input
             }], cancelEnabled: [{
@@ -373,7 +456,7 @@ class FilterContainerComponent {
         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 }); }
+    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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterContainerComponent, decorators: [{
             type: Component,
@@ -415,11 +498,11 @@ class FilterDateComponent {
         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 }); }
+    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        <nrcl-icon>event</nrcl-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: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}: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:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], 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"] }]
+            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        <nrcl-icon>event</nrcl-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: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-date-width, var(--nrcl-filter-width-default));display:block}: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:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -456,13 +539,13 @@ class FilterSearchComponent {
         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 }); }
+    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            <nrcl-icon>close</nrcl-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: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}: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:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], 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"] }]
+                    }, 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            <nrcl-icon>close</nrcl-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: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-search-width, calc(var(--nrcl-filter-width-default) * 2 + 8px));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default)}: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:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -494,6 +577,7 @@ class FilterSelectComponent {
         this.tooltips = true;
         this.summary = true;
         this.clear = true;
+        this.filter = true;
         this.valueChange = new EventEmitter();
         this.floatLabel = 'auto';
         this.isFiltered = false;
@@ -554,7 +638,11 @@ class FilterSelectComponent {
             return;
         this.isOpen = true;
         this.floatLabel = 'always';
-        this.inputValue = '';
+        if (this.filter) {
+            this.inputValue = '';
+        }
+        else {
+        }
         // Create overlay
         const positionStrategy = this.overlay
             .position()
@@ -685,19 +773,23 @@ class FilterSelectComponent {
     onInputFocus() {
         this.open();
     }
+    onCloseClick() {
+        this.close();
+    }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", options: "options", value: "value", selectMax: ["selectMax", "selectMax", numberAttribute], tooltips: ["tooltips", "tooltips", booleanAttribute], summary: ["summary", "summary", booleanAttribute], clear: ["clear", "clear", booleanAttribute], filter: ["filter", "filter", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.has-value": "hasValue", "class.is-open": "isOpen", "class.is-closed": "!isOpen", "class.use-filter": "filter" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #trigger\n    [floatLabel]=\"floatLabel\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    @if ( label ) {\n        <mat-label>{{ label }}</mat-label>\n    }\n\n    <input class=\"filter-input\" #searchInput\n        matInput \n        [placeholder]=\"placeholder\" \n        [value]=\"inputValue\"\n        (input)=\"onInput( $event )\"\n        (keydown.escape)=\"close()\"\n        (focus)=\"onInputFocus()\"\n        [matTooltip]=\"inputValue\"\n        [readonly]=\"!filter\"\n    >\n\n    @if ( isOpen ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCloseClick($event); $event.stopPropagation()\"\n        >\n            <nrcl-icon>arrow_drop_up</nrcl-icon>\n        </button>\n    }\n    @else if ( selection?.value?.length > 0 && clear ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCancelClick($event); $event.stopPropagation()\"\n        >\n            <nrcl-icon>close</nrcl-icon>\n        </button>\n    }\n    @else {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n        >\n            <nrcl-icon>arrow_drop_down</nrcl-icon>\n        </button>\n    }                \n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n</mat-form-field>        \n\n<ng-template #overlayTemplate>\n    <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n        @if ( !isFiltered && !single && summary ) {\n            @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n                <div class=\"selection-overview\">\n                    <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n                    <mat-selection-list\n                        (selectionChange)=\"onUpperSelectionChange( $event )\"\n                    >\n                        @for ( code of selection?.value; track code ) {\n                            <mat-list-option \n                                [value]=\"code\" \n                                togglePosition=\"before\"\n                                selected\n                                [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n                                matTooltipPosition=\"after\"\n                            >\n                                {{ descriptionForCode( code ) }}\n                            </mat-list-option>\n                        }\n                    </mat-selection-list>\n                </div>\n            }\n\n            @if ( selection?.value?.length == options?.length ) {\n                <div class=\"selection-overview\">\n                    <div class=\"summary\">All options selected</div>\n                </div>\n            }\n        }\n\n        <mat-selection-list\n            [formControl]=\"selection\"\n            (selectionChange)=\"onSelectionChange( $event )\"\n            [multiple]=\"!single\"\n            hideSingleSelectionIndicator\n        >\n            @for ( option of options; track option ) {\n                <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n                    [value]=\"option.code\" \n                    togglePosition=\"before\"                    \n                    [matTooltip]=\"tooltips ? option.description : null\"\n                    matTooltipPosition=\"after\"                    \n                >\n                    {{ option.description }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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"] }]
+                        '[class.is-closed]': "!isOpen",
+                        '[class.use-filter]': "filter",
+                    }, template: "<mat-form-field #trigger\n    [floatLabel]=\"floatLabel\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n>\n    @if ( label ) {\n        <mat-label>{{ label }}</mat-label>\n    }\n\n    <input class=\"filter-input\" #searchInput\n        matInput \n        [placeholder]=\"placeholder\" \n        [value]=\"inputValue\"\n        (input)=\"onInput( $event )\"\n        (keydown.escape)=\"close()\"\n        (focus)=\"onInputFocus()\"\n        [matTooltip]=\"inputValue\"\n        [readonly]=\"!filter\"\n    >\n\n    @if ( isOpen ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCloseClick($event); $event.stopPropagation()\"\n        >\n            <nrcl-icon>arrow_drop_up</nrcl-icon>\n        </button>\n    }\n    @else if ( selection?.value?.length > 0 && clear ) {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n            (click)=\"onCancelClick($event); $event.stopPropagation()\"\n        >\n            <nrcl-icon>close</nrcl-icon>\n        </button>\n    }\n    @else {\n        <button class=\"cancel\"\n            mat-icon-button\n            matSuffix\n        >\n            <nrcl-icon>arrow_drop_down</nrcl-icon>\n        </button>\n    }                \n\n    @if ( hint ) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n</mat-form-field>        \n\n<ng-template #overlayTemplate>\n    <div class=\"filter-select-options\" [class.multiple]=\"!single\" [class.single]=\"single\">\n        @if ( !isFiltered && !single && summary ) {\n            @if ( selection?.value?.length > 0 && selection?.value?.length < options?.length ) {\n                <div class=\"selection-overview\">\n                    <div class=\"summary\">{{ selection?.value?.length }} selected of {{ options?.length }}</div>\n\n                    <mat-selection-list\n                        (selectionChange)=\"onUpperSelectionChange( $event )\"\n                    >\n                        @for ( code of selection?.value; track code ) {\n                            <mat-list-option \n                                [value]=\"code\" \n                                togglePosition=\"before\"\n                                selected\n                                [matTooltip]=\"tooltips ? descriptionForCode( code ) : null\"\n                                matTooltipPosition=\"after\"\n                            >\n                                {{ descriptionForCode( code ) }}\n                            </mat-list-option>\n                        }\n                    </mat-selection-list>\n                </div>\n            }\n\n            @if ( selection?.value?.length == options?.length ) {\n                <div class=\"selection-overview\">\n                    <div class=\"summary\">All options selected</div>\n                </div>\n            }\n        }\n\n        <mat-selection-list\n            [formControl]=\"selection\"\n            (selectionChange)=\"onSelectionChange( $event )\"\n            [multiple]=\"!single\"\n            hideSingleSelectionIndicator\n        >\n            @for ( option of options; track option ) {\n                <mat-list-option [class.hide]=\"!matchesFilter( option )\"\n                    [value]=\"option.code\" \n                    togglePosition=\"before\"                    \n                    [matTooltip]=\"tooltips ? option.description : null\"\n                    matTooltipPosition=\"after\"                    \n                >\n                    {{ option.description }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    </div>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-filter-select-width: var( --nrcl-filter-width-default )}:host{--mat-form-field-container-height: calc( var( --nrcl-filter-height-default ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default));display:block}:host.has-value{--mdc-outlined-text-field-label-text-color: black}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-filter-height-default);cursor:pointer}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-filter-select-width, var(--nrcl-filter-width-default))}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:pointer}:host.is-open.use-filter ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .filter-input{cursor:text}:host .cancel{padding:0;width:calc(var(--nrcl-filter-height-default) - 2px);height:calc(var(--nrcl-filter-height-default) - 2px);display:flex;justify-content:center;align-items:center;cursor:default}::ng-deep .filter-select-options{--mdc-list-list-item-selected-container-color: #007bff;font-family:var(--nrcl-font-family);overflow-x:hidden;overflow-y:auto;padding:0;background:#fff;color:#000;border:1px solid #aaa;border-radius:4px;font-size:var(--nrcl-font-size);pointer-events:all;box-shadow:0 4px 5px #00000026;display:block;width:100%}::ng-deep .filter-select-options .selection-overview{background-color:#eee;border-bottom:1px solid black}::ng-deep .filter-select-options .selection-overview .summary{padding-top:4px;padding-left:4px;font-size:14px;color:#000000bc;font-family:var(--nrcl-font-family)}::ng-deep .filter-select-options .mat-mdc-selection-list{padding-top:0;padding-bottom:0}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option{height:30px;font-size:var(--nrcl-font-size);padding-left:4px;padding-right:8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.hide{display:none}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__start{margin:0;padding:0 8px}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option .mdc-list-item__primary-text{flex-grow:1;font-size:var(--nrcl-font-size)}::ng-deep .filter-select-options .mat-mdc-selection-list .mat-mdc-list-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#fff}::ng-deep .filter-select-options.single .mat-mdc-selection-list .mat-mdc-list-option{padding-left:12px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -720,6 +812,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], clear: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], filter: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], valueChange: [{
                 type: Output
             }], trigger: [{
@@ -737,8 +832,11 @@ class FiltersPanelComponent {
     constructor() {
         this.showClear = true;
         this.showFilters = true;
+        this.hasAdvancedFilters = false;
+        this.showAdvancedFilters = false;
         this.clearFilters = new EventEmitter();
         this.showFiltersChange = new EventEmitter();
+        this.showAdvancedFiltersChange = new EventEmitter();
     }
     onClearClick() {
         this.clearFilters.emit();
@@ -751,20 +849,34 @@ class FiltersPanelComponent {
         this.showFilters = true;
         this.showFiltersChange.emit(true);
     }
+    onHideAdvancedClick() {
+        this.showAdvancedFilters = false;
+        this.showAdvancedFiltersChange.emit(false);
+    }
+    onShowAdvancedClick() {
+        this.showAdvancedFilters = true;
+        this.showAdvancedFiltersChange.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: { showClear: "showClear", showFilters: "showFilters", hasAdvancedFilters: "hasAdvancedFilters", showAdvancedFilters: "showAdvancedFilters" }, outputs: { clearFilters: "clearFilters", showFiltersChange: "showFiltersChange", showAdvancedFiltersChange: "showAdvancedFiltersChange" }, ngImport: i0, template: "@if ( showFilters ) {\n    <ng-content></ng-content>\n}\n\n@if ( showFilters && hasAdvancedFilters && showAdvancedFilters ) {\n    <ng-content select=\"[advanced]\"></ng-content>\n}\n\n<div class=\"actions\">\n    <nrcl-device-view>\n        <ng-template mobile-view>\n            @if ( showFilters ) {\n                <nrcl-button outline \n                    label=\"Hide Filters\"\n                    icon=\"expand_less\"\n                    (click)=\"onHideClick()\"\n                    compact=\"mobile\"\n                ></nrcl-button>\n            }\n            @else {\n                <nrcl-button outline \n                    label=\"Show Filters\"\n                    icon=\"expand_more\"\n                    (click)=\"onShowClick()\"\n                    compact=\"mobile\"\n                ></nrcl-button>\n            }\n        </ng-template>\n    </nrcl-device-view>\n\n    @if ( showFilters && hasAdvancedFilters ) {\n        @if ( showAdvancedFilters ) {\n            <nrcl-button outline \n                label=\"Less Filters\"\n                icon=\"remove\"\n                (click)=\"onHideAdvancedClick()\"\n                compact=\"mobile\"\n            ></nrcl-button>\n        }\n        @else {\n            <nrcl-button outline \n                label=\"More Filters\"\n                icon=\"add\"\n                (click)=\"onShowAdvancedClick()\"\n                compact=\"mobile\"\n            ></nrcl-button>\n        }\n    }\n\n    <!-- <div class=\"spacer\"></div>         -->\n\n    @if ( showClear && showFilters ) {\n        <nrcl-button outline \n            label=\"Clear\"\n            icon=\"clear-filters\"\n            (click)=\"onClearClick()\"\n            compact=\"mobile\"\n        ></nrcl-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 .actions{flex-grow:1;flex-direction:row;justify-content:space-between;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions nrcl-button{--nrcl-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: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-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"] }]
+            args: [{ selector: "nrcl-filters-panel", changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ( showFilters ) {\n    <ng-content></ng-content>\n}\n\n@if ( showFilters && hasAdvancedFilters && showAdvancedFilters ) {\n    <ng-content select=\"[advanced]\"></ng-content>\n}\n\n<div class=\"actions\">\n    <nrcl-device-view>\n        <ng-template mobile-view>\n            @if ( showFilters ) {\n                <nrcl-button outline \n                    label=\"Hide Filters\"\n                    icon=\"expand_less\"\n                    (click)=\"onHideClick()\"\n                    compact=\"mobile\"\n                ></nrcl-button>\n            }\n            @else {\n                <nrcl-button outline \n                    label=\"Show Filters\"\n                    icon=\"expand_more\"\n                    (click)=\"onShowClick()\"\n                    compact=\"mobile\"\n                ></nrcl-button>\n            }\n        </ng-template>\n    </nrcl-device-view>\n\n    @if ( showFilters && hasAdvancedFilters ) {\n        @if ( showAdvancedFilters ) {\n            <nrcl-button outline \n                label=\"Less Filters\"\n                icon=\"remove\"\n                (click)=\"onHideAdvancedClick()\"\n                compact=\"mobile\"\n            ></nrcl-button>\n        }\n        @else {\n            <nrcl-button outline \n                label=\"More Filters\"\n                icon=\"add\"\n                (click)=\"onShowAdvancedClick()\"\n                compact=\"mobile\"\n            ></nrcl-button>\n        }\n    }\n\n    <!-- <div class=\"spacer\"></div>         -->\n\n    @if ( showClear && showFilters ) {\n        <nrcl-button outline \n            label=\"Clear\"\n            icon=\"clear-filters\"\n            (click)=\"onClearClick()\"\n            compact=\"mobile\"\n        ></nrcl-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 .actions{flex-grow:1;flex-direction:row;justify-content:space-between;align-items:flex-end;width:unset;display:flex}:host .actions button{height:40px}:host .actions nrcl-button{--nrcl-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
+            }], hasAdvancedFilters: [{
+                type: Input
+            }], showAdvancedFilters: [{
+                type: Input
             }], clearFilters: [{
                 type: Output
             }], showFiltersChange: [{
                 type: Output
+            }], showAdvancedFiltersChange: [{
+                type: Output
             }] } });
 
 class FormFieldComponent {
@@ -1123,11 +1235,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 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);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"] }]
+            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 mat-card.mat-mdc-card{margin:0;box-shadow:none;border:2px solid #bebebe;padding:0;font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title{padding:var(--nrcl-gutter-space);border-bottom:#f2f2f2 1px solid;background-color:#f2f2f2;gap:var(--nrcl-gutter-space);display:flex;justify-content:space-between;align-items:stretch;margin:0}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title]{flex-direction:column;align-items:flex-start;text-overflow:ellipsis;overflow:hidden;display:flex;flex:1}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2,:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{width:100%;margin:0;padding:0;line-height:normal;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h2{font-size:18px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[title] h3{font-size:14px;font-weight:400}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions]{display:flex;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-title section[actions] button[icon]{border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0;justify-content:center;line-height:20px}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--nrcl-gutter-space);margin:0;gap:var(--nrcl-gutter-space)}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section{display:flex;flex-direction:column}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section .value{font-weight:700;width:100%;overflow-wrap:break-word}:host ::ng-deep mat-card.mat-mdc-card .mat-mdc-card-content section[full-width]{grid-column:span 2}\n"] }]
         }] });
 
 class RowListPaginationComponent {
@@ -1142,6 +1254,7 @@ class RowListPaginationComponent {
         ];
         this.pageSize = 20;
         this.showPageSize = true;
+        this.noRowsMessage = 'No records to display.';
         this.pageSizeChange = new EventEmitter();
         this.pageNumberChange = new EventEmitter();
         this.componentWidth = 'sufficient';
@@ -1198,10 +1311,10 @@ class RowListPaginationComponent {
         return Math.min(this.firstRow + this.pageSize - 1, this.rowCount);
     }
     get hasRows() {
-        return this.rowCount && this.pageSize;
+        return this.rowCount;
     }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: { paginationId: "paginationId", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", pageNumber: "pageNumber", rowCount: "rowCount", showPageSize: "showPageSize", noRowsMessage: "noRowsMessage" }, outputs: { pageSizeChange: "pageSizeChange", pageNumberChange: "pageNumberChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.width-sufficient": "componentWidth == 'sufficient'", "class.width-tight": "componentWidth == 'tight'", "class.width-restrictive": "componentWidth == 'restrictive'" } }, ngImport: i0, template: "@if ( hasRows ) {\n    <nrcl-filter-container class=\"summary\"\n        label=\"Showing Rows\"\n    >\n        <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n    </nrcl-filter-container>\n}\n@else {\n    <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n    <div class=\"pagination\">\n        <pagination-controls \n            [id]=\"paginationId\" \n            [maxSize]=\"paginationMaxSize\"\n            [responsive]=\"false\"\n            [directionLinks]=\"true\"\n            previousLabel=\"\"\n            nextLabel=\"\"\n            [autoHide]=\"false\"\n            (pageChange)=\"onPageNumberChange( $event )\"\n        ></pagination-controls>\n    </div>\n}\n\n@if ( hasRows && showPageSize ) {\n    <nrcl-filter-select class=\"page-size\"\n        label=\"Page Size\"\n        [value]=\"[ pageSize ]\"\n        [options]=\"pageSizeOptions\"\n        (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n        selectMax=\"1\"\n        [clear]=\"false\"\n        [filter]=\"false\"\n        placeholder=\"Select...\"\n    ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"], dependencies: [{ kind: "component", type: i11.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListPaginationComponent, decorators: [{
             type: Component,
@@ -1209,7 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[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"] }]
+                    }, template: "@if ( hasRows ) {\n    <nrcl-filter-container class=\"summary\"\n        label=\"Showing Rows\"\n    >\n        <span>{{ firstRow }} to {{ lastRow }} <small>(of {{ rowCount }})</small></span>\n    </nrcl-filter-container>\n}\n@else {\n    <div class=\"no-rows\">{{ noRowsMessage }}</div>\n}\n\n@if ( hasRows ) {\n    <div class=\"pagination\">\n        <pagination-controls \n            [id]=\"paginationId\" \n            [maxSize]=\"paginationMaxSize\"\n            [responsive]=\"false\"\n            [directionLinks]=\"true\"\n            previousLabel=\"\"\n            nextLabel=\"\"\n            [autoHide]=\"false\"\n            (pageChange)=\"onPageNumberChange( $event )\"\n        ></pagination-controls>\n    </div>\n}\n\n@if ( hasRows && showPageSize ) {\n    <nrcl-filter-select class=\"page-size\"\n        label=\"Page Size\"\n        [value]=\"[ pageSize ]\"\n        [options]=\"pageSizeOptions\"\n        (valueChange)=\"onPageSizeChange( $event[ 0 ] )\"\n        selectMax=\"1\"\n        [clear]=\"false\"\n        [filter]=\"false\"\n        placeholder=\"Select...\"\n    ></nrcl-filter-select>\n}\n", styles: [":host{display:block;font-family:var(--nrcl-font-family);position:relative;min-height:40px}:host .summary{--nrcl-filter-container-width: min-content;position:absolute;top:0;left:0;bottom:0;white-space:nowrap}:host .pagination{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .pagination ::ng-deep .ngx-pagination{text-align:center;padding-inline-start:0;margin:0}:host .pagination ::ng-deep .ngx-pagination li{border-left:#c6c8cb solid 1px;border-top:#c6c8cb solid 1px;border-bottom:#c6c8cb solid 1px;border-right:none;vertical-align:middle;margin:0;height:35px;padding:0}:host .pagination ::ng-deep .ngx-pagination li a{padding:0;line-height:35px;text-decoration:none}:host .pagination ::ng-deep .ngx-pagination li>*>span{padding:0 15px;line-height:35px}:host .pagination ::ng-deep .ngx-pagination li.current{color:#036;font-weight:700;background:#fff;border:2px solid #003366;border-radius:2px}:host .pagination ::ng-deep .ngx-pagination li.disabled span{display:none}:host .pagination ::ng-deep .ngx-pagination li:first-child{border-left:none;border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination li:last-child{border-top:none;border-bottom:none}:host .pagination ::ng-deep .ngx-pagination a:hover,:host .pagination ::ng-deep .ngx-pagination button:hover{color:#131313;background-color:#ffd3a0}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:after,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{font-family:Material Symbols Outlined;vertical-align:middle;display:inline;font-size:25px;margin:0;line-height:40px;padding:0 10px}:host .pagination ::ng-deep .ngx-pagination .pagination-previous a:before,:host .pagination ::ng-deep .ngx-pagination .pagination-previous.disabled:before{content:\"arrow_back\"}:host .pagination ::ng-deep .ngx-pagination .pagination-next a:after,:host .pagination ::ng-deep .ngx-pagination .pagination-next.disabled:after{content:\"arrow_forward\"}:host .page-size{--nrcl-filter-select-width: 140px;position:absolute;top:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;pointer-events:auto}:host.width-restrictive{display:grid;grid-template-columns:1fr 1fr;gap:var(--nrcl-gutter-space)}:host.width-restrictive .summary{--nrcl-filter-container-width: auto;position:static;grid-column:1;grid-row:1}:host.width-restrictive .page-size{--nrcl-filter-select-width: auto;position:static;grid-column:2;grid-row:1}:host.width-restrictive .pagination{position:static;grid-column:1/span 2;grid-row:2}\n"] }]
         }], propDecorators: { paginationId: [{
                 type: Input
             }], pageSizeOptions: [{
@@ -1222,6 +1335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], showPageSize: [{
                 type: Input
+            }], noRowsMessage: [{
+                type: Input
             }], pageSizeChange: [{
                 type: Output
             }], pageNumberChange: [{
@@ -1235,7 +1350,6 @@ class ListAttachmentsComponent extends RowListBase {
     constructor() {
         super(...arguments);
         this.canDelete = true;
-        this.showPagination = false;
         this.DATE_FORMATS = DATE_FORMATS;
         this.columns = ['attachmentTypeCode', 'fileName', 'sourceObjectNameCode', 'uploadedBy', 'uploadedTimestamp', 'description', 'download'];
     }
@@ -1282,17 +1396,15 @@ class ListAttachmentsComponent extends RowListBase {
         return this.rowListProvider.deleteItem(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination" }, usesInheritance: true, ngImport: i0, template: "<nrcl-desktop-view>\n    <nrcl-row-list-desktop>\n        <table mat-table\n            [dataSource]=\"rows | paginate: { \n                id: 'desktop-attachments', \n                itemsPerPage: showPagination ? pageSize : totalRowCount, \n                currentPage: showPagination ? pageNumber : 1, \n                totalItems: totalRowCount \n            }\"\n        >\n            <ng-container matColumnDef=\"make\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Make</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.make }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"attachmentTypeCode\">\n                <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"fileName\">\n                <th mat-header-cell *matHeaderCellDef>File Name</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"sourceObjectNameCode\">\n                <th mat-header-cell *matHeaderCellDef>File Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"uploadedBy\">\n                <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"uploadedTimestamp\">\n                <th mat-header-cell *matHeaderCellDef>Uploaded At</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef>Description</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"download\">\n                <th mat-header-cell *matHeaderCellDef></th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <div class=\"button-container\">\n                        <nrcl-button compact\n                            label=\"Download\"\n                            icon=\"download\"\n                            (click)=\"onDownloadClick( item )\"                        \n                        ></nrcl-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"delete\">\n                <th mat-header-cell *matHeaderCellDef></th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <div class=\"button-container\">\n                        <nrcl-button compact\n                            label=\"Delete\"\n                            icon=\"delete\"\n                            (click)=\"onDeleteClick( item )\"\n                        ></nrcl-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n        </table>\n    </nrcl-row-list-desktop>\n\n    @if ( showPagination ) {\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    }\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n    <nrcl-row-list-mobile>\n        @for ( item of rows | paginate: { \n            id: 'mobile-attachments', \n            itemsPerPage: showPagination ? pageSize : totalRowCount, \n            currentPage: showPagination ? pageNumber : 1, \n            totalItems: totalRowCount \n        }; track item.attachmentId ) {\n            <mat-card>\n                <mat-card-title>\n                    <section title>\n                        <h2>{{ item.fileName }}</h2>\n                    </section>\n\n                    <section actions>\n                        <nrcl-button compact\n                            label=\"Download\"\n                            icon=\"download\"\n                            (click)=\"onDownloadClick( item )\"                        \n                        ></nrcl-button>\n\n                        @if ( canDelete ) {\n                            <nrcl-button compact\n                                label=\"Delete\"\n                                icon=\"delete\"\n                                (click)=\"onDeleteClick( item )\"\n                            ></nrcl-button>\n                        }\n                    </section>\n                </mat-card-title>\n\n                <mat-card-content>\n                    <section>\n                        <mat-label>Attachment Type</mat-label>\n                        <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>File Type</mat-label>\n                        <div class=\"value\">{{ item.fileExtension }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Uploaded By</mat-label>\n                        <div class=\"value\">{{ item.uploadedBy }}</div>\n                    </section>                                            \n\n                    <section>\n                        <mat-label>Uploaded At</mat-label>\n                        <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n                    </section>                                            \n\n                    <section full-width>\n                        <mat-label>Description</mat-label>\n                        <div class=\"value\">{{ item.attachmentDescription }}</div>\n                    </section>                                            \n                </mat-card-content>\n            </mat-card>\n        }\n    </nrcl-row-list-mobile>\n\n    @if ( showPagination ) {\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    }\n</nrcl-mobile-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "disabled"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: DesktopViewComponent, selector: "nrcl-desktop-view" }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: MobileViewComponent, selector: "nrcl-mobile-view" }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "pipe", type: i1$2.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListAttachmentsComponent, selector: "nrcl-list-attachments", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        <nrcl-row-list-desktop>\n            @if ( rows?.length > 0 ) {\n                <table mat-table\n                    [dataSource]=\"rows | paginate: { \n                        id: 'desktop-attachments', \n                        itemsPerPage: showPagination ? pageSize : totalRowCount, \n                        currentPage: showPagination ? pageNumber : 1, \n                        totalItems: totalRowCount \n                    }\"\n                >\n                    <ng-container matColumnDef=\"attachmentTypeCode\">\n                        <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"fileName\">\n                        <th mat-header-cell *matHeaderCellDef>File Name</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"sourceObjectNameCode\">\n                        <th mat-header-cell *matHeaderCellDef>File Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedBy\">\n                        <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedTimestamp\">\n                        <th mat-header-cell *matHeaderCellDef>Uploaded At</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"description\">\n                        <th mat-header-cell *matHeaderCellDef>Description</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"download\">\n                        <th mat-header-cell *matHeaderCellDef></th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <div class=\"button-container\">\n                                <nrcl-button compact\n                                    label=\"Download\"\n                                    icon=\"download\"\n                                    (click)=\"onDownloadClick( item )\"                        \n                                ></nrcl-button>\n                            </div>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"delete\">\n                        <th mat-header-cell *matHeaderCellDef></th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <div class=\"button-container\">\n                                <nrcl-button compact\n                                    label=\"Delete\"\n                                    icon=\"delete\"\n                                    (click)=\"onDeleteClick( item )\"\n                                ></nrcl-button>\n                            </div>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n                    <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n\n                    <tr class=\"mat-row\" *matNoDataRow>\n                        <td class=\"mat-cell\" colspan=\"8\">No records to display.</td>\n                    </tr>                \n                </table>\n            }\n        </nrcl-row-list-desktop>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        <nrcl-row-list-mobile>\n            @for ( item of rows | paginate: { \n                id: 'mobile-attachments', \n                itemsPerPage: showPagination ? pageSize : totalRowCount, \n                currentPage: showPagination ? pageNumber : 1, \n                totalItems: totalRowCount \n            }; track item.attachmentId ) {\n                <mat-card>\n                    <mat-card-title>\n                        <section title>\n                            <h2>{{ item.fileName }}</h2>\n                        </section>\n\n                        <section actions>\n                            <nrcl-button compact\n                                label=\"Download\"\n                                icon=\"download\"\n                                (click)=\"onDownloadClick( item )\"                        \n                            ></nrcl-button>\n\n                            @if ( canDelete ) {\n                                <nrcl-button compact\n                                    label=\"Delete\"\n                                    icon=\"delete\"\n                                    (click)=\"onDeleteClick( item )\"\n                                ></nrcl-button>\n                            }\n                        </section>\n                    </mat-card-title>\n\n                    <mat-card-content>\n                        <section>\n                            <mat-label>Attachment Type</mat-label>\n                            <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>File Type</mat-label>\n                            <div class=\"value\">{{ item.fileExtension }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Uploaded By</mat-label>\n                            <div class=\"value\">{{ item.uploadedBy }}</div>\n                        </section>                                            \n\n                        <section>\n                            <mat-label>Uploaded At</mat-label>\n                            <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n                        </section>                                            \n\n                        <section full-width>\n                            <mat-label>Description</mat-label>\n                            <div class=\"value\">{{ item.attachmentDescription }}</div>\n                        </section>                                            \n                    </mat-card-content>\n                </mat-card>\n            }\n        </nrcl-row-list-mobile>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$5.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "primary", "outline", "disabled"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-desktop-view>\n    <nrcl-row-list-desktop>\n        <table mat-table\n            [dataSource]=\"rows | paginate: { \n                id: 'desktop-attachments', \n                itemsPerPage: showPagination ? pageSize : totalRowCount, \n                currentPage: showPagination ? pageNumber : 1, \n                totalItems: totalRowCount \n            }\"\n        >\n            <ng-container matColumnDef=\"make\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Make</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.make }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"attachmentTypeCode\">\n                <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"fileName\">\n                <th mat-header-cell *matHeaderCellDef>File Name</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"sourceObjectNameCode\">\n                <th mat-header-cell *matHeaderCellDef>File Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"uploadedBy\">\n                <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"uploadedTimestamp\">\n                <th mat-header-cell *matHeaderCellDef>Uploaded At</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef>Description</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"download\">\n                <th mat-header-cell *matHeaderCellDef></th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <div class=\"button-container\">\n                        <nrcl-button compact\n                            label=\"Download\"\n                            icon=\"download\"\n                            (click)=\"onDownloadClick( item )\"                        \n                        ></nrcl-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"delete\">\n                <th mat-header-cell *matHeaderCellDef></th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <div class=\"button-container\">\n                        <nrcl-button compact\n                            label=\"Delete\"\n                            icon=\"delete\"\n                            (click)=\"onDeleteClick( item )\"\n                        ></nrcl-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n        </table>\n    </nrcl-row-list-desktop>\n\n    @if ( showPagination ) {\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    }\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n    <nrcl-row-list-mobile>\n        @for ( item of rows | paginate: { \n            id: 'mobile-attachments', \n            itemsPerPage: showPagination ? pageSize : totalRowCount, \n            currentPage: showPagination ? pageNumber : 1, \n            totalItems: totalRowCount \n        }; track item.attachmentId ) {\n            <mat-card>\n                <mat-card-title>\n                    <section title>\n                        <h2>{{ item.fileName }}</h2>\n                    </section>\n\n                    <section actions>\n                        <nrcl-button compact\n                            label=\"Download\"\n                            icon=\"download\"\n                            (click)=\"onDownloadClick( item )\"                        \n                        ></nrcl-button>\n\n                        @if ( canDelete ) {\n                            <nrcl-button compact\n                                label=\"Delete\"\n                                icon=\"delete\"\n                                (click)=\"onDeleteClick( item )\"\n                            ></nrcl-button>\n                        }\n                    </section>\n                </mat-card-title>\n\n                <mat-card-content>\n                    <section>\n                        <mat-label>Attachment Type</mat-label>\n                        <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>File Type</mat-label>\n                        <div class=\"value\">{{ item.fileExtension }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Uploaded By</mat-label>\n                        <div class=\"value\">{{ item.uploadedBy }}</div>\n                    </section>                                            \n\n                    <section>\n                        <mat-label>Uploaded At</mat-label>\n                        <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n                    </section>                                            \n\n                    <section full-width>\n                        <mat-label>Description</mat-label>\n                        <div class=\"value\">{{ item.attachmentDescription }}</div>\n                    </section>                                            \n                </mat-card-content>\n            </mat-card>\n        }\n    </nrcl-row-list-mobile>\n\n    @if ( showPagination ) {\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    }\n</nrcl-mobile-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        <nrcl-row-list-desktop>\n            @if ( rows?.length > 0 ) {\n                <table mat-table\n                    [dataSource]=\"rows | paginate: { \n                        id: 'desktop-attachments', \n                        itemsPerPage: showPagination ? pageSize : totalRowCount, \n                        currentPage: showPagination ? pageNumber : 1, \n                        totalItems: totalRowCount \n                    }\"\n                >\n                    <ng-container matColumnDef=\"attachmentTypeCode\">\n                        <th mat-header-cell *matHeaderCellDef>Attachment Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"fileName\">\n                        <th mat-header-cell *matHeaderCellDef>File Name</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.fileName }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"sourceObjectNameCode\">\n                        <th mat-header-cell *matHeaderCellDef>File Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.fileExtension }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedBy\">\n                        <th mat-header-cell *matHeaderCellDef>Uploaded By</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.uploadedBy }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedTimestamp\">\n                        <th mat-header-cell *matHeaderCellDef>Uploaded At</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.uploadedTimestamp }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"description\">\n                        <th mat-header-cell *matHeaderCellDef>Description</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.attachmentDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"download\">\n                        <th mat-header-cell *matHeaderCellDef></th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <div class=\"button-container\">\n                                <nrcl-button compact\n                                    label=\"Download\"\n                                    icon=\"download\"\n                                    (click)=\"onDownloadClick( item )\"                        \n                                ></nrcl-button>\n                            </div>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"delete\">\n                        <th mat-header-cell *matHeaderCellDef></th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <div class=\"button-container\">\n                                <nrcl-button compact\n                                    label=\"Delete\"\n                                    icon=\"delete\"\n                                    (click)=\"onDeleteClick( item )\"\n                                ></nrcl-button>\n                            </div>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n                    <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n\n                    <tr class=\"mat-row\" *matNoDataRow>\n                        <td class=\"mat-cell\" colspan=\"8\">No records to display.</td>\n                    </tr>                \n                </table>\n            }\n        </nrcl-row-list-desktop>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        <nrcl-row-list-mobile>\n            @for ( item of rows | paginate: { \n                id: 'mobile-attachments', \n                itemsPerPage: showPagination ? pageSize : totalRowCount, \n                currentPage: showPagination ? pageNumber : 1, \n                totalItems: totalRowCount \n            }; track item.attachmentId ) {\n                <mat-card>\n                    <mat-card-title>\n                        <section title>\n                            <h2>{{ item.fileName }}</h2>\n                        </section>\n\n                        <section actions>\n                            <nrcl-button compact\n                                label=\"Download\"\n                                icon=\"download\"\n                                (click)=\"onDownloadClick( item )\"                        \n                            ></nrcl-button>\n\n                            @if ( canDelete ) {\n                                <nrcl-button compact\n                                    label=\"Delete\"\n                                    icon=\"delete\"\n                                    (click)=\"onDeleteClick( item )\"\n                                ></nrcl-button>\n                            }\n                        </section>\n                    </mat-card-title>\n\n                    <mat-card-content>\n                        <section>\n                            <mat-label>Attachment Type</mat-label>\n                            <div class=\"value\">{{ item.attachmentTypeDescription }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>File Type</mat-label>\n                            <div class=\"value\">{{ item.fileExtension }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Uploaded By</mat-label>\n                            <div class=\"value\">{{ item.uploadedBy }}</div>\n                        </section>                                            \n\n                        <section>\n                            <mat-label>Uploaded At</mat-label>\n                            <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n                        </section>                                            \n\n                        <section full-width>\n                            <mat-label>Description</mat-label>\n                            <div class=\"value\">{{ item.attachmentDescription }}</div>\n                        </section>                                            \n                    </mat-card-content>\n                </mat-card>\n            }\n        </nrcl-row-list-mobile>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-attachments\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{min-width:100px}:host .mat-mdc-table .mat-column-orgUnit{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-fileName{min-width:100px;max-width:200px}:host .mat-mdc-table .mat-column-sourceObjectNameCode{min-width:60px;max-width:60px}:host .mat-mdc-table .mat-column-uploadedBy{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-uploadedTimestamp{min-width:140px;max-width:140px}:host .mat-mdc-table .mat-column-description{width:100%;min-width:200px;max-width:100px;white-space:normal}:host .mat-mdc-table .mat-column-download .button-container,:host .mat-mdc-table .mat-column-delete .button-container{display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { rowListProvider: [{
                 type: Input
             }], canDelete: [{
                 type: Input
-            }], showPagination: [{
-                type: Input
             }] } });
 
 class ListEventHistoryComponent extends RowListBase {
@@ -1330,11 +1442,11 @@ class ListEventHistoryComponent extends RowListBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListEventHistoryComponent, selector: "nrcl-list-event-history", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination", isSupplier: "isSupplier" }, usesInheritance: true, ngImport: i0, template: "<nrcl-desktop-view>\n    <nrcl-row-list-desktop>\n        <table mat-table\n            [dataSource]=\"rows | paginate: { \n                id: 'desktop-event-history', \n                itemsPerPage: pageSize, \n                currentPage: pageNumber, \n                totalItems: totalRowCount \n            }\"\n            matSort \n            [matSortActive]=\"sortActive\"\n            [matSortDirection]=\"sortDirection\"\n            (matSortChange)=\"onSortChange( $event )\">\n        >\n            <ng-container matColumnDef=\"dateTime\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"changedBy\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"type\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"section\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"comment\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n        </table>\n    </nrcl-row-list-desktop>\n\n    <nrcl-gap vertical/>\n\n    <nrcl-row-list-pagination\n        paginationId=\"desktop-event-history\"\n        [pageSize]=\"pageSize\"\n        [pageNumber]=\"pageNumber\"\n        [rowCount]=\"totalRowCount\"\n        (pageNumberChange)=\"onPageNumberChange( $event )\"\n        (pageSizeChange)=\"onPageSizeChange( $event )\"\n    ></nrcl-row-list-pagination>\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n    <nrcl-row-list-mobile>\n        @for ( item of rows | paginate: { \n            id: 'mobile-event-history', \n            itemsPerPage: pageSize, \n            currentPage: pageNumber, \n            totalItems: totalRowCount \n        }; track item.attachmentId ) {\n            <mat-card>\n                <mat-card-title>\n                    <section title>\n                        <h2>{{ item.comment }}</h2>\n                    </section>\n                </mat-card-title>\n\n                <mat-card-content>\n                    <section>\n                        <mat-label>User ID</mat-label>\n                        <div class=\"value\">{{ item.createdByUserId }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Time</mat-label>\n                        <div class=\"value\">{{ item.eventTimestamp }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Type</mat-label>\n                        <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Section</mat-label>\n                        <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n                    </section>                                            \n\n                    <!-- <section full-width>\n                        <mat-label>Comment</mat-label>\n                        <div class=\"value\">{{ item.comment }}</div>\n                    </section>                                             -->\n                </mat-card-content>\n            </mat-card>\n        }\n    </nrcl-row-list-mobile>\n\n    <nrcl-gap vertical/>\n\n    <nrcl-row-list-pagination\n        paginationId=\"mobile-event-history\"\n        [pageSize]=\"pageSize\"\n        [pageNumber]=\"pageNumber\"\n        [rowCount]=\"totalRowCount\"\n        (pageNumberChange)=\"onPageNumberChange( $event )\"\n        (pageSizeChange)=\"onPageSizeChange( $event )\"\n    ></nrcl-row-list-pagination>\n</nrcl-mobile-view>\n\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"], dependencies: [{ kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: DesktopViewComponent, selector: "nrcl-desktop-view" }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: MobileViewComponent, selector: "nrcl-mobile-view" }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "pipe", type: i1$2.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListEventHistoryComponent, selector: "nrcl-list-event-history", inputs: { rowListProvider: "rowListProvider", canDelete: "canDelete", showPagination: "showPagination", isSupplier: "isSupplier" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        <nrcl-row-list-desktop>\n            @if ( rows?.length > 0 ) {\n                <table mat-table\n                    [dataSource]=\"rows | paginate: { \n                        id: 'desktop-event-history', \n                        itemsPerPage: pageSize, \n                        currentPage: pageNumber, \n                        totalItems: totalRowCount \n                    }\"\n                    matSort \n                    [matSortActive]=\"sortActive\"\n                    [matSortDirection]=\"sortDirection\"\n                    (matSortChange)=\"onSortChange( $event )\">\n                >\n                    <ng-container matColumnDef=\"dateTime\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"changedBy\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"type\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"section\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"comment\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n                    <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n                </table>\n            }\n        </nrcl-row-list-desktop>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-event-history\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        <nrcl-row-list-mobile>\n            @for ( item of rows | paginate: { \n                id: 'mobile-event-history', \n                itemsPerPage: pageSize, \n                currentPage: pageNumber, \n                totalItems: totalRowCount \n            }; track item.attachmentId ) {\n                <mat-card>\n                    <mat-card-title>\n                        <section title>\n                            <h2>{{ item.comment }}</h2>\n                        </section>\n                    </mat-card-title>\n\n                    <mat-card-content>\n                        <section>\n                            <mat-label>User ID</mat-label>\n                            <div class=\"value\">{{ item.createdByUserId }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Time</mat-label>\n                            <div class=\"value\">{{ item.eventTimestamp }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Type</mat-label>\n                            <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Section</mat-label>\n                            <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n                        </section>                                            \n\n                        <!-- <section full-width>\n                            <mat-label>Comment</mat-label>\n                            <div class=\"value\">{{ item.comment }}</div>\n                        </section>                                             -->\n                    </mat-card-content>\n                </mat-card>\n            }\n        </nrcl-row-list-mobile>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-event-history\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"], dependencies: [{ kind: "component", type: i1$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$5.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop" }, { kind: "component", type: RowListMobileComponent, selector: "nrcl-row-list-mobile" }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "directive", type: DesktopViewDirective, selector: "[desktop-view]" }, { kind: "directive", type: MobileViewDirective, selector: "[mobile-view]" }, { kind: "component", type: DeviceViewComponent, selector: "nrcl-device-view" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-desktop-view>\n    <nrcl-row-list-desktop>\n        <table mat-table\n            [dataSource]=\"rows | paginate: { \n                id: 'desktop-event-history', \n                itemsPerPage: pageSize, \n                currentPage: pageNumber, \n                totalItems: totalRowCount \n            }\"\n            matSort \n            [matSortActive]=\"sortActive\"\n            [matSortDirection]=\"sortDirection\"\n            (matSortChange)=\"onSortChange( $event )\">\n        >\n            <ng-container matColumnDef=\"dateTime\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"changedBy\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"type\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"section\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"comment\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n                <td mat-cell *matCellDef=\"let item\">\n                    <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n        </table>\n    </nrcl-row-list-desktop>\n\n    <nrcl-gap vertical/>\n\n    <nrcl-row-list-pagination\n        paginationId=\"desktop-event-history\"\n        [pageSize]=\"pageSize\"\n        [pageNumber]=\"pageNumber\"\n        [rowCount]=\"totalRowCount\"\n        (pageNumberChange)=\"onPageNumberChange( $event )\"\n        (pageSizeChange)=\"onPageSizeChange( $event )\"\n    ></nrcl-row-list-pagination>\n</nrcl-desktop-view>\n\n<nrcl-mobile-view>\n    <nrcl-row-list-mobile>\n        @for ( item of rows | paginate: { \n            id: 'mobile-event-history', \n            itemsPerPage: pageSize, \n            currentPage: pageNumber, \n            totalItems: totalRowCount \n        }; track item.attachmentId ) {\n            <mat-card>\n                <mat-card-title>\n                    <section title>\n                        <h2>{{ item.comment }}</h2>\n                    </section>\n                </mat-card-title>\n\n                <mat-card-content>\n                    <section>\n                        <mat-label>User ID</mat-label>\n                        <div class=\"value\">{{ item.createdByUserId }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Time</mat-label>\n                        <div class=\"value\">{{ item.eventTimestamp }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Type</mat-label>\n                        <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n                    </section>\n\n                    <section>\n                        <mat-label>Section</mat-label>\n                        <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n                    </section>                                            \n\n                    <!-- <section full-width>\n                        <mat-label>Comment</mat-label>\n                        <div class=\"value\">{{ item.comment }}</div>\n                    </section>                                             -->\n                </mat-card-content>\n            </mat-card>\n        }\n    </nrcl-row-list-mobile>\n\n    <nrcl-gap vertical/>\n\n    <nrcl-row-list-pagination\n        paginationId=\"mobile-event-history\"\n        [pageSize]=\"pageSize\"\n        [pageNumber]=\"pageNumber\"\n        [rowCount]=\"totalRowCount\"\n        (pageNumberChange)=\"onPageNumberChange( $event )\"\n        (pageSizeChange)=\"onPageSizeChange( $event )\"\n    ></nrcl-row-list-pagination>\n</nrcl-mobile-view>\n\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"] }]
+            args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        <nrcl-row-list-desktop>\n            @if ( rows?.length > 0 ) {\n                <table mat-table\n                    [dataSource]=\"rows | paginate: { \n                        id: 'desktop-event-history', \n                        itemsPerPage: pageSize, \n                        currentPage: pageNumber, \n                        totalItems: totalRowCount \n                    }\"\n                    matSort \n                    [matSortActive]=\"sortActive\"\n                    [matSortDirection]=\"sortDirection\"\n                    (matSortChange)=\"onSortChange( $event )\">\n                >\n                    <ng-container matColumnDef=\"dateTime\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"changedBy\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>User ID</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"type\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"section\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Section</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"comment\">\n                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Comment</th>\n                        <td mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.comment }}</nrcl-cell-content>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\n                    <tr mat-row *matRowDef=\"let item; columns: columns;\"></tr>\n                </table>\n            }\n        </nrcl-row-list-desktop>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"desktop-event-history\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        <nrcl-row-list-mobile>\n            @for ( item of rows | paginate: { \n                id: 'mobile-event-history', \n                itemsPerPage: pageSize, \n                currentPage: pageNumber, \n                totalItems: totalRowCount \n            }; track item.attachmentId ) {\n                <mat-card>\n                    <mat-card-title>\n                        <section title>\n                            <h2>{{ item.comment }}</h2>\n                        </section>\n                    </mat-card-title>\n\n                    <mat-card-content>\n                        <section>\n                            <mat-label>User ID</mat-label>\n                            <div class=\"value\">{{ item.createdByUserId }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Time</mat-label>\n                            <div class=\"value\">{{ item.eventTimestamp }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Type</mat-label>\n                            <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n                        </section>\n\n                        <section>\n                            <mat-label>Section</mat-label>\n                            <div class=\"value\">{{ item.sourceObjectNameDescription }}</div>\n                        </section>                                            \n\n                        <!-- <section full-width>\n                            <mat-label>Comment</mat-label>\n                            <div class=\"value\">{{ item.comment }}</div>\n                        </section>                                             -->\n                    </mat-card-content>\n                </mat-card>\n            }\n        </nrcl-row-list-mobile>\n\n        <nrcl-gap vertical/>\n\n        <nrcl-row-list-pagination\n            paginationId=\"mobile-event-history\"\n            [pageSize]=\"pageSize\"\n            [pageNumber]=\"pageNumber\"\n            [rowCount]=\"totalRowCount\"\n            (pageNumberChange)=\"onPageNumberChange( $event )\"\n            (pageSizeChange)=\"onPageSizeChange( $event )\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-dateTime{min-width:150px;max-width:150px}:host .mat-mdc-table .mat-column-changedBy{min-width:120px;max-width:unset}:host .mat-mdc-table .mat-column-type{min-width:80px;max-width:80px}:host .mat-mdc-table .mat-column-section{min-width:150px;max-width:unset}:host .mat-mdc-table .mat-column-comment{width:100%;min-width:200px;max-width:100px;white-space:normal}\n"] }]
         }], propDecorators: { rowListProvider: [{
                 type: Input
             }], canDelete: [{
@@ -1359,13 +1471,13 @@ class PageHeaderComponent {
         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 }); }
+    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 .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"] }]
+                    }, 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 .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
             }] } });
@@ -1417,7 +1529,7 @@ class RowListSortingComponent {
         });
     }
     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"] }] }); }
+    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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: FilterContainerComponent, selector: "nrcl-filter-container", inputs: ["label", "hint"] }, { kind: "component", type: FilterSelectComponent, selector: "nrcl-filter-select", inputs: ["label", "placeholder", "hint", "options", "value", "selectMax", "tooltips", "summary", "clear", "filter"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListSortingComponent, decorators: [{
             type: Component,
@@ -1440,15 +1552,15 @@ class SnackbarComponent {
     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$4.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarComponent, deps: [{ token: i1$6.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            <nrcl-icon>check_circle</nrcl-icon>\n        }\n        @case ( 'error' ) {\n            <nrcl-icon>cancel</nrcl-icon>\n        }\n        @case ( 'info' ) {\n            <nrcl-icon>info</nrcl-icon>\n        }\n        @case ( 'update' ) {\n            <nrcl-icon>error</nrcl-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.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 nrcl-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: IconComponent, selector: "nrcl-icon" }] }); }
 }
 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$4.MatSnackBarRef }, { type: undefined, decorators: [{
+                    }, template: "<div class=\"icon\">\n    @switch ( config.type ) {\n        @case ( 'success' ) {\n            <nrcl-icon>check_circle</nrcl-icon>\n        }\n        @case ( 'error' ) {\n            <nrcl-icon>cancel</nrcl-icon>\n        }\n        @case ( 'info' ) {\n            <nrcl-icon>info</nrcl-icon>\n        }\n        @case ( 'update' ) {\n            <nrcl-icon>error</nrcl-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.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 nrcl-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$6.MatSnackBarRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
                 }] }] });
@@ -1542,10 +1654,14 @@ class CodeTable {
 }
 
 class NrNgxComponentLibModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    constructor(matIconRegistry, domSanitizer) {
+        this.matIconRegistry = matIconRegistry;
+        this.domSanitizer = domSanitizer;
+        this.matIconRegistry.addSvgIcon("filter-cancel", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/app-icons/filter-cancel.svg"));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, deps: [{ token: i1.MatIconRegistry }, { token: i2$4.DomSanitizer }], 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,
@@ -1559,14 +1675,17 @@ class NrNgxComponentLibModule {
             GapComponent,
             ListAttachmentsComponent,
             ListEventHistoryComponent,
-            MobileViewComponent,
             PageContainerComponent,
             PageHeaderComponent,
             RowListDesktopComponent,
             RowListMobileComponent,
             RowListPaginationComponent,
             RowListSortingComponent,
-            SnackbarComponent], imports: [BrowserAnimationsModule,
+            SnackbarComponent,
+            DesktopViewDirective,
+            MobileViewDirective,
+            DeviceViewComponent,
+            IconComponent], imports: [BrowserAnimationsModule,
             CommonModule,
             FormsModule,
             MatButtonModule,
@@ -1590,7 +1709,6 @@ class NrNgxComponentLibModule {
             OwlMomentDateTimeModule,
             NgxPaginationModule], exports: [ButtonComponent,
             CellContentComponent,
-            DesktopViewComponent,
             ExpansionPanelComponent,
             ExpansionPanelHeaderComponent,
             ExpansionPanelFooterComponent,
@@ -1604,14 +1722,17 @@ class NrNgxComponentLibModule {
             GapComponent,
             ListAttachmentsComponent,
             ListEventHistoryComponent,
-            MobileViewComponent,
             PageContainerComponent,
             PageHeaderComponent,
             RowListDesktopComponent,
             RowListMobileComponent,
             RowListPaginationComponent,
             RowListSortingComponent,
-            SnackbarComponent] }); }
+            SnackbarComponent,
+            DesktopViewDirective,
+            MobileViewDirective,
+            DeviceViewComponent,
+            IconComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, providers: [
             SnackbarUtilService,
             ConfigurationService,
@@ -1672,7 +1793,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     declarations: [
                         ButtonComponent,
                         CellContentComponent,
-                        DesktopViewComponent,
                         ExpansionPanelComponent,
                         ExpansionPanelHeaderComponent,
                         ExpansionPanelFooterComponent,
@@ -1686,7 +1806,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         GapComponent,
                         ListAttachmentsComponent,
                         ListEventHistoryComponent,
-                        MobileViewComponent,
                         PageContainerComponent,
                         PageHeaderComponent,
                         RowListDesktopComponent,
@@ -1694,11 +1813,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         RowListPaginationComponent,
                         RowListSortingComponent,
                         SnackbarComponent,
+                        DesktopViewDirective,
+                        MobileViewDirective,
+                        DeviceViewComponent,
+                        IconComponent
                     ],
                     exports: [
                         ButtonComponent,
                         CellContentComponent,
-                        DesktopViewComponent,
                         ExpansionPanelComponent,
                         ExpansionPanelHeaderComponent,
                         ExpansionPanelFooterComponent,
@@ -1712,7 +1834,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         GapComponent,
                         ListAttachmentsComponent,
                         ListEventHistoryComponent,
-                        MobileViewComponent,
                         PageContainerComponent,
                         PageHeaderComponent,
                         RowListDesktopComponent,
@@ -1720,6 +1841,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         RowListPaginationComponent,
                         RowListSortingComponent,
                         SnackbarComponent,
+                        DesktopViewDirective,
+                        MobileViewDirective,
+                        DeviceViewComponent,
+                        IconComponent
                     ],
                     providers: [
                         SnackbarUtilService,
@@ -1728,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         { provide: OWL_DATE_TIME_FORMATS, useValue: DATE_FORMATS },
                     ]
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2$4.DomSanitizer }] });
 
 /*
  * Public API Surface of wfcc-application-ui
@@ -1738,5 +1863,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewComponent, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
+export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, ListAttachmentsComponent, ListEventHistoryComponent, MobileViewDirective, NrNgxComponentLibModule, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, makeSummary, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
 //# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map