@bcgov/nr-ngx-component-lib 0.0.63 → 0.0.65

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

@@ -1255,19 +1255,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class PageStateService {
     constructor() {
-        this.classRegistry = new WeakMap();
+        this._pageState = {};
     }
-    getPageState(classConstructor, defaultState, label) {
-        if (this.classRegistry.has(classConstructor)) {
-            let sc = this.classRegistry.get(classConstructor);
-            return sc.state;
-        }
-        // this.setPageState( classConstructor, defaultState, label )
-        return defaultState();
+    getPageState(id) {
+        if (id in this._pageState)
+            return this._pageState[id];
+    }
+    setPageState(id, state) {
+        this._pageState[id] = state;
     }
-    setPageState(classConstructor, state, label) {
-        let sc = { label, state };
-        this.classRegistry.set(classConstructor, sc);
+    deletePageState(id) {
+        delete this._pageState[id];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageStateService, providedIn: "root" }); }
@@ -1277,7 +1275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{
                     providedIn: "root"
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class Aborted {
     constructor(reason) {
@@ -1372,9 +1370,19 @@ class PaginationBase extends NrclBase {
     set filter(f) {
         this._filter = this.clone(f);
     }
+    get instance() {
+        return this._instance;
+    }
     ngAfterViewInit() {
         // console.log('PaginationBase.ngAfterViewInit')
-        this.loadPageState();
+        this.onInitPageState();
+    }
+    onInitPageState() {
+        let init = this.getInitialPageState();
+        this._instance = init.instance;
+        let saved = this.retrieveState();
+        this.setCurrentPageState(saved || init);
+        this.onPageStateChanged();
     }
     clone(obj) {
         return JSON.parse(JSON.stringify(obj));
@@ -1384,30 +1392,34 @@ class PaginationBase extends NrclBase {
         this.onPageNumberChange(1);
     }
     onSortChange(ev) {
+        if (this._pageConfig.sortActive == ev.active)
+            if (this._pageConfig.sortDirection == ev.direction)
+                return;
         this._pageConfig.sortActive = ev.active;
         this._pageConfig.sortDirection = ev.direction;
         this.onPageNumberChange(1);
     }
     onPageSizeChange(ev) {
+        if (this._pageConfig.pageSize == ev)
+            return;
         this._pageConfig.pageSize = ev;
         this.onPageNumberChange(1);
     }
     onPageNumberChange(ev) {
+        if (this._pageConfig.pageNumber == ev)
+            return;
         this._pageConfig.pageNumber = ev;
+        this.onPageStateChanged();
     }
-    get initialPageState() {
-        return this.getInitialPageState();
-    }
-    loadPageState() {
-        let state = this.pageStateService.getPageState(this.constructor, () => this.initialPageState);
-        this.filter = state.filter;
-        this._pageConfig.pageSize = state.pageConfig.pageSize;
-        this._pageConfig.pageNumber = state.pageConfig.pageNumber;
-        this._pageConfig.sortActive = state.pageConfig.sortActive;
-        this._pageConfig.sortDirection = state.pageConfig.sortDirection;
+    onPageStateChanged() {
+        return this.refresh()
+            .then(() => {
+            let state = this.getCurrentPageState();
+            this.persistState(state);
+        });
     }
-    savePageState() {
-        let state = this.clone({
+    getCurrentPageState() {
+        return {
             filter: this.filter,
             pageConfig: {
                 pageSize: this._pageConfig.pageSize,
@@ -1415,8 +1427,27 @@ class PaginationBase extends NrclBase {
                 sortActive: this._pageConfig.sortActive,
                 sortDirection: this._pageConfig.sortDirection,
             }
-        });
-        this.pageStateService.setPageState(this.constructor, state);
+        };
+    }
+    setCurrentPageState(state) {
+        this.filter = state.filter;
+        this._pageConfig.pageSize = state.pageConfig.pageSize;
+        this._pageConfig.pageNumber = state.pageConfig.pageNumber;
+        this._pageConfig.sortActive = state.pageConfig.sortActive;
+        this._pageConfig.sortDirection = state.pageConfig.sortDirection;
+    }
+    persistState(state) {
+        if (!this._instance)
+            return;
+        this.pageStateService.setPageState(this._instance, JSON.stringify(state));
+    }
+    retrieveState() {
+        if (!this._instance)
+            return;
+        let state = this.pageStateService.getPageState(this._instance);
+        if (!state)
+            return;
+        return JSON.parse(state);
     }
     paginateState(id) {
         return {
@@ -1460,11 +1491,6 @@ class RowListBase extends PaginationBase {
         this.isLoadingChange.emit(v);
     }
     get rows() { return this._rows; }
-    ngAfterViewInit() {
-        // console.log('RowListBase.ngAfterViewInit')
-        super.ngAfterViewInit();
-        this.refreshRowList();
-    }
     refreshRowList() {
         // console.warn('RowListBase.refreshRowList')
         this.isLoading = true;
@@ -1477,25 +1503,22 @@ class RowListBase extends PaginationBase {
             return this.loadRowList();
         })
             .then((res) => {
+            inProgress.progress();
             if (!res)
                 return;
-            if (inProgress.isCancelled)
-                return;
             return this.parseRowList(res);
         })
             .then(res => {
-            if (inProgress.isCancelled)
-                return;
+            inProgress.progress();
             return this.completedRowListPage();
         })
             .catch((err) => {
+            // console.warn(err)
             if (err instanceof Aborted)
                 return;
             this.loadRowListPageFailed(err);
         })
             .finally(() => {
-            if (inProgress.isCancelled)
-                return;
             inProgress.complete();
             this.isLoading = false;
             this.changeDetectorRef.detectChanges();
@@ -1527,12 +1550,8 @@ class RowListBase extends PaginationBase {
         this._rows = [];
         this._totalRowCount = 0;
     }
-    onPageNumberChange(ev) {
-        super.onPageNumberChange(ev);
-        this.refreshRowList()
-            .then(() => {
-            this.savePageState();
-        });
+    refresh() {
+        return this.refreshRowList();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowListBase, outputs: { isLoadingChange: "isLoadingChange" }, usesInheritance: true, ngImport: i0 }); }
@@ -1557,6 +1576,12 @@ class InProgress {
             return;
         this._cancelled = true;
     }
+    progress() {
+        if (this.isCompleted)
+            return;
+        if (this.isCancelled)
+            throw new Aborted('InProgress cancelled');
+    }
     get isCompleted() {
         return this._completed;
     }
@@ -1797,14 +1822,19 @@ class ListAttachmentsComponent extends RowListBase {
         }
     }
     getInitialPageState() {
+        if (!this.rowListProvider?.getInitialPageState)
+            throw Error('no provider for ListAttachmentsComponent.rowListProvider.getInitialPageState');
+        let state = this.rowListProvider.getInitialPageState();
         return {
+            instance: state.instance,
             filter: {},
             pageConfig: {
                 pageSize: 10,
                 pageNumber: 1,
                 sortActive: 'uploadedTimestamp',
                 sortDirection: 'desc',
-            }
+                ...state.pageConfig
+            },
         };
     }
     fetchRowListPage() {
@@ -1832,9 +1862,6 @@ class ListAttachmentsComponent extends RowListBase {
             throw Error('no provider for ListAttachmentsComponent.rowListProvider.onDeleteClick.');
         return this.rowListProvider.deleteItem(item);
     }
-    savePageState() {
-        // state not saved
-    }
     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", canDownload: "canDownload", showOrgUnit: "showOrgUnit", noRowsMessage: "noRowsMessage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        @if ( rows?.length > 0 ) {\n            <nrcl-row-list-desktop [showRowHover]=\"false\">\n                <mat-table\n                    [dataSource]=\"rows | paginate: paginateState( 'desktop-attachments' )\"\n                    matSort\n                    [matSortActive]=\"sortActive\"\n                    [matSortDirection]=\"sortDirection\"\n                    (matSortChange)=\"onSortChange( $event )\"\n                >\n                    <ng-container matColumnDef=\"attachmentTypeCode\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Attachment Type</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.attachmentTypeDescription }}</nrcl-cell-content>\n                        </mat-cell>\n                    </ng-container>\n\n<!--                    Only show this column for prep sheet attachment section-->\n                    <ng-container matColumnDef=\"orgUnit\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Org Unit</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.orgUnit }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"fileName\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>File Name</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-button anchor tooltip\n                                [label]=\"item.fileName\"\n                                iconRight=\"download\"\n                                (click)=\"onDownloadClick( item )\"\n                            ></nrcl-button>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"fileExtension\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>File Type</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.fileExtension }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedBy\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded By</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.uploadedBy }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"uploadedTimestamp\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Uploaded Date</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.uploadedTimestamp }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"description\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.attachmentDescription }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"download\">\n                        <mat-header-cell *matHeaderCellDef>Down&shy;load</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-button compact\n                                icon=\"download\"\n                                (click)=\"onDownloadClick( item )\"\n                            ></nrcl-button>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"delete\">\n                        <mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-button compact\n                                icon=\"delete\"\n                                (click)=\"onDeleteClick( item )\"\n                            ></nrcl-button>\n                        </mat-cell>\n                    </ng-container>\n\n                    <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n                    <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n                </mat-table>\n            </nrcl-row-list-desktop>\n\n            <nrcl-gap/>\n        }\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            [noRowsMessage]=\"noRowsMessage\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        <nrcl-gap/>\n\n        @if ( rows?.length > 0 ) {\n            <nrcl-row-list-sorting\n                [sortColumn]=\"sortActive\"\n                [sortColumnOptions]=\"sortColumns\"\n                [sortDirection]=\"sortDirection\"\n                (sortChange)=\"onSortChange($event)\">\n            </nrcl-row-list-sorting>\n\n            <nrcl-gap/>\n\n            <nrcl-row-list-mobile>\n                @for ( item of rows | paginate: paginateState( 'mobile-attachments' ); track item.attachmentId ) {\n                    <mat-card>\n                        <mat-card-content>\n                            <section full-width class=\"filename\">\n                                <mat-label>File Name</mat-label>\n                                <div class=\"value\">\n                                    <nrcl-button anchor\n                                        [label]=\"item.fileName\"\n                                        iconRight=\"download\"\n                                        (click)=\"onDownloadClick( item )\"\n                                    ></nrcl-button>\n                                </div>\n                            </section>\n\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 Date</mat-label>\n                                <div class=\"value\">{{ item.uploadedTimestamp }}</div>\n                            </section>\n\n                            @if ( showOrgUnit ) {\n                                <section full-width>\n                                    <mat-label>Org Unit</mat-label>\n                                    <div class=\"value\">{{ item.orgUnit }}</div>\n                                </section>\n                            }\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\n                        <mat-card-footer>\n                            @if ( canDownload ) {\n                                <nrcl-button compact\n                                    label=\"Download\"\n                                    icon=\"download\"\n                                    (click)=\"onDownloadClick( item )\"\n                                ></nrcl-button>\n                            }\n\n                            @if ( canDelete ) {\n                                <nrcl-button compact\n                                    label=\"Delete\"\n                                    icon=\"delete\"\n                                    (click)=\"onDeleteClick( item )\"\n                                ></nrcl-button>\n                            }\n                        </mat-card-footer>\n                    </mat-card>\n                }\n            </nrcl-row-list-mobile>\n\n            <nrcl-gap/>\n        }\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            [noRowsMessage]=\"noRowsMessage\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-attachmentTypeCode{flex-basis:150px;flex-grow:1;flex-shrink:0}:host .mat-mdc-table .mat-column-orgUnit{flex-basis:150px;flex-grow:1;flex-shrink:0;word-break:break-word}:host .mat-mdc-table .mat-column-fileName{flex-basis:200px;flex-grow:3;flex-shrink:0}:host .mat-mdc-table .mat-column-fileName .nrcl-button{width:100%;--nrcl-button-width: 100%}:host .mat-mdc-table .mat-column-fileExtension{flex-basis:60px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedBy{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-uploadedTimestamp{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-description{flex-basis:200px;flex-grow:1;flex-shrink:1;word-break:break-word}:host .mat-mdc-table .mat-column-download{flex-basis:90px;flex-grow:0;flex-shrink:0;justify-content:center}:host .mat-mdc-table .mat-column-delete{flex-basis:60px;flex-grow:0;flex-shrink:0;justify-content:center}:host .nrcl-row-list-mobile section.filename .value .nrcl-button{width:100%;--nrcl-button-width: 100%;--nrcl-button-font-weight: bold}\n"], dependencies: [{ kind: "component", type: i1$7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$7.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$7.MatCardFooter, selector: "mat-card-footer" }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { 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: "component", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: ["sortColumn", "sortColumnOptions", "sortDirection"], outputs: ["sortChange"] }, { 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: i1$6.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1886,19 +1913,21 @@ class ListEventHistoryComponent extends RowListBase {
         return this.rowListProvider.displayRowListPage(res);
     }
     getInitialPageState() {
+        if (!this.rowListProvider?.getInitialPageState)
+            throw Error('no provider for ListEventHistoryComponent.rowListProvider.getInitialPageState');
+        let state = this.rowListProvider.getInitialPageState();
         return {
+            instance: state.instance,
             filter: {},
             pageConfig: {
                 pageSize: 20,
                 pageNumber: 1,
                 sortActive: 'dateTime',
                 sortDirection: 'desc',
-            }
+                ...state.pageConfig
+            },
         };
     }
-    savePageState() {
-        // state not saved
-    }
     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", noRowsMessage: "noRowsMessage" }, usesInheritance: true, ngImport: i0, template: "<nrcl-device-view>\n    <ng-template desktop-view>\n        @if ( rows?.length > 0 ) {\n            <nrcl-row-list-desktop [showRowHover]=\"false\">\n                <mat-table\n                    [dataSource]=\"rows | paginate: paginateState( 'desktop-event-history' )\"\n                    matSort\n                    [matSortActive]=\"sortActive\"\n                    [matSortDirection]=\"sortDirection\"\n                    (matSortChange)=\"onSortChange( $event )\">\n                >\n                    <ng-container matColumnDef=\"dateTime\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventTimestamp }}</nrcl-cell-content>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"changedBy\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>User ID</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.createdByUserId }}</nrcl-cell-content>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"type\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.eventHistoryTypeDescription }}</nrcl-cell-content>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"section\">\n                        <mat-header-cell *matHeaderCellDef mat-sort-header>Section</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            <nrcl-cell-content tooltip>{{ item.sourceObjectNameDescription }}</nrcl-cell-content>\n                        </mat-cell>\n                    </ng-container>\n\n                    <ng-container matColumnDef=\"comment\">\n                        <mat-header-cell *matHeaderCellDef>Comment</mat-header-cell>\n                        <mat-cell *matCellDef=\"let item\">\n                            {{ item.comment }}\n                        </mat-cell>\n                    </ng-container>\n\n                    <mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></mat-header-row>\n                    <mat-row *matRowDef=\"let item; columns: columns;\"></mat-row>\n                </mat-table>\n            </nrcl-row-list-desktop>\n\n            <nrcl-gap/>\n        }\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            [noRowsMessage]=\"noRowsMessage\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n\n    <ng-template mobile-view>\n        @if ( rows?.length > 0 ) {\n            <nrcl-gap/>\n\n            <nrcl-row-list-sorting\n                [sortColumn]=\"sortActive\"\n                [sortColumnOptions]=\"sortColumns\"\n                [sortDirection]=\"sortDirection\"\n                (sortChange)=\"onSortChange($event)\">\n            </nrcl-row-list-sorting>\n\n            <nrcl-gap/>\n\n            <nrcl-row-list-mobile>\n                @for ( item of rows | paginate: paginateState( 'mobile-event-history' ); track item.eventHistoryGuid ) {\n                    <mat-card>\n                        <mat-card-title>\n                            <section title>\n                                <h2>{{ item.eventTimestamp }}</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>Type</mat-label>\n                                <div class=\"value\">{{ item.eventHistoryTypeDescription }}</div>\n                            </section>\n\n                            <section full-width>\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/>\n        }\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            [noRowsMessage]=\"noRowsMessage\"\n        ></nrcl-row-list-pagination>\n    </ng-template>\n</nrcl-device-view>\n", styles: [":host .mat-mdc-table .mat-column-dateTime{flex-basis:150px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-changedBy{flex-basis:120px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-type{flex-basis:80px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-section{flex-basis:230px;flex-grow:0;flex-shrink:0}:host .mat-mdc-table .mat-column-comment{flex-basis:400px;flex-grow:1;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: i1$7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$7.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$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", "divider"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { 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: "component", type: RowListSortingComponent, selector: "nrcl-row-list-sorting", inputs: ["sortColumn", "sortColumnOptions", "sortDirection"], outputs: ["sortChange"] }, { 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: i1$6.PaginatePipe, name: "paginate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1942,6 +1971,7 @@ class ListSelectComponent extends RowListBase {
     }
     getInitialPageState() {
         return {
+            instance: '', // state not saved
             filter: {},
             pageConfig: {
                 pageSize: 0,
@@ -2006,9 +2036,6 @@ class ListSelectComponent extends RowListBase {
             return false;
         return this.filterProvider(option);
     }
-    savePageState() {
-        // state not saved
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSelectComponent, selector: "nrcl-list-select", inputs: { options: "options", value: "value", descriptionLabel: "descriptionLabel", single: ["single", "single", booleanAttribute], noRowsMessage: "noRowsMessage", displayColumnsProvider: "displayColumnsProvider", filterProvider: "filterProvider" }, outputs: { valueChange: "valueChange", filterClear: "filterClear" }, queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( !single ) {\n    <div class=\"summary\">\n        <h3>{{ value?.length || '0' }} Selected</h3>\n    </div>\n}\n\n<nrcl-filters-panel (clearFilters)=\"onClearFilters()\">\n    <nrcl-filter-search\n        [(value)]=\"searchText\"\n        (valueChange)=\"onSearchTextChange( $event )\">\n    </nrcl-filter-search>\n\n    <ng-content select=\"[filter]\"></ng-content>\n</nrcl-filters-panel>\n\n<nrcl-row-list-desktop [class.empty]=\"rows?.length == 0\">\n    <mat-table [dataSource]=\"rows\" >\n        <ng-container matColumnDef=\"description\">\n            <mat-header-cell *matHeaderCellDef>{{ descriptionLabel }}</mat-header-cell>\n            <mat-cell *matCellDef=\"let item\">\n                <nrcl-cell-content>{{ item.description }}</nrcl-cell-content>\n            </mat-cell>\n        </ng-container>\n\n        <ng-container matColumnDef=\"addRemove\">\n            <mat-header-cell *matHeaderCellDef>Add Remove</mat-header-cell>\n            <mat-cell *matCellDef=\"let item\">\n                <nrcl-indicator-select [selected]=\"isSelected( item )\"></nrcl-indicator-select>\n            </mat-cell>\n        </ng-container>\n\n        <ng-content></ng-content>\n\n        <mat-header-row *matHeaderRowDef=\"displayColumns; sticky: true\"></mat-header-row>\n\n        <mat-row\n            *matRowDef=\"let item; columns: displayColumns\"\n            [class.selected]=\"isSelected( item )\"\n            (click)=\"onRowClick( item )\"\n            (keypress)=\"onRowClick( item )\"\n        ></mat-row>\n    </mat-table>\n</nrcl-row-list-desktop>\n\n@if ( totalRowCount == 0 ) {\n    <nrcl-row-list-pagination\n        paginationId=\"list-select\"\n        [pageSize]=\"pageSize\"\n        [pageNumber]=\"pageNumber\"\n        [rowCount]=\"totalRowCount\"\n        (pageNumberChange)=\"onPageNumberChange( $event )\"\n        (pageSizeChange)=\"onPageSizeChange( $event )\"\n        [noRowsMessage]=\"noRowsMessage\"\n    ></nrcl-row-list-pagination>\n}\n", styles: [":host{font-family:var(--nrcl-font-family);font-size:var(--nrcl-font-size)}:host .summary{display:flex;justify-content:flex-end}:host .summary h3{font-size:var(--nrcl-font-size-h3);font-weight:400;padding:0;margin:0;padding-bottom:var(--nrcl-gutter-space)}:host .nrcl-row-list-desktop.empty{display:none}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-description{flex-grow:1}:host .nrcl-row-list-desktop .mat-mdc-table .mat-column-addRemove{flex-basis:70px;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;text-align:center}\n"], dependencies: [{ kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CellContentComponent, selector: "nrcl-cell-content", inputs: ["tooltip", "content"] }, { kind: "component", type: FilterSearchComponent, selector: "nrcl-filter-search", inputs: ["label", "placeholder", "hint", "value", "wide"], outputs: ["valueChange"] }, { kind: "component", type: FiltersPanelComponent, selector: "nrcl-filters-panel", inputs: ["showClear", "showFilters", "hasAdvancedFilters", "showAdvancedFilters"], outputs: ["clearFilters", "showFiltersChange", "showAdvancedFiltersChange"] }, { kind: "component", type: RowListDesktopComponent, selector: "nrcl-row-list-desktop", inputs: ["showRowHover"] }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: IndicatorSelectComponent, selector: "nrcl-indicator-select", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2481,6 +2508,7 @@ class ScheduleComponent extends RowListBase {
                 isFirst: d.date() == 1,
                 isWeekend: d.day() == 0 || d.day() == 6,
                 isToday: d.isSame(today, 'day'),
+                isHighlight: d.isSame(this.highlightDate, 'day')
             };
         });
         this._templates = Array.from({ length: schedule.length });
@@ -2506,13 +2534,13 @@ class ScheduleComponent extends RowListBase {
         }) || [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScheduleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScheduleComponent, selector: "nrcl-schedule", inputs: { provider: "provider", startDate: "startDate", weekStart: ["weekStart", "weekStart", numberAttribute], dayCount: ["dayCount", "dayCount", numberAttribute], menu: "menu" }, host: { properties: { "style.--nrcl-schedule-day-count": "this.dayCount" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ScheduleRowHeadingDirective, descendants: true }, { propertyName: "itemTemplates", predicate: ScheduleItemDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( rows?.length > 0 ) {\n    <div class=\"schedule\">\n        <div class=\"upper-left\">\n            <ng-content></ng-content>\n        </div>\n\n        <div class=\"row weeks\">\n            @for ( week of _weeks; track $index ) {\n                @if ( week.span == 1 ) {\n                    <div class=\"week\">\n                        {{ week.start }}\n                    </div>\n                }\n                @else {\n                    <div class=\"week\" [style.grid-column]=\"'span ' + week.span\">\n                        {{ week.start }} - {{ week.end }}\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"row days\">    \n            @for ( day of _days; track $index ) {\n                <div class=\"day\"\n                    [class.weekend]=\"day.isWeekend\"\n                    [class.today]=\"day.isToday\"\n                    [class.first]=\"day.isFirst\"\n                >\n                    <div class=\"day-name\">{{ day.dayName }}</div>\n                    <div class=\"date\">{{ day.monthDay }}</div>\n                </div>\n            }\n        </div>\n\n        @for ( row of rows | paginate: paginateState( 'nrcl-schedule' ); track row.id; let rowIndex = $index ) {\n            <div class=\"row items\">\n                <div class=\"outer heading\">\n                    <div class=\"inner heading\">\n                        <ng-container \n                            [ngTemplateOutlet]=\"headerTemplate?.template\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.heading }\"            \n                        ></ng-container>\n                    </div>\n                </div>    \n\n                @if ( row.items | async; as rowItems ) {\n                    @for ( item of rowItems; track item.id; let colIndex = $index ) {\n                        <div class=\"outer item\"\n                            [class.menu-open]=\"itemMenu.menuOpen\"\n                        >\n                            <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n                                [class]=\"'item-' + item.name\" \n                                matRipple\n                                [matMenuTriggerFor]=\"menu\"\n                                [matMenuTriggerData]=\"{ $implicit: { item: item, heading: row.heading } }\"\n                                [matTooltip]=\"item?.tooltip?.()\"\n                                matTooltipClass=\"nrcl-schedule-multiline\"\n                                [class.travel]=\"item?.travel\"\n                            >\n                                <ng-container \n                                    [ngTemplateOutlet]=\"_templates[ rowIndex ][ colIndex ] || empty\" \n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-container>\n                                \n                                @let icons = item?.icons?.();\n                                @if ( icons && icons.length > 0 ) {\n                                    <div class=\"icons\">\n                                        @for ( icon of icons; track icon ) {\n                                            <nrcl-icon small>{{ icon }}</nrcl-icon>\n                                        }                                \n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n                @else {\n                    @for ( day of _days; track day ) {\n                        <div class=\"item item-loading\"></div>\n                    }\n                }\n            </div>\n        }\n    </div>\n\n    <nrcl-gap/>\n}\n\n<nrcl-row-list-pagination\n    paginationId=\"nrcl-schedule\"\n    [pageSize]=\"pageSize\"\n    [pageNumber]=\"pageNumber\"\n    [rowCount]=\"totalRowCount\"\n    (pageNumberChange)=\"onPageNumberChange( $event )\"\n    (pageSizeChange)=\"onPageSizeChange( $event )\"\n></nrcl-row-list-pagination>\n\n<ng-template #empty>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-schedule-border-color: #c6c8cb;--nrcl-schedule-background-color: white;--nrcl-schedule-alternate-background-color: #f2f2f2;--nrcl-schedule-hover-background-color: #d7d7d7;--nrcl-schedule-row-weeks-height: 30px;--nrcl-schedule-row-weeks-font-size: 15px;--nrcl-schedule-row-weeks-font-weight: bold;--nrcl-schedule-row-weeks-foreground-color: black;--nrcl-schedule-row-days-height: 45px;--nrcl-schedule-row-days-font-size: 15px;--nrcl-schedule-row-days-font-weight: normal;--nrcl-schedule-row-days-foreground-color: black;--nrcl-schedule-row-days-weekend-background-color: #e0f8fc;--nrcl-schedule-row-days-today-background-color: #fcf8d9;--nrcl-schedule-row-schedule-height: 70px;--nrcl-schedule-heading-width: 300px;--nrcl-schedule-item-width: 80px}:host{display:flex;flex-direction:column;font-family:var(--nrcl-font-family)}:host .schedule{display:grid;grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule .upper-left{grid-row:1/span 2;grid-column:1;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color);position:sticky;top:0;left:0;z-index:2;background:var(--nrcl-schedule-background-color)}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row .outer.heading,:host .schedule .row .day,:host .schedule .row .week{border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.item:last-child{border-right:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row:last-child .outer.item{border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .week{border-top:1px solid var(--nrcl-schedule-border-color);display:flex;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-weeks-font-size);font-weight:var(--nrcl-schedule-row-weeks-font-weight);color:var(--nrcl-schedule-row-weeks-foreground-color);position:sticky;top:0;background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-days-font-size);font-weight:var(--nrcl-schedule-row-days-font-weight);color:var(--nrcl-schedule-row-days-foreground-color);position:sticky;top:calc(var(--nrcl-schedule-row-weeks-height) + 2px);background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day .day-name{font-size:13px}:host .schedule .row .day.weekend{background-color:var(--nrcl-schedule-row-days-weekend-background-color)}:host .schedule .row .day.today{background-color:var(--nrcl-schedule-row-days-today-background-color)}:host .schedule .row .day.first:after{content:\"\";position:absolute;top:0;left:0;bottom:0;border-left:2px solid black}:host .schedule .row.items .outer.item{box-sizing:border-box;height:var(--nrcl-schedule-row-schedule-height);display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item:hover .item{background-color:#06e;color:#fff}:host .schedule .row.items .outer.item.menu-open .item{background-color:#036;color:#fff}:host .schedule .row.items .outer.item .item{flex-grow:1;cursor:pointer;position:relative;padding:4px 4px 8px}:host .schedule .row.items .outer.item .item .icons{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;background-color:#f1ebe4;border-radius:4px;padding:3px;color:var(--nrcl-schedule-row-days-foreground-color)}:host .schedule .row.items .outer.item .item.travel{position:relative}:host .schedule .row.items .outer.item .item.travel:after{content:\"\";position:absolute;inset:0 0 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABAQMAAAD+YPzoAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlP/AOW3MEoAAAAMSURBVHicY+BwEgAAALAAW97nJhUAAAAASUVORK5CYII=);background-repeat:no-repeat;background-size:calc(100% - 8px) 3px;background-position:bottom}:host .schedule .row.items .outer.heading{box-sizing:border-box;cursor:default;position:sticky;left:0;z-index:1;height:var(--nrcl-schedule-row-schedule-height)}:host .schedule .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row:nth-child(odd) .outer{background-color:var(--nrcl-schedule-background-color)}:host .schedule .row:nth-child(2n) .outer{background-color:var(--nrcl-schedule-alternate-background-color)}:host .schedule .row:hover .outer{background-color:var(--nrcl-schedule-hover-background-color)}.empty{height:100%;display:flex;justify-content:center;align-items:center;color:#aaa}::ng-deep .cdk-overlay-container .nrcl-schedule-multiline .mdc-tooltip__surface{white-space:pre-line;max-width:unset;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.PaginatePipe, name: "paginate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ScheduleComponent, selector: "nrcl-schedule", inputs: { provider: "provider", startDate: "startDate", weekStart: ["weekStart", "weekStart", numberAttribute], dayCount: ["dayCount", "dayCount", numberAttribute], menu: "menu", highlightDate: "highlightDate" }, host: { properties: { "style.--nrcl-schedule-day-count": "this.dayCount" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ScheduleRowHeadingDirective, descendants: true }, { propertyName: "itemTemplates", predicate: ScheduleItemDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( rows?.length > 0 ) {\n    <div class=\"schedule\">\n        <div class=\"upper-left\">\n            <ng-content></ng-content>\n        </div>\n\n        <div class=\"row weeks\">\n            @for ( week of _weeks; track $index ) {\n                @if ( week.span == 1 ) {\n                    <div class=\"week\">\n                        {{ week.start }}\n                    </div>\n                }\n                @else {\n                    <div class=\"week\" [style.grid-column]=\"'span ' + week.span\">\n                        {{ week.start }} - {{ week.end }}\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"row days\">    \n            @for ( day of _days; track $index ) {\n                <div class=\"day\"\n                    [class.weekend]=\"day.isWeekend\"\n                    [class.today]=\"day.isToday\"\n                    [class.first]=\"day.isFirst\"\n                    [class.highlight]=\"day.isHighlight\"\n                >\n                    <div class=\"day-name\">{{ day.dayName }}</div>\n                    <div class=\"date\">{{ day.monthDay }}</div>\n                </div>\n            }\n        </div>\n\n        @for ( row of rows | paginate: paginateState( 'nrcl-schedule' ); track row.id; let rowIndex = $index ) {\n            <div class=\"row items\">\n                <div class=\"outer heading\">\n                    <div class=\"inner heading\">\n                        <ng-container \n                            [ngTemplateOutlet]=\"headerTemplate?.template\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.heading }\"            \n                        ></ng-container>\n                    </div>\n                </div>    \n\n                @if ( row.items | async; as rowItems ) {\n                    @for ( item of rowItems; track item.id; let colIndex = $index ) {\n                        <div class=\"outer item\"\n                            [class.menu-open]=\"itemMenu.menuOpen\"\n                            [class.highlight]=\"_days[ colIndex ].isHighlight\"\n                        >\n                            <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n                                [class]=\"'item-' + item.name\" \n                                matRipple\n                                [matMenuTriggerFor]=\"menu\"\n                                [matMenuTriggerData]=\"{ $implicit: { item: item, heading: row.heading } }\"\n                                [matTooltip]=\"item?.tooltip?.()\"\n                                matTooltipClass=\"nrcl-schedule-multiline\"\n                                [class.travel]=\"item?.travel\"\n                            >\n                                <ng-container \n                                    [ngTemplateOutlet]=\"_templates[ rowIndex ][ colIndex ] || empty\" \n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-container>\n                                \n                                @let icons = item?.icons?.();\n                                @if ( icons && icons.length > 0 ) {\n                                    <div class=\"icons\">\n                                        @for ( icon of icons; track icon ) {\n                                            <nrcl-icon small>{{ icon }}</nrcl-icon>\n                                        }                                \n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n                @else {\n                    @for ( day of _days; track day ) {\n                        <div class=\"item item-loading\"></div>\n                    }\n                }\n            </div>\n        }\n    </div>\n\n    <nrcl-gap/>\n}\n\n<nrcl-row-list-pagination\n    paginationId=\"nrcl-schedule\"\n    [pageSize]=\"pageSize\"\n    [pageNumber]=\"pageNumber\"\n    [rowCount]=\"totalRowCount\"\n    (pageNumberChange)=\"onPageNumberChange( $event )\"\n    (pageSizeChange)=\"onPageSizeChange( $event )\"\n></nrcl-row-list-pagination>\n\n<ng-template #empty>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-schedule-border-color: #c6c8cb;--nrcl-schedule-background-color: white;--nrcl-schedule-alternate-background-color: #f2f2f2;--nrcl-schedule-hover-background-color: #d7d7d7;--nrcl-schedule-row-weeks-height: 30px;--nrcl-schedule-row-weeks-font-size: 15px;--nrcl-schedule-row-weeks-font-weight: bold;--nrcl-schedule-row-weeks-foreground-color: black;--nrcl-schedule-row-days-height: 45px;--nrcl-schedule-row-days-font-size: 15px;--nrcl-schedule-row-days-font-weight: normal;--nrcl-schedule-row-days-foreground-color: black;--nrcl-schedule-row-days-weekend-background-color: #e0f8fc;--nrcl-schedule-row-days-today-background-color: #fcf8d9;--nrcl-schedule-row-days-highlight-background-color: #eafce8;--nrcl-schedule-row-schedule-height: 70px;--nrcl-schedule-heading-width: 300px;--nrcl-schedule-item-width: 80px}:host{display:flex;flex-direction:column;font-family:var(--nrcl-font-family)}:host .schedule{display:grid;grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule .upper-left{grid-row:1/span 2;grid-column:1;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color);position:sticky;top:0;left:0;z-index:2;background:var(--nrcl-schedule-background-color)}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row .outer.heading,:host .schedule .row .day,:host .schedule .row .week{border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.item:last-child{border-right:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row:last-child .outer.item{border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .week{border-top:1px solid var(--nrcl-schedule-border-color);display:flex;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-weeks-font-size);font-weight:var(--nrcl-schedule-row-weeks-font-weight);color:var(--nrcl-schedule-row-weeks-foreground-color);position:sticky;top:0;background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-days-font-size);font-weight:var(--nrcl-schedule-row-days-font-weight);color:var(--nrcl-schedule-row-days-foreground-color);position:sticky;top:calc(var(--nrcl-schedule-row-weeks-height) + 2px);background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day .day-name{font-size:13px}:host .schedule .row .day.weekend{background-color:var(--nrcl-schedule-row-days-weekend-background-color)}:host .schedule .row .day.today{background-color:var(--nrcl-schedule-row-days-today-background-color)}:host .schedule .row .day.highlight{background-color:var(--nrcl-schedule-row-days-highlight-background-color)}:host .schedule .row .day.first:after{content:\"\";position:absolute;top:0;left:0;bottom:0;border-left:2px solid black}:host .schedule .row.items .outer.item{box-sizing:border-box;height:var(--nrcl-schedule-row-schedule-height);display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item:hover .item{background-color:#06e;color:#fff}:host .schedule .row.items .outer.item.menu-open .item{background-color:#036;color:#fff}:host .schedule .row.items .outer.item .item{flex-grow:1;cursor:pointer;position:relative;padding:4px 4px 8px}:host .schedule .row.items .outer.item .item .icons{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;background-color:#f1ebe4;border-radius:4px;padding:3px;color:var(--nrcl-schedule-row-days-foreground-color)}:host .schedule .row.items .outer.item .item.travel{position:relative}:host .schedule .row.items .outer.item .item.travel:after{content:\"\";position:absolute;inset:0 0 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABAQMAAAD+YPzoAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlP/AOW3MEoAAAAMSURBVHicY+BwEgAAALAAW97nJhUAAAAASUVORK5CYII=);background-repeat:no-repeat;background-size:calc(100% - 8px) 3px;background-position:bottom}:host .schedule .row.items .outer.heading{box-sizing:border-box;cursor:default;position:sticky;left:0;z-index:1;height:var(--nrcl-schedule-row-schedule-height)}:host .schedule .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row:nth-child(odd) .outer{background-color:var(--nrcl-schedule-background-color)}:host .schedule .row:nth-child(2n) .outer{background-color:var(--nrcl-schedule-alternate-background-color)}:host .schedule .row:hover .outer{background-color:var(--nrcl-schedule-hover-background-color)}.empty{height:100%;display:flex;justify-content:center;align-items:center;color:#aaa}::ng-deep .cdk-overlay-container .nrcl-schedule-multiline .mdc-tooltip__surface{white-space:pre-line;max-width:unset;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: GapComponent, selector: "nrcl-gap", inputs: ["horizontal", "vertical", "divider"] }, { kind: "component", type: RowListPaginationComponent, selector: "nrcl-row-list-pagination", inputs: ["paginationId", "pageSizeOptions", "pageSize", "pageNumber", "rowCount", "showPageSize", "noRowsMessage"], outputs: ["pageSizeChange", "pageNumberChange"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.PaginatePipe, name: "paginate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScheduleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nrcl-schedule', host: {
                         '[style.--nrcl-schedule-day-count]': 'this.dayCount'
-                    }, template: "@if ( rows?.length > 0 ) {\n    <div class=\"schedule\">\n        <div class=\"upper-left\">\n            <ng-content></ng-content>\n        </div>\n\n        <div class=\"row weeks\">\n            @for ( week of _weeks; track $index ) {\n                @if ( week.span == 1 ) {\n                    <div class=\"week\">\n                        {{ week.start }}\n                    </div>\n                }\n                @else {\n                    <div class=\"week\" [style.grid-column]=\"'span ' + week.span\">\n                        {{ week.start }} - {{ week.end }}\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"row days\">    \n            @for ( day of _days; track $index ) {\n                <div class=\"day\"\n                    [class.weekend]=\"day.isWeekend\"\n                    [class.today]=\"day.isToday\"\n                    [class.first]=\"day.isFirst\"\n                >\n                    <div class=\"day-name\">{{ day.dayName }}</div>\n                    <div class=\"date\">{{ day.monthDay }}</div>\n                </div>\n            }\n        </div>\n\n        @for ( row of rows | paginate: paginateState( 'nrcl-schedule' ); track row.id; let rowIndex = $index ) {\n            <div class=\"row items\">\n                <div class=\"outer heading\">\n                    <div class=\"inner heading\">\n                        <ng-container \n                            [ngTemplateOutlet]=\"headerTemplate?.template\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.heading }\"            \n                        ></ng-container>\n                    </div>\n                </div>    \n\n                @if ( row.items | async; as rowItems ) {\n                    @for ( item of rowItems; track item.id; let colIndex = $index ) {\n                        <div class=\"outer item\"\n                            [class.menu-open]=\"itemMenu.menuOpen\"\n                        >\n                            <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n                                [class]=\"'item-' + item.name\" \n                                matRipple\n                                [matMenuTriggerFor]=\"menu\"\n                                [matMenuTriggerData]=\"{ $implicit: { item: item, heading: row.heading } }\"\n                                [matTooltip]=\"item?.tooltip?.()\"\n                                matTooltipClass=\"nrcl-schedule-multiline\"\n                                [class.travel]=\"item?.travel\"\n                            >\n                                <ng-container \n                                    [ngTemplateOutlet]=\"_templates[ rowIndex ][ colIndex ] || empty\" \n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-container>\n                                \n                                @let icons = item?.icons?.();\n                                @if ( icons && icons.length > 0 ) {\n                                    <div class=\"icons\">\n                                        @for ( icon of icons; track icon ) {\n                                            <nrcl-icon small>{{ icon }}</nrcl-icon>\n                                        }                                \n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n                @else {\n                    @for ( day of _days; track day ) {\n                        <div class=\"item item-loading\"></div>\n                    }\n                }\n            </div>\n        }\n    </div>\n\n    <nrcl-gap/>\n}\n\n<nrcl-row-list-pagination\n    paginationId=\"nrcl-schedule\"\n    [pageSize]=\"pageSize\"\n    [pageNumber]=\"pageNumber\"\n    [rowCount]=\"totalRowCount\"\n    (pageNumberChange)=\"onPageNumberChange( $event )\"\n    (pageSizeChange)=\"onPageSizeChange( $event )\"\n></nrcl-row-list-pagination>\n\n<ng-template #empty>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-schedule-border-color: #c6c8cb;--nrcl-schedule-background-color: white;--nrcl-schedule-alternate-background-color: #f2f2f2;--nrcl-schedule-hover-background-color: #d7d7d7;--nrcl-schedule-row-weeks-height: 30px;--nrcl-schedule-row-weeks-font-size: 15px;--nrcl-schedule-row-weeks-font-weight: bold;--nrcl-schedule-row-weeks-foreground-color: black;--nrcl-schedule-row-days-height: 45px;--nrcl-schedule-row-days-font-size: 15px;--nrcl-schedule-row-days-font-weight: normal;--nrcl-schedule-row-days-foreground-color: black;--nrcl-schedule-row-days-weekend-background-color: #e0f8fc;--nrcl-schedule-row-days-today-background-color: #fcf8d9;--nrcl-schedule-row-schedule-height: 70px;--nrcl-schedule-heading-width: 300px;--nrcl-schedule-item-width: 80px}:host{display:flex;flex-direction:column;font-family:var(--nrcl-font-family)}:host .schedule{display:grid;grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule .upper-left{grid-row:1/span 2;grid-column:1;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color);position:sticky;top:0;left:0;z-index:2;background:var(--nrcl-schedule-background-color)}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row .outer.heading,:host .schedule .row .day,:host .schedule .row .week{border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.item:last-child{border-right:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row:last-child .outer.item{border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .week{border-top:1px solid var(--nrcl-schedule-border-color);display:flex;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-weeks-font-size);font-weight:var(--nrcl-schedule-row-weeks-font-weight);color:var(--nrcl-schedule-row-weeks-foreground-color);position:sticky;top:0;background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-days-font-size);font-weight:var(--nrcl-schedule-row-days-font-weight);color:var(--nrcl-schedule-row-days-foreground-color);position:sticky;top:calc(var(--nrcl-schedule-row-weeks-height) + 2px);background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day .day-name{font-size:13px}:host .schedule .row .day.weekend{background-color:var(--nrcl-schedule-row-days-weekend-background-color)}:host .schedule .row .day.today{background-color:var(--nrcl-schedule-row-days-today-background-color)}:host .schedule .row .day.first:after{content:\"\";position:absolute;top:0;left:0;bottom:0;border-left:2px solid black}:host .schedule .row.items .outer.item{box-sizing:border-box;height:var(--nrcl-schedule-row-schedule-height);display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item:hover .item{background-color:#06e;color:#fff}:host .schedule .row.items .outer.item.menu-open .item{background-color:#036;color:#fff}:host .schedule .row.items .outer.item .item{flex-grow:1;cursor:pointer;position:relative;padding:4px 4px 8px}:host .schedule .row.items .outer.item .item .icons{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;background-color:#f1ebe4;border-radius:4px;padding:3px;color:var(--nrcl-schedule-row-days-foreground-color)}:host .schedule .row.items .outer.item .item.travel{position:relative}:host .schedule .row.items .outer.item .item.travel:after{content:\"\";position:absolute;inset:0 0 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABAQMAAAD+YPzoAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlP/AOW3MEoAAAAMSURBVHicY+BwEgAAALAAW97nJhUAAAAASUVORK5CYII=);background-repeat:no-repeat;background-size:calc(100% - 8px) 3px;background-position:bottom}:host .schedule .row.items .outer.heading{box-sizing:border-box;cursor:default;position:sticky;left:0;z-index:1;height:var(--nrcl-schedule-row-schedule-height)}:host .schedule .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row:nth-child(odd) .outer{background-color:var(--nrcl-schedule-background-color)}:host .schedule .row:nth-child(2n) .outer{background-color:var(--nrcl-schedule-alternate-background-color)}:host .schedule .row:hover .outer{background-color:var(--nrcl-schedule-hover-background-color)}.empty{height:100%;display:flex;justify-content:center;align-items:center;color:#aaa}::ng-deep .cdk-overlay-container .nrcl-schedule-multiline .mdc-tooltip__surface{white-space:pre-line;max-width:unset;text-align:left}\n"] }]
+                    }, template: "@if ( rows?.length > 0 ) {\n    <div class=\"schedule\">\n        <div class=\"upper-left\">\n            <ng-content></ng-content>\n        </div>\n\n        <div class=\"row weeks\">\n            @for ( week of _weeks; track $index ) {\n                @if ( week.span == 1 ) {\n                    <div class=\"week\">\n                        {{ week.start }}\n                    </div>\n                }\n                @else {\n                    <div class=\"week\" [style.grid-column]=\"'span ' + week.span\">\n                        {{ week.start }} - {{ week.end }}\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"row days\">    \n            @for ( day of _days; track $index ) {\n                <div class=\"day\"\n                    [class.weekend]=\"day.isWeekend\"\n                    [class.today]=\"day.isToday\"\n                    [class.first]=\"day.isFirst\"\n                    [class.highlight]=\"day.isHighlight\"\n                >\n                    <div class=\"day-name\">{{ day.dayName }}</div>\n                    <div class=\"date\">{{ day.monthDay }}</div>\n                </div>\n            }\n        </div>\n\n        @for ( row of rows | paginate: paginateState( 'nrcl-schedule' ); track row.id; let rowIndex = $index ) {\n            <div class=\"row items\">\n                <div class=\"outer heading\">\n                    <div class=\"inner heading\">\n                        <ng-container \n                            [ngTemplateOutlet]=\"headerTemplate?.template\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.heading }\"            \n                        ></ng-container>\n                    </div>\n                </div>    \n\n                @if ( row.items | async; as rowItems ) {\n                    @for ( item of rowItems; track item.id; let colIndex = $index ) {\n                        <div class=\"outer item\"\n                            [class.menu-open]=\"itemMenu.menuOpen\"\n                            [class.highlight]=\"_days[ colIndex ].isHighlight\"\n                        >\n                            <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n                                [class]=\"'item-' + item.name\" \n                                matRipple\n                                [matMenuTriggerFor]=\"menu\"\n                                [matMenuTriggerData]=\"{ $implicit: { item: item, heading: row.heading } }\"\n                                [matTooltip]=\"item?.tooltip?.()\"\n                                matTooltipClass=\"nrcl-schedule-multiline\"\n                                [class.travel]=\"item?.travel\"\n                            >\n                                <ng-container \n                                    [ngTemplateOutlet]=\"_templates[ rowIndex ][ colIndex ] || empty\" \n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-container>\n                                \n                                @let icons = item?.icons?.();\n                                @if ( icons && icons.length > 0 ) {\n                                    <div class=\"icons\">\n                                        @for ( icon of icons; track icon ) {\n                                            <nrcl-icon small>{{ icon }}</nrcl-icon>\n                                        }                                \n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n                @else {\n                    @for ( day of _days; track day ) {\n                        <div class=\"item item-loading\"></div>\n                    }\n                }\n            </div>\n        }\n    </div>\n\n    <nrcl-gap/>\n}\n\n<nrcl-row-list-pagination\n    paginationId=\"nrcl-schedule\"\n    [pageSize]=\"pageSize\"\n    [pageNumber]=\"pageNumber\"\n    [rowCount]=\"totalRowCount\"\n    (pageNumberChange)=\"onPageNumberChange( $event )\"\n    (pageSizeChange)=\"onPageSizeChange( $event )\"\n></nrcl-row-list-pagination>\n\n<ng-template #empty>\n</ng-template>\n", styles: ["::ng-deep :root{--nrcl-schedule-border-color: #c6c8cb;--nrcl-schedule-background-color: white;--nrcl-schedule-alternate-background-color: #f2f2f2;--nrcl-schedule-hover-background-color: #d7d7d7;--nrcl-schedule-row-weeks-height: 30px;--nrcl-schedule-row-weeks-font-size: 15px;--nrcl-schedule-row-weeks-font-weight: bold;--nrcl-schedule-row-weeks-foreground-color: black;--nrcl-schedule-row-days-height: 45px;--nrcl-schedule-row-days-font-size: 15px;--nrcl-schedule-row-days-font-weight: normal;--nrcl-schedule-row-days-foreground-color: black;--nrcl-schedule-row-days-weekend-background-color: #e0f8fc;--nrcl-schedule-row-days-today-background-color: #fcf8d9;--nrcl-schedule-row-days-highlight-background-color: #eafce8;--nrcl-schedule-row-schedule-height: 70px;--nrcl-schedule-heading-width: 300px;--nrcl-schedule-item-width: 80px}:host{display:flex;flex-direction:column;font-family:var(--nrcl-font-family)}:host .schedule{display:grid;grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule .upper-left{grid-row:1/span 2;grid-column:1;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color);position:sticky;top:0;left:0;z-index:2;background:var(--nrcl-schedule-background-color)}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row .outer.heading,:host .schedule .row .day,:host .schedule .row .week{border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .outer.item:last-child{border-right:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row:last-child .outer.item{border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row .week{border-top:1px solid var(--nrcl-schedule-border-color);display:flex;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-weeks-font-size);font-weight:var(--nrcl-schedule-row-weeks-font-weight);color:var(--nrcl-schedule-row-weeks-foreground-color);position:sticky;top:0;background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:var(--nrcl-schedule-row-days-font-size);font-weight:var(--nrcl-schedule-row-days-font-weight);color:var(--nrcl-schedule-row-days-foreground-color);position:sticky;top:calc(var(--nrcl-schedule-row-weeks-height) + 2px);background-color:var(--nrcl-schedule-background-color);z-index:1}:host .schedule .row .day .day-name{font-size:13px}:host .schedule .row .day.weekend{background-color:var(--nrcl-schedule-row-days-weekend-background-color)}:host .schedule .row .day.today{background-color:var(--nrcl-schedule-row-days-today-background-color)}:host .schedule .row .day.highlight{background-color:var(--nrcl-schedule-row-days-highlight-background-color)}:host .schedule .row .day.first:after{content:\"\";position:absolute;top:0;left:0;bottom:0;border-left:2px solid black}:host .schedule .row.items .outer.item{box-sizing:border-box;height:var(--nrcl-schedule-row-schedule-height);display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;border-right:1px solid var(--nrcl-schedule-border-color);border-bottom:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item:hover .item{background-color:#06e;color:#fff}:host .schedule .row.items .outer.item.menu-open .item{background-color:#036;color:#fff}:host .schedule .row.items .outer.item .item{flex-grow:1;cursor:pointer;position:relative;padding:4px 4px 8px}:host .schedule .row.items .outer.item .item .icons{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;background-color:#f1ebe4;border-radius:4px;padding:3px;color:var(--nrcl-schedule-row-days-foreground-color)}:host .schedule .row.items .outer.item .item.travel{position:relative}:host .schedule .row.items .outer.item .item.travel:after{content:\"\";position:absolute;inset:0 0 2px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABAQMAAAD+YPzoAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlP/AOW3MEoAAAAMSURBVHicY+BwEgAAALAAW97nJhUAAAAASUVORK5CYII=);background-repeat:no-repeat;background-size:calc(100% - 8px) 3px;background-position:bottom}:host .schedule .row.items .outer.heading{box-sizing:border-box;cursor:default;position:sticky;left:0;z-index:1;height:var(--nrcl-schedule-row-schedule-height)}:host .schedule .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row:nth-child(odd) .outer{background-color:var(--nrcl-schedule-background-color)}:host .schedule .row:nth-child(2n) .outer{background-color:var(--nrcl-schedule-alternate-background-color)}:host .schedule .row:hover .outer{background-color:var(--nrcl-schedule-hover-background-color)}.empty{height:100%;display:flex;justify-content:center;align-items:center;color:#aaa}::ng-deep .cdk-overlay-container .nrcl-schedule-multiline .mdc-tooltip__surface{white-space:pre-line;max-width:unset;text-align:left}\n"] }]
         }], propDecorators: { provider: [{
                 type: Input
             }], startDate: [{
@@ -2525,6 +2553,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ transform: numberAttribute }]
             }], menu: [{
                 type: Input
+            }], highlightDate: [{
+                type: Input
             }], itemTemplates: [{
                 type: ContentChildren,
                 args: [ScheduleItemDirective]
@@ -2551,15 +2581,17 @@ class ResourceScheduleComponent {
         this.weekStart = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourceScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: ResourceScheduleComponent, selector: "nrcl-resource-schedule", inputs: { provider: "provider", startDate: "startDate", weekStart: "weekStart", dayCount: ["dayCount", "dayCount", numberAttribute], menu: "menu" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ResourceScheduleRowHeadingDirective, descendants: true }], viewQueries: [{ propertyName: "scheduleComponent", first: true, predicate: ScheduleComponent, descendants: true }], ngImport: i0, template: "<nrcl-schedule #schedule\n    [provider]=\"provider\"\n    [startDate]=\"startDate\"\n    [weekStart]=\"weekStart\"\n    [dayCount]=\"dayCount\"\n    [menu]=\"menu\"\n>\n    <ng-content></ng-content>\n\n    <ng-template nrclScheduleRowHeading let-item>\n        <ng-container \n            [ngTemplateOutlet]=\"headerTemplate.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"            \n        ></ng-container>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"rostered\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"out-of-service\" let-data>\n        <h1>OOS</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-duty-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-standby-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-off-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-regular-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-duty-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-standby-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-off-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-regular-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n</nrcl-schedule>\n\n", styles: ["::ng-deep :root{--nrcl-resource-schedule-item-foregroud-color: black;--nrcl-resource-schedule-item-text-shadow: 1px 0px 5px #ffffffa0, -1px 0px 5px #ffffffa0, 0px 1px 5px #ffffffa0, 0px -1px 5px #ffffffa0;--nrcl-resource-schedule-item-regular-day-background-color: #0AA647;--nrcl-resource-schedule-item-off-day-background-color: #d4d2d2;--nrcl-resource-schedule-item-duty-day-background-color: #2f9fe0;--nrcl-resource-schedule-item-standby-day-background-color: #f6cf43;--nrcl-resource-schedule-item-out-of-service-background-color: #f55353;--nrcl-resource-schedule-item-rostered-background-color: #ba9ef7}:host{height:100%;display:block}.nrcl-schedule ::ng-deep .inner.item{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;color:var(--nrcl-resource-schedule-item-foregroud-color)}.nrcl-schedule ::ng-deep .inner.item h1,.nrcl-schedule ::ng-deep .inner.item h2,.nrcl-schedule ::ng-deep .inner.item h3{padding:0;margin:0;font-weight:200;font-size:15px;line-height:18px;text-align:center;white-space:nowrap}.nrcl-schedule ::ng-deep .inner.item h2{flex-grow:1;text-align:center;display:flex;justify-content:center;align-items:center}.nrcl-schedule ::ng-deep .inner.item h2.wrap{white-space:wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:0;overflow:hidden}.nrcl-schedule ::ng-deep .inner.item.item-out-of-service{background-color:var(--nrcl-resource-schedule-item-out-of-service-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-rostered{background-color:var(--nrcl-resource-schedule-item-rostered-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScheduleComponent, selector: "nrcl-schedule", inputs: ["provider", "startDate", "weekStart", "dayCount", "menu"] }, { kind: "directive", type: ScheduleItemDirective, selector: "[nrclScheduleItem]", inputs: ["nrclScheduleItem"] }, { kind: "directive", type: ScheduleRowHeadingDirective, selector: "[nrclScheduleRowHeading]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: ResourceScheduleComponent, selector: "nrcl-resource-schedule", inputs: { provider: "provider", startDate: "startDate", highlightDate: "highlightDate", weekStart: "weekStart", dayCount: ["dayCount", "dayCount", numberAttribute], menu: "menu" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ResourceScheduleRowHeadingDirective, descendants: true }], viewQueries: [{ propertyName: "scheduleComponent", first: true, predicate: ScheduleComponent, descendants: true }], ngImport: i0, template: "<nrcl-schedule #schedule\n    [provider]=\"provider\"\n    [startDate]=\"startDate\"\n    [highlightDate]=\"highlightDate\"\n    [weekStart]=\"weekStart\"\n    [dayCount]=\"dayCount\"\n    [menu]=\"menu\"\n>\n    <ng-content></ng-content>\n\n    <ng-template nrclScheduleRowHeading let-item>\n        <ng-container \n            [ngTemplateOutlet]=\"headerTemplate.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"            \n        ></ng-container>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"rostered\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"out-of-service\" let-data>\n        <h1>OOS</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-duty-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-standby-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-off-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-regular-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-duty-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-standby-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-off-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-regular-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n</nrcl-schedule>\n\n", styles: ["::ng-deep :root{--nrcl-resource-schedule-item-foregroud-color: black;--nrcl-resource-schedule-item-text-shadow: 1px 0px 5px #ffffffa0, -1px 0px 5px #ffffffa0, 0px 1px 5px #ffffffa0, 0px -1px 5px #ffffffa0;--nrcl-resource-schedule-item-regular-day-background-color: #0AA647;--nrcl-resource-schedule-item-off-day-background-color: #d4d2d2;--nrcl-resource-schedule-item-duty-day-background-color: #2f9fe0;--nrcl-resource-schedule-item-standby-day-background-color: #f6cf43;--nrcl-resource-schedule-item-out-of-service-background-color: #f55353;--nrcl-resource-schedule-item-rostered-background-color: #ba9ef7}:host{height:100%;display:block}.nrcl-schedule ::ng-deep .inner.item{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;color:var(--nrcl-resource-schedule-item-foregroud-color)}.nrcl-schedule ::ng-deep .inner.item h1,.nrcl-schedule ::ng-deep .inner.item h2,.nrcl-schedule ::ng-deep .inner.item h3{padding:0;margin:0;font-weight:200;font-size:15px;line-height:18px;text-align:center;white-space:nowrap}.nrcl-schedule ::ng-deep .inner.item h2{flex-grow:1;text-align:center;display:flex;justify-content:center;align-items:center}.nrcl-schedule ::ng-deep .inner.item h2.wrap{white-space:wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:0;overflow:hidden}.nrcl-schedule ::ng-deep .inner.item.item-out-of-service{background-color:var(--nrcl-resource-schedule-item-out-of-service-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-rostered{background-color:var(--nrcl-resource-schedule-item-rostered-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScheduleComponent, selector: "nrcl-schedule", inputs: ["provider", "startDate", "weekStart", "dayCount", "menu", "highlightDate"] }, { kind: "directive", type: ScheduleItemDirective, selector: "[nrclScheduleItem]", inputs: ["nrclScheduleItem"] }, { kind: "directive", type: ScheduleRowHeadingDirective, selector: "[nrclScheduleRowHeading]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourceScheduleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nrcl-resource-schedule", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-schedule #schedule\n    [provider]=\"provider\"\n    [startDate]=\"startDate\"\n    [weekStart]=\"weekStart\"\n    [dayCount]=\"dayCount\"\n    [menu]=\"menu\"\n>\n    <ng-content></ng-content>\n\n    <ng-template nrclScheduleRowHeading let-item>\n        <ng-container \n            [ngTemplateOutlet]=\"headerTemplate.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"            \n        ></ng-container>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"rostered\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"out-of-service\" let-data>\n        <h1>OOS</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-duty-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-standby-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-off-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-regular-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-duty-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-standby-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-off-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-regular-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n</nrcl-schedule>\n\n", styles: ["::ng-deep :root{--nrcl-resource-schedule-item-foregroud-color: black;--nrcl-resource-schedule-item-text-shadow: 1px 0px 5px #ffffffa0, -1px 0px 5px #ffffffa0, 0px 1px 5px #ffffffa0, 0px -1px 5px #ffffffa0;--nrcl-resource-schedule-item-regular-day-background-color: #0AA647;--nrcl-resource-schedule-item-off-day-background-color: #d4d2d2;--nrcl-resource-schedule-item-duty-day-background-color: #2f9fe0;--nrcl-resource-schedule-item-standby-day-background-color: #f6cf43;--nrcl-resource-schedule-item-out-of-service-background-color: #f55353;--nrcl-resource-schedule-item-rostered-background-color: #ba9ef7}:host{height:100%;display:block}.nrcl-schedule ::ng-deep .inner.item{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;color:var(--nrcl-resource-schedule-item-foregroud-color)}.nrcl-schedule ::ng-deep .inner.item h1,.nrcl-schedule ::ng-deep .inner.item h2,.nrcl-schedule ::ng-deep .inner.item h3{padding:0;margin:0;font-weight:200;font-size:15px;line-height:18px;text-align:center;white-space:nowrap}.nrcl-schedule ::ng-deep .inner.item h2{flex-grow:1;text-align:center;display:flex;justify-content:center;align-items:center}.nrcl-schedule ::ng-deep .inner.item h2.wrap{white-space:wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:0;overflow:hidden}.nrcl-schedule ::ng-deep .inner.item.item-out-of-service{background-color:var(--nrcl-resource-schedule-item-out-of-service-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-rostered{background-color:var(--nrcl-resource-schedule-item-rostered-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}\n"] }]
+            args: [{ selector: "nrcl-resource-schedule", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-schedule #schedule\n    [provider]=\"provider\"\n    [startDate]=\"startDate\"\n    [highlightDate]=\"highlightDate\"\n    [weekStart]=\"weekStart\"\n    [dayCount]=\"dayCount\"\n    [menu]=\"menu\"\n>\n    <ng-content></ng-content>\n\n    <ng-template nrclScheduleRowHeading let-item>\n        <ng-container \n            [ngTemplateOutlet]=\"headerTemplate.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"            \n        ></ng-container>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"rostered\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"out-of-service\" let-data>\n        <h1>OOS</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-duty-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-standby-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-off-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"available-regular-day\" let-data>\n        <h1>Available</h1>\n        <h2>{{ data.allocationType }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-duty-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Duty Day</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-standby-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>STBY</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-off-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Day Off</h3> -->\n    </ng-template>\n\n    <ng-template nrclScheduleItem=\"assigned-regular-day\" let-data>\n        <!-- <h1></h1> -->\n        <h2 class=\"wrap\">{{ data.assignmentName }}</h2>\n        <h3>{{ data.shiftType }}</h3>\n        <!-- <h3>Reg Day</h3> -->\n    </ng-template>\n</nrcl-schedule>\n\n", styles: ["::ng-deep :root{--nrcl-resource-schedule-item-foregroud-color: black;--nrcl-resource-schedule-item-text-shadow: 1px 0px 5px #ffffffa0, -1px 0px 5px #ffffffa0, 0px 1px 5px #ffffffa0, 0px -1px 5px #ffffffa0;--nrcl-resource-schedule-item-regular-day-background-color: #0AA647;--nrcl-resource-schedule-item-off-day-background-color: #d4d2d2;--nrcl-resource-schedule-item-duty-day-background-color: #2f9fe0;--nrcl-resource-schedule-item-standby-day-background-color: #f6cf43;--nrcl-resource-schedule-item-out-of-service-background-color: #f55353;--nrcl-resource-schedule-item-rostered-background-color: #ba9ef7}:host{height:100%;display:block}.nrcl-schedule ::ng-deep .inner.item{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;color:var(--nrcl-resource-schedule-item-foregroud-color)}.nrcl-schedule ::ng-deep .inner.item h1,.nrcl-schedule ::ng-deep .inner.item h2,.nrcl-schedule ::ng-deep .inner.item h3{padding:0;margin:0;font-weight:200;font-size:15px;line-height:18px;text-align:center;white-space:nowrap}.nrcl-schedule ::ng-deep .inner.item h2{flex-grow:1;text-align:center;display:flex;justify-content:center;align-items:center}.nrcl-schedule ::ng-deep .inner.item h2.wrap{white-space:wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:0;overflow:hidden}.nrcl-schedule ::ng-deep .inner.item.item-out-of-service{background-color:var(--nrcl-resource-schedule-item-out-of-service-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-rostered{background-color:var(--nrcl-resource-schedule-item-rostered-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-available-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-duty-day{background-color:var(--nrcl-resource-schedule-item-duty-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-standby-day{background-color:var(--nrcl-resource-schedule-item-standby-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-off-day{background-color:var(--nrcl-resource-schedule-item-off-day-background-color)}.nrcl-schedule ::ng-deep .inner.item.item-assigned-regular-day{background-color:var(--nrcl-resource-schedule-item-regular-day-background-color)}\n"] }]
         }], propDecorators: { provider: [{
                 type: Input
             }], startDate: [{
                 type: Input
+            }], highlightDate: [{
+                type: Input
             }], weekStart: [{
                 type: Input
             }], dayCount: [{