@bcgov/nr-ngx-component-lib 0.0.67 → 0.0.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1388,11 +1388,13 @@ class PaginationBase extends NrclBase {
1388
1388
  return JSON.parse(JSON.stringify(obj));
1389
1389
  }
1390
1390
  onFilterChange(ev) {
1391
+ // console.log('onFilterChange',ev)
1391
1392
  this.filter = ev;
1392
1393
  this._pageConfig.pageNumber = 1;
1393
1394
  this.onPageStateChanged();
1394
1395
  }
1395
1396
  onSortChange(ev) {
1397
+ // console.log('onSortChange',ev)
1396
1398
  if (this._pageConfig.sortActive == ev.active)
1397
1399
  if (this._pageConfig.sortDirection == ev.direction)
1398
1400
  return;
@@ -1402,6 +1404,7 @@ class PaginationBase extends NrclBase {
1402
1404
  this.onPageStateChanged();
1403
1405
  }
1404
1406
  onPageSizeChange(ev) {
1407
+ // console.log('onPageSizeChange',ev)
1405
1408
  if (this._pageConfig.pageSize == ev)
1406
1409
  return;
1407
1410
  this._pageConfig.pageSize = ev;
@@ -1409,12 +1412,14 @@ class PaginationBase extends NrclBase {
1409
1412
  this.onPageStateChanged();
1410
1413
  }
1411
1414
  onPageNumberChange(ev) {
1415
+ // console.log('onPageNumberChange',ev)
1412
1416
  if (this._pageConfig.pageNumber == ev)
1413
1417
  return;
1414
1418
  this._pageConfig.pageNumber = ev;
1415
1419
  this.onPageStateChanged();
1416
1420
  }
1417
1421
  onPageStateChanged() {
1422
+ // console.log('onPageStateChanged')
1418
1423
  return this.refresh()
1419
1424
  .then(() => {
1420
1425
  let state = this.getCurrentPageState();
@@ -1422,7 +1427,7 @@ class PaginationBase extends NrclBase {
1422
1427
  });
1423
1428
  }
1424
1429
  getCurrentPageState() {
1425
- return {
1430
+ let state = {
1426
1431
  filter: this.filter,
1427
1432
  pageConfig: {
1428
1433
  pageSize: this._pageConfig.pageSize,
@@ -1431,8 +1436,11 @@ class PaginationBase extends NrclBase {
1431
1436
  sortDirection: this._pageConfig.sortDirection,
1432
1437
  }
1433
1438
  };
1439
+ // console.log('getCurrentPageState',state)
1440
+ return state;
1434
1441
  }
1435
1442
  setCurrentPageState(state) {
1443
+ // console.log('setCurrentPageState',state)
1436
1444
  this.filter = state.filter;
1437
1445
  this._pageConfig.pageSize = state.pageConfig.pageSize;
1438
1446
  this._pageConfig.pageNumber = state.pageConfig.pageNumber;
@@ -1800,7 +1808,10 @@ class ListAttachmentsComponent extends RowListBase {
1800
1808
  this.DATE_FORMATS = DATE_FORMATS;
1801
1809
  this.columns = [];
1802
1810
  this.sortColumns = [];
1811
+ this.desktopPaginationId = "desktop";
1812
+ this.mobilePaginationId = "mobile";
1803
1813
  }
1814
+ static { this._nextInstance = 0; }
1804
1815
  ngOnChanges(changes) {
1805
1816
  if (changes.canDownload || changes.canDelete || changes.showOrgUnit) {
1806
1817
  this.columns = [
@@ -1831,8 +1842,12 @@ class ListAttachmentsComponent extends RowListBase {
1831
1842
  if (!this.rowListProvider?.getInitialPageState)
1832
1843
  throw Error('no provider for ListAttachmentsComponent.rowListProvider.getInitialPageState');
1833
1844
  let state = this.rowListProvider.getInitialPageState();
1845
+ ListAttachmentsComponent._nextInstance += 1;
1846
+ let inst = state.instance || ('list-attachments-' + ListAttachmentsComponent._nextInstance);
1847
+ this.desktopPaginationId = 'desktop-' + inst;
1848
+ this.mobilePaginationId = 'mobile-' + inst;
1834
1849
  return {
1835
- instance: state.instance,
1850
+ instance: inst,
1836
1851
  filter: {},
1837
1852
  pageConfig: {
1838
1853
  pageSize: 10,
@@ -1869,11 +1884,11 @@ class ListAttachmentsComponent extends RowListBase {
1869
1884
  return this.rowListProvider.deleteItem(item);
1870
1885
  }
1871
1886
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1872
- 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 }); }
1887
+ 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( desktopPaginationId )\"\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]=\"desktopPaginationId\"\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( mobilePaginationId ); 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]=\"mobilePaginationId\"\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 }); }
1873
1888
  }
1874
1889
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListAttachmentsComponent, decorators: [{
1875
1890
  type: Component,
1876
- args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
1891
+ args: [{ selector: "nrcl-list-attachments", changeDetection: ChangeDetectionStrategy.OnPush, 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( desktopPaginationId )\"\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]=\"desktopPaginationId\"\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( mobilePaginationId ); 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]=\"mobilePaginationId\"\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"] }]
1877
1892
  }], propDecorators: { rowListProvider: [{
1878
1893
  type: Input
1879
1894
  }], canDelete: [{
@@ -1893,6 +1908,8 @@ class ListEventHistoryComponent extends RowListBase {
1893
1908
  this.showPagination = false;
1894
1909
  this.isSupplier = false;
1895
1910
  this.noRowsMessage = "No comments have been added.";
1911
+ this.desktopPaginationId = "desktop";
1912
+ this.mobilePaginationId = "mobile";
1896
1913
  this.DATE_FORMATS = DATE_FORMATS;
1897
1914
  this.columns = ['dateTime', 'changedBy', 'type', 'section', 'comment'];
1898
1915
  this.sortColumns = [
@@ -1902,6 +1919,7 @@ class ListEventHistoryComponent extends RowListBase {
1902
1919
  { code: 'section', description: 'Section' },
1903
1920
  ];
1904
1921
  }
1922
+ static { this._nextInstance = 0; }
1905
1923
  fetchRowListPage() {
1906
1924
  if (!this.rowListProvider?.fetchEventHistory)
1907
1925
  throw Error('no provider for ListEventHistoryComponent.rowListProvider.fetchRowListPage');
@@ -1922,8 +1940,12 @@ class ListEventHistoryComponent extends RowListBase {
1922
1940
  if (!this.rowListProvider?.getInitialPageState)
1923
1941
  throw Error('no provider for ListEventHistoryComponent.rowListProvider.getInitialPageState');
1924
1942
  let state = this.rowListProvider.getInitialPageState();
1943
+ ListEventHistoryComponent._nextInstance += 1;
1944
+ let inst = state.instance || ('list-event-history-' + ListEventHistoryComponent._nextInstance);
1945
+ this.desktopPaginationId = 'desktop-' + inst;
1946
+ this.mobilePaginationId = 'mobile-' + inst;
1925
1947
  return {
1926
- instance: state.instance,
1948
+ instance: inst,
1927
1949
  filter: {},
1928
1950
  pageConfig: {
1929
1951
  pageSize: 20,
@@ -1935,11 +1957,11 @@ class ListEventHistoryComponent extends RowListBase {
1935
1957
  };
1936
1958
  }
1937
1959
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1938
- 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 }); }
1960
+ 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( desktopPaginationId )\"\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]=\"desktopPaginationId\"\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( mobilePaginationId ); 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]=\"mobilePaginationId\"\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 }); }
1939
1961
  }
1940
1962
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEventHistoryComponent, decorators: [{
1941
1963
  type: Component,
1942
- args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
1964
+ args: [{ selector: "nrcl-list-event-history", changeDetection: ChangeDetectionStrategy.OnPush, 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( desktopPaginationId )\"\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]=\"desktopPaginationId\"\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( mobilePaginationId ); 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]=\"mobilePaginationId\"\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"] }]
1943
1965
  }], propDecorators: { rowListProvider: [{
1944
1966
  type: Input
1945
1967
  }], canDelete: [{
@@ -2441,6 +2463,8 @@ class ScheduleComponent extends RowListBase {
2441
2463
  super(...arguments);
2442
2464
  this.weekStart = 0;
2443
2465
  this.hover = true;
2466
+ this.pagination = true;
2467
+ this.heading = true;
2444
2468
  this._days = [];
2445
2469
  this._weeks = [];
2446
2470
  this._templates = [];
@@ -2468,6 +2492,11 @@ class ScheduleComponent extends RowListBase {
2468
2492
  let rows = this.provider.parseSchedule(res);
2469
2493
  return this.makeRows(rows);
2470
2494
  }
2495
+ parseTotalRowCount(res) {
2496
+ if (!this.provider?.parseTotalRowCount)
2497
+ return super.parseTotalRowCount(res);
2498
+ return this.provider.parseTotalRowCount(res);
2499
+ }
2471
2500
  getInitialPageState() {
2472
2501
  if (!this.provider?.getInitialPageState)
2473
2502
  throw Error('ScheduleComponent.provider.getInitialPageState not set');
@@ -2476,7 +2505,7 @@ class ScheduleComponent extends RowListBase {
2476
2505
  completedRowListPage() {
2477
2506
  if (!this.provider?.completedLoadSchedule)
2478
2507
  throw Error('ScheduleComponent.provider.completedRowListPage not set');
2479
- return this.provider.completedLoadSchedule(super.completedRowListPage);
2508
+ return this.provider.completedLoadSchedule(() => { return super.completedRowListPage(); });
2480
2509
  }
2481
2510
  onSamePageFilterChange(ev) {
2482
2511
  this.filter = ev;
@@ -2541,13 +2570,13 @@ class ScheduleComponent extends RowListBase {
2541
2570
  }) || [];
2542
2571
  }
2543
2572
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScheduleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2544
- 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", hover: "hover", 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 [class.hover]=\"hover\"\n >\n <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n [class]=\"'item-' + item.name\" \n matRipple\n [matRippleDisabled]=\"!hover\"\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: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" }] }); }
2573
+ 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", hover: "hover", pagination: "pagination", heading: "heading", 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 [class.heading]=\"heading\"\n >\n @if ( heading ) {\n <div class=\"upper-left\">\n <ng-content></ng-content>\n </div>\n }\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 @if ( heading ) {\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\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 [class.hover]=\"hover\"\n >\n <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n [class]=\"'item-' + item.name\" \n matRipple\n [matRippleDisabled]=\"!hover\"\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\n@if ( rows?.length > 0 && pagination ) {\n <nrcl-gap/>\n}\n\n@if ( pagination ) {\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\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:repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule.heading{grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width))}:host .schedule.heading .upper-left{grid-row:1/span 2;grid-column:1;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.heading .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule.heading .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.heading .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.weeks>*:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row.days>*:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}: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.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:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item.hover: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: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" }] }); }
2545
2574
  }
2546
2575
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScheduleComponent, decorators: [{
2547
2576
  type: Component,
2548
2577
  args: [{ selector: 'nrcl-schedule', host: {
2549
2578
  '[style.--nrcl-schedule-day-count]': 'this.dayCount'
2550
- }, 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 [class.hover]=\"hover\"\n >\n <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n [class]=\"'item-' + item.name\" \n matRipple\n [matRippleDisabled]=\"!hover\"\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: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"] }]
2579
+ }, template: "@if ( rows?.length > 0 ) {\n <div class=\"schedule\"\n [class.heading]=\"heading\"\n >\n @if ( heading ) {\n <div class=\"upper-left\">\n <ng-content></ng-content>\n </div>\n }\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 @if ( heading ) {\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\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 [class.hover]=\"hover\"\n >\n <div class=\"inner item\" #itemMenu=\"matMenuTrigger\"\n [class]=\"'item-' + item.name\" \n matRipple\n [matRippleDisabled]=\"!hover\"\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\n@if ( rows?.length > 0 && pagination ) {\n <nrcl-gap/>\n}\n\n@if ( pagination ) {\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\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:repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width));overflow:auto;height:100%;flex-grow:1}:host .schedule.heading{grid-template-columns:var(--nrcl-schedule-heading-width) repeat(var(--nrcl-schedule-day-count),var(--nrcl-schedule-item-width))}:host .schedule.heading .upper-left{grid-row:1/span 2;grid-column:1;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.heading .row .outer.heading{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule.heading .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.heading .row.items .outer.heading .heading{flex-grow:1;cursor:default;height:100%}:host .schedule .row{display:contents}:host .schedule .row.weeks>*{height:var(--nrcl-schedule-row-weeks-height)}:host .schedule .row.weeks>*:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.days>*{height:var(--nrcl-schedule-row-days-height)}:host .schedule .row.days>*:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}: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.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:first-child{border-left:1px solid var(--nrcl-schedule-border-color)}:host .schedule .row.items .outer.item.hover: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: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"] }]
2551
2580
  }], propDecorators: { provider: [{
2552
2581
  type: Input
2553
2582
  }], startDate: [{
@@ -2562,6 +2591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2562
2591
  type: Input
2563
2592
  }], hover: [{
2564
2593
  type: Input
2594
+ }], pagination: [{
2595
+ type: Input
2596
+ }], heading: [{
2597
+ type: Input
2565
2598
  }], highlightDate: [{
2566
2599
  type: Input
2567
2600
  }], itemTemplates: [{
@@ -2585,17 +2618,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2585
2618
  selector: '[nrclResourceScheduleRowHeading]'
2586
2619
  }]
2587
2620
  }], ctorParameters: () => [{ type: i0.TemplateRef }] });
