cps-ui-kit 0.124.0 → 0.126.0
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.
- package/esm2020/lib/components/cps-button-toggle/cps-button-toggle.component.mjs +3 -3
- package/esm2020/lib/components/cps-paginator/cps-paginator.component.mjs +3 -3
- package/esm2020/lib/components/cps-radio-group/cps-radio/cps-radio.component.mjs +3 -3
- package/esm2020/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.mjs +2 -2
- package/esm2020/lib/components/cps-radio-group/cps-radio-group.component.mjs +4 -6
- package/esm2020/lib/components/cps-table/cps-table.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-table/cps-tree-table.component.mjs +3 -3
- package/fesm2015/cps-ui-kit.mjs +14 -17
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +14 -16
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-radio-group/cps-radio/cps-radio.component.d.ts +3 -3
- package/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.d.ts +2 -2
- package/lib/components/cps-radio-group/cps-radio-group.component.d.ts +3 -3
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -3425,7 +3425,7 @@ class CpsRadioButtonComponent {
|
|
|
3425
3425
|
event.preventDefault();
|
|
3426
3426
|
if (this.option.disabled)
|
|
3427
3427
|
return;
|
|
3428
|
-
this.updateValueEvent.emit(
|
|
3428
|
+
this.updateValueEvent.emit(this.option.value);
|
|
3429
3429
|
}
|
|
3430
3430
|
}
|
|
3431
3431
|
CpsRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -3483,11 +3483,9 @@ class CpsRadioGroupComponent {
|
|
|
3483
3483
|
writeValue(value) {
|
|
3484
3484
|
this.value = value;
|
|
3485
3485
|
}
|
|
3486
|
-
updateValueEvent(
|
|
3487
|
-
event.preventDefault();
|
|
3486
|
+
updateValueEvent(value) {
|
|
3488
3487
|
if (this.disabled)
|
|
3489
3488
|
return;
|
|
3490
|
-
const value = event?.target?.value || '';
|
|
3491
3489
|
this._updateValue(value);
|
|
3492
3490
|
}
|
|
3493
3491
|
_updateValue(value) {
|
|
@@ -3504,7 +3502,7 @@ CpsRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
3504
3502
|
provide: CPS_RADIO_GROUP,
|
|
3505
3503
|
useExisting: CpsRadioGroupComponent
|
|
3506
3504
|
}
|
|
3507
|
-
], ngImport: i0, template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-radio-group-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n #contentRef\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <ng-content></ng-content>\n </div>\n\n <div\n *ngIf=\"!contentRef.innerHTML.trim()\"\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <cps-radio-button\n *ngFor=\"let option of options\"\n [option]=\"option\"\n [checked]=\"option.value === value\"\n [groupDisabled]=\"disabled\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n </cps-radio-button>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] });
|
|
3505
|
+
], ngImport: i0, template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-radio-group-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n #contentRef\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <ng-content></ng-content>\n </div>\n\n <div\n *ngIf=\"!contentRef.innerHTML.trim()\"\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <cps-radio-button\n *ngFor=\"let option of options\"\n [option]=\"option\"\n [checked]=\"option.value === value\"\n [groupDisabled]=\"disabled\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n </cps-radio-button>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] });
|
|
3508
3506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
|
|
3509
3507
|
type: Component,
|
|
3510
3508
|
args: [{ standalone: true, imports: [
|
|
@@ -3517,7 +3515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3517
3515
|
provide: CPS_RADIO_GROUP,
|
|
3518
3516
|
useExisting: CpsRadioGroupComponent
|
|
3519
3517
|
}
|
|
3520
|
-
], template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-radio-group-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n #contentRef\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <ng-content></ng-content>\n </div>\n\n <div\n *ngIf=\"!contentRef.innerHTML.trim()\"\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <cps-radio-button\n *ngFor=\"let option of options\"\n [option]=\"option\"\n [checked]=\"option.value === value\"\n [groupDisabled]=\"disabled\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n </cps-radio-button>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"] }]
|
|
3518
|
+
], template: "<div class=\"cps-radio-group\">\n <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n <span>{{ groupLabel }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-radio-group-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n #contentRef\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <ng-content></ng-content>\n </div>\n\n <div\n *ngIf=\"!contentRef.innerHTML.trim()\"\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <cps-radio-button\n *ngFor=\"let option of options\"\n [option]=\"option\"\n [checked]=\"option.value === value\"\n [groupDisabled]=\"disabled\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n </cps-radio-button>\n </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"] }]
|
|
3521
3519
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
3522
3520
|
type: Self
|
|
3523
3521
|
}, {
|
|
@@ -3554,8 +3552,8 @@ class CpsRadioComponent {
|
|
|
3554
3552
|
ngOnInit() {
|
|
3555
3553
|
this.groupDisabled = this.radioGroup?.disabled ?? false;
|
|
3556
3554
|
}
|
|
3557
|
-
updateValueEvent(
|
|
3558
|
-
this.radioGroup?.updateValueEvent(
|
|
3555
|
+
updateValueEvent(value) {
|
|
3556
|
+
this.radioGroup?.updateValueEvent(value);
|
|
3559
3557
|
}
|
|
3560
3558
|
}
|
|
3561
3559
|
CpsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -4117,7 +4115,7 @@ CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4117
4115
|
// eslint-disable-next-line no-use-before-define
|
|
4118
4116
|
deps: [CpsTableComponent]
|
|
4119
4117
|
}
|
|
4120
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4118
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4121
4119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
|
|
4122
4120
|
type: Component,
|
|
4123
4121
|
args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -4141,7 +4139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4141
4139
|
// eslint-disable-next-line no-use-before-define
|
|
4142
4140
|
deps: [CpsTableComponent]
|
|
4143
4141
|
}
|
|
4144
|
-
], template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
4142
|
+
], template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
4145
4143
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
4146
4144
|
type: Input
|
|
4147
4145
|
}], columns: [{
|
|
@@ -4728,7 +4726,7 @@ class CpsButtonToggleComponent {
|
|
|
4728
4726
|
setDisabledState(disabled) { }
|
|
4729
4727
|
}
|
|
4730
4728
|
CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
4731
|
-
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-light);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
|
|
4729
|
+
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-light);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
|
|
4732
4730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
4733
4731
|
type: Component,
|
|
4734
4732
|
args: [{ standalone: true, imports: [
|
|
@@ -4737,7 +4735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4737
4735
|
CpsInfoCircleComponent,
|
|
4738
4736
|
CpsIconComponent,
|
|
4739
4737
|
CpsTooltipDirective
|
|
4740
|
-
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-light);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-light)}\n"] }]
|
|
4738
|
+
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-light);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-light)}\n"] }]
|
|
4741
4739
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
4742
4740
|
type: Self
|
|
4743
4741
|
}, {
|
|
@@ -6061,7 +6059,7 @@ CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
6061
6059
|
// eslint-disable-next-line no-use-before-define
|
|
6062
6060
|
deps: [CpsTreeTableComponent]
|
|
6063
6061
|
}
|
|
6064
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{ 'cps-treetable-loading': loading }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\">\n </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:#f8f4f5}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i1$3.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$3.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i1$3.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i1$3.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i1$3.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6062
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{ 'cps-treetable-loading': loading }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\">\n </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:#f8f4f5}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i1$3.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$3.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i1$3.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i1$3.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i1$3.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6065
6063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
|
|
6066
6064
|
type: Component,
|
|
6067
6065
|
args: [{ selector: 'cps-tree-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -6089,7 +6087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6089
6087
|
// eslint-disable-next-line no-use-before-define
|
|
6090
6088
|
deps: [CpsTreeTableComponent]
|
|
6091
6089
|
}
|
|
6092
|
-
], template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{ 'cps-treetable-loading': loading }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\">\n </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:#f8f4f5}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
6090
|
+
], template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{ 'cps-treetable-loading': loading }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <p-treeTableToggler [rowNode]=\"rowNode\" *ngIf=\"i === 0\">\n </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:#f8f4f5}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
6093
6091
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
6094
6092
|
type: Input
|
|
6095
6093
|
}], columns: [{
|
|
@@ -6584,10 +6582,10 @@ class CpsPaginatorComponent {
|
|
|
6584
6582
|
}
|
|
6585
6583
|
}
|
|
6586
6584
|
CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6587
|
-
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
6585
|
+
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
6588
6586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
|
|
6589
6587
|
type: Component,
|
|
6590
|
-
args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
6588
|
+
args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
6591
6589
|
}], propDecorators: { first: [{
|
|
6592
6590
|
type: Input
|
|
6593
6591
|
}], rows: [{
|