2588
- class ResourceScheduleComponent {
2621
+ class ResourceScheduleComponent extends NrclBase {
2589
2622
  constructor() {
2623
+ super(...arguments);
2590
2624
  this.weekStart = 0;
2591
2625
  this.hover = true;
2626
+ this.pagination = true;
2627
+ this.heading = true;
2592
2628
  }
2593
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourceScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2594
- 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", hover: "hover" }, 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 [hover]=\"hover\"\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", "hover", "highlightDate"] }, { kind: "directive", type: ScheduleItemDirective, selector: "[nrclScheduleItem]", inputs: ["nrclScheduleItem"] }, { kind: "directive", type: ScheduleRowHeadingDirective, selector: "[nrclScheduleRowHeading]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2629
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourceScheduleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2630
+ 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", hover: "hover", pagination: "pagination", heading: "heading" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ResourceScheduleRowHeadingDirective, descendants: true }], viewQueries: [{ propertyName: "scheduleComponent", first: true, predicate: ScheduleComponent, descendants: true }], usesInheritance: 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 [hover]=\"hover\"\n [pagination]=\"pagination\"\n [heading]=\"heading\"\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", "hover", "pagination", "heading", "highlightDate"] }, { kind: "directive", type: ScheduleItemDirective, selector: "[nrclScheduleItem]", inputs: ["nrclScheduleItem"] }, { kind: "directive", type: ScheduleRowHeadingDirective, selector: "[nrclScheduleRowHeading]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2595
2631
  }
2596
2632
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResourceScheduleComponent, decorators: [{
2597
2633
  type: Component,
2598
- 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 [hover]=\"hover\"\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"] }]
2634
+ 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 [hover]=\"hover\"\n [pagination]=\"pagination\"\n [heading]=\"heading\"\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"] }]
2599
2635
  }], propDecorators: { provider: [{
2600
2636
  type: Input
2601
2637
  }], startDate: [{
@@ -2611,6 +2647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2611
2647
  type: Input
2612
2648
  }], hover: [{
2613
2649
  type: Input
2650
+ }], pagination: [{
2651
+ type: Input
2652
+ }], heading: [{
2653
+ type: Input
2614
2654
  }], scheduleComponent: [{
2615
2655
  type: ViewChild,
2616
2656
  args: [ScheduleComponent]