cps-ui-kit 18.2.0 → 18.4.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/esm2022/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +3 -3
- package/esm2022/lib/components/cps-table/cps-table.component.mjs +23 -4
- package/esm2022/lib/components/cps-table/directives/cps-table-column-resizable.directive.mjs +22 -0
- package/esm2022/lib/components/cps-tree-table/cps-tree-table.component.mjs +26 -4
- package/esm2022/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.mjs +22 -0
- package/esm2022/lib/components/cps-tree-table/directives/internal/tree-table-unsort.directive.mjs +39 -23
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/cps-ui-kit.mjs +126 -33
- package/fesm2022/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-table/cps-table.component.d.ts +14 -1
- package/lib/components/cps-table/directives/cps-table-column-resizable.directive.d.ts +15 -0
- package/lib/components/cps-tree-table/cps-tree-table.component.d.ts +15 -1
- package/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.d.ts +15 -0
- package/lib/components/cps-tree-table/directives/internal/tree-table-unsort.directive.d.ts +6 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
package/fesm2022/cps-ui-kit.mjs
CHANGED
|
@@ -19,9 +19,9 @@ import * as i3$1 from 'primeng/tree';
|
|
|
19
19
|
import { TreeModule } from 'primeng/tree';
|
|
20
20
|
import { Subject, takeUntil, debounceTime, distinctUntilChanged, fromEvent, Subscription, take, catchError, of } from 'rxjs';
|
|
21
21
|
import * as i1$3 from 'primeng/table';
|
|
22
|
-
import { SortableColumn, Table, TableService, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
|
|
22
|
+
import { SortableColumn, Table, ResizableColumn, TableService, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
|
|
23
23
|
import * as i2$1 from 'primeng/treetable';
|
|
24
|
-
import { TTSortableColumn, TTHeaderCheckbox, TTCheckbox, TreeTableToggler, TreeTableService, TreeTable, TreeTableModule } from 'primeng/treetable';
|
|
24
|
+
import { TTSortableColumn, TTHeaderCheckbox, TTCheckbox, TreeTableToggler, TTResizableColumn, TreeTableService, TreeTable, TreeTableModule } from 'primeng/treetable';
|
|
25
25
|
import * as i2$2 from 'primeng/calendar';
|
|
26
26
|
import { CalendarModule } from 'primeng/calendar';
|
|
27
27
|
import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft';
|
|
@@ -3965,7 +3965,7 @@ class CpsAutocompleteComponent {
|
|
|
3965
3965
|
}, 0);
|
|
3966
3966
|
}
|
|
3967
3967
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3968
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-autocomplete-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\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n else autocompleteInputTemplate\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n <div\n *ngIf=\"loading && showLoadingMessage\"\n class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n <div\n *ngIf=\"\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n \"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll && !loading\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n <ng-container *ngFor=\"let item of filteredOptions\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"virtualScroll && !loading\">\n <p-virtualScroller\n #virtualList\n [value]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div\n *ngIf=\"!error && !externalError && !hideDetails\"\n class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div\n *ngIf=\"(error || externalError) && !hideDetails\"\n class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
3968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-autocomplete-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\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n else autocompleteInputTemplate\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n <div\n *ngIf=\"loading && showLoadingMessage\"\n class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n <div\n *ngIf=\"\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n \"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll && !loading\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n <ng-container *ngFor=\"let item of filteredOptions\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"virtualScroll && !loading\">\n <p-virtualScroller\n #virtualList\n [value]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div\n *ngIf=\"!error && !externalError && !hideDetails\"\n class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div\n *ngIf=\"(error || externalError) && !hideDetails\"\n class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
3969
3969
|
}
|
|
3970
3970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
3971
3971
|
type: Component,
|
|
@@ -3980,7 +3980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
3980
3980
|
CheckOptionSelectedPipe,
|
|
3981
3981
|
VirtualScrollerModule,
|
|
3982
3982
|
CpsMenuComponent
|
|
3983
|
-
], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-autocomplete-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\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n else autocompleteInputTemplate\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n <div\n *ngIf=\"loading && showLoadingMessage\"\n class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n <div\n *ngIf=\"\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n \"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll && !loading\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n <ng-container *ngFor=\"let item of filteredOptions\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"virtualScroll && !loading\">\n <p-virtualScroller\n #virtualList\n [value]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div\n *ngIf=\"!error && !externalError && !hideDetails\"\n class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div\n *ngIf=\"(error || externalError) && !hideDetails\"\n class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
|
|
3983
|
+
], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-autocomplete-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\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n else autocompleteInputTemplate\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n <div\n *ngIf=\"loading && showLoadingMessage\"\n class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n <div\n *ngIf=\"\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n \"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll && !loading\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n <ng-container *ngFor=\"let item of filteredOptions\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"virtualScroll && !loading\">\n <p-virtualScroller\n #virtualList\n [value]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div\n *ngIf=\"!error && !externalError && !hideDetails\"\n class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div\n *ngIf=\"(error || externalError) && !hideDetails\"\n class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
|
|
3984
3984
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
3985
3985
|
type: Self
|
|
3986
3986
|
}, {
|
|
@@ -6862,6 +6862,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
6862
6862
|
}]
|
|
6863
6863
|
}] });
|
|
6864
6864
|
|
|
6865
|
+
/**
|
|
6866
|
+
* CpsTableColumnResizableDirective is a directive to enable column resizing in a table.
|
|
6867
|
+
* @group Directives
|
|
6868
|
+
*/
|
|
6869
|
+
class CpsTableColumnResizableDirective extends ResizableColumn {
|
|
6870
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTableColumnResizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6871
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CpsTableColumnResizableDirective, isStandalone: true, selector: "[cpsTColResizable]", inputs: { pResizableColumnDisabled: ["cpsTColResizableDisabled", "pResizableColumnDisabled"] }, usesInheritance: true, ngImport: i0 }); }
|
|
6872
|
+
}
|
|
6873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTableColumnResizableDirective, decorators: [{
|
|
6874
|
+
type: Directive,
|
|
6875
|
+
args: [{
|
|
6876
|
+
standalone: true,
|
|
6877
|
+
selector: '[cpsTColResizable]'
|
|
6878
|
+
}]
|
|
6879
|
+
}], propDecorators: { pResizableColumnDisabled: [{
|
|
6880
|
+
type: Input,
|
|
6881
|
+
args: ['cpsTColResizableDisabled']
|
|
6882
|
+
}] } });
|
|
6883
|
+
|
|
6865
6884
|
// import jsPDF from 'jspdf';
|
|
6866
6885
|
// import 'jspdf-autotable';
|
|
6867
6886
|
function tableFactory(tableComponent) {
|
|
@@ -7230,6 +7249,19 @@ class CpsTableComponent {
|
|
|
7230
7249
|
* @group Props
|
|
7231
7250
|
*/
|
|
7232
7251
|
this.renderDataAsHTML = false;
|
|
7252
|
+
/**
|
|
7253
|
+
* Determines whether columns are resizable.
|
|
7254
|
+
* In case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements.
|
|
7255
|
+
* @group Props
|
|
7256
|
+
*/
|
|
7257
|
+
this.resizableColumns = false;
|
|
7258
|
+
/**
|
|
7259
|
+
* Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).
|
|
7260
|
+
* Note: This setting only takes effect if 'resizableColumns' is true.
|
|
7261
|
+
*
|
|
7262
|
+
* @group Props
|
|
7263
|
+
*/
|
|
7264
|
+
this.columnResizeMode = 'fit';
|
|
7233
7265
|
/**
|
|
7234
7266
|
* Callback to invoke on selection changed. Returns selected rows.
|
|
7235
7267
|
* @param {any[]} any[] - selected rows.
|
|
@@ -7602,7 +7634,7 @@ class CpsTableComponent {
|
|
|
7602
7634
|
});
|
|
7603
7635
|
}
|
|
7604
7636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.3", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", renderDataAsHTML: "renderDataAsHTML", data: "data" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", customSortFunction: "customSortFunction" }, providers: [
|
|
7637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.3", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", renderDataAsHTML: "renderDataAsHTML", data: "data", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", customSortFunction: "customSortFunction" }, providers: [
|
|
7606
7638
|
TableService,
|
|
7607
7639
|
{
|
|
7608
7640
|
provide: Table,
|
|
@@ -7610,7 +7642,7 @@ class CpsTableComponent {
|
|
|
7610
7642
|
// eslint-disable-next-line no-use-before-define
|
|
7611
7643
|
deps: [CpsTableComponent]
|
|
7612
7644
|
}
|
|
7613
|
-
], 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 }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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 @if (renderDataAsHTML) {\n <td\n *ngFor=\"let col of columns\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n } @else {\n <td *ngFor=\"let col of columns\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </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:unset;background:unset;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 .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-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:#fff;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:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:#fff;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:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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;box-shadow:unset}: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:#fff}: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;-moz-user-select:none;-ms-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)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["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", "borderRadius", "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", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7645
|
+
], 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 }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\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 [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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\n style=\"width: 3rem\"\n *ngIf=\"rowExpansionTemplate\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n <th\n style=\"width: 3rem\"\n *ngIf=\"reorderableRows\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n <th\n style=\"width: 4rem\"\n *ngIf=\"selectable\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></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 @if (renderDataAsHTML) {\n <td\n *ngFor=\"let col of columns\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n } @else {\n <td *ngFor=\"let col of columns\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </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-column-resizer-helper{background:var(--cps-color-calm)}: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:unset;background:unset;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 .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-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:#fff;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:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:#fff;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:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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;box-shadow:unset}: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:#fff}: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;-moz-user-select:none;-ms-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)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["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", "borderRadius", "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", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7614
7646
|
}
|
|
7615
7647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTableComponent, decorators: [{
|
|
7616
7648
|
type: Component,
|
|
@@ -7628,6 +7660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
7628
7660
|
TableRowMenuComponent,
|
|
7629
7661
|
CpsTableColumnSortableDirective,
|
|
7630
7662
|
CpsTableColumnFilterDirective,
|
|
7663
|
+
CpsTableColumnResizableDirective,
|
|
7631
7664
|
CpsTableDetectFilterTypePipe
|
|
7632
7665
|
], providers: [
|
|
7633
7666
|
TableService,
|
|
@@ -7637,7 +7670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
7637
7670
|
// eslint-disable-next-line no-use-before-define
|
|
7638
7671
|
deps: [CpsTableComponent]
|
|
7639
7672
|
}
|
|
7640
|
-
], template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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 @if (renderDataAsHTML) {\n <td\n *ngFor=\"let col of columns\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n } @else {\n <td *ngFor=\"let col of columns\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </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:unset;background:unset;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 .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-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:#fff;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:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:#fff;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:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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;box-shadow:unset}: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:#fff}: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;-moz-user-select:none;-ms-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)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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"] }]
|
|
7673
|
+
], template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\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 [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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\n style=\"width: 3rem\"\n *ngIf=\"rowExpansionTemplate\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n <th\n style=\"width: 3rem\"\n *ngIf=\"reorderableRows\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n <th\n style=\"width: 4rem\"\n *ngIf=\"selectable\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColSortable]=\"col[colFieldName]\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></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 @if (renderDataAsHTML) {\n <td\n *ngFor=\"let col of columns\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n } @else {\n <td *ngFor=\"let col of columns\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </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-column-resizer-helper{background:var(--cps-color-calm)}: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:unset;background:unset;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 .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-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:#fff;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:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:#fff;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:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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;box-shadow:unset}: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:#fff}: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;-moz-user-select:none;-ms-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)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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"] }]
|
|
7641
7674
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
7642
7675
|
type: Inject,
|
|
7643
7676
|
args: [DOCUMENT]
|
|
@@ -7781,6 +7814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
7781
7814
|
type: Input
|
|
7782
7815
|
}], data: [{
|
|
7783
7816
|
type: Input
|
|
7817
|
+
}], resizableColumns: [{
|
|
7818
|
+
type: Input
|
|
7819
|
+
}], columnResizeMode: [{
|
|
7820
|
+
type: Input
|
|
7784
7821
|
}], rowsSelected: [{
|
|
7785
7822
|
type: Output
|
|
7786
7823
|
}], selectedRowIndexes: [{
|
|
@@ -7949,6 +7986,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
7949
7986
|
class TreeTableUnsortDirective {
|
|
7950
7987
|
constructor(pTreeTable) {
|
|
7951
7988
|
this.pTreeTable = pTreeTable;
|
|
7989
|
+
this.sort(pTreeTable);
|
|
7990
|
+
this.sortNodes(pTreeTable);
|
|
7991
|
+
this.sortMultipleNodes(pTreeTable);
|
|
7992
|
+
this.multisortField(pTreeTable);
|
|
7993
|
+
this.filter(pTreeTable);
|
|
7994
|
+
this.findFilteredNodes(pTreeTable);
|
|
7995
|
+
}
|
|
7996
|
+
sort(pTreeTable) {
|
|
7952
7997
|
pTreeTable.sort = (event) => {
|
|
7953
7998
|
if (pTreeTable.sortMode === 'single') {
|
|
7954
7999
|
if (pTreeTable.sortField === event.field &&
|
|
@@ -7997,6 +8042,8 @@ class TreeTableUnsortDirective {
|
|
|
7997
8042
|
pTreeTable.multiSortMeta = [];
|
|
7998
8043
|
}
|
|
7999
8044
|
};
|
|
8045
|
+
}
|
|
8046
|
+
sortNodes(pTreeTable) {
|
|
8000
8047
|
pTreeTable.sortNodes = (nodes) => {
|
|
8001
8048
|
if (!nodes || nodes.length === 0) {
|
|
8002
8049
|
return;
|
|
@@ -8038,6 +8085,8 @@ class TreeTableUnsortDirective {
|
|
|
8038
8085
|
pTreeTable.sortNodes(node.children);
|
|
8039
8086
|
}
|
|
8040
8087
|
};
|
|
8088
|
+
}
|
|
8089
|
+
sortMultipleNodes(pTreeTable) {
|
|
8041
8090
|
pTreeTable.sortMultipleNodes = (nodes) => {
|
|
8042
8091
|
if (!nodes || nodes.length === 0) {
|
|
8043
8092
|
return;
|
|
@@ -8060,6 +8109,8 @@ class TreeTableUnsortDirective {
|
|
|
8060
8109
|
pTreeTable.sortMultipleNodes(node.children);
|
|
8061
8110
|
}
|
|
8062
8111
|
};
|
|
8112
|
+
}
|
|
8113
|
+
multisortField(pTreeTable) {
|
|
8063
8114
|
pTreeTable.multisortField = (node1, node2, multiSortMeta, index) => {
|
|
8064
8115
|
if (ObjectUtils.isEmpty(pTreeTable.multiSortMeta) ||
|
|
8065
8116
|
ObjectUtils.isEmpty(multiSortMeta[index])) {
|
|
@@ -8095,6 +8146,8 @@ class TreeTableUnsortDirective {
|
|
|
8095
8146
|
}
|
|
8096
8147
|
return multiSortMeta[index].order * result;
|
|
8097
8148
|
};
|
|
8149
|
+
}
|
|
8150
|
+
filter(pTreeTable) {
|
|
8098
8151
|
pTreeTable._filter = () => {
|
|
8099
8152
|
if (pTreeTable.lazy) {
|
|
8100
8153
|
pTreeTable.onLazyLoad.emit(pTreeTable.createLazyLoadMetadata());
|
|
@@ -8161,28 +8214,26 @@ class TreeTableUnsortDirective {
|
|
|
8161
8214
|
if (pTreeTable.filters.global &&
|
|
8162
8215
|
!globalMatch &&
|
|
8163
8216
|
globalFilterFieldsArray) {
|
|
8164
|
-
|
|
8165
|
-
|
|
8166
|
-
|
|
8167
|
-
|
|
8168
|
-
|
|
8169
|
-
|
|
8170
|
-
|
|
8171
|
-
|
|
8172
|
-
|
|
8173
|
-
|
|
8174
|
-
|
|
8175
|
-
|
|
8176
|
-
|
|
8177
|
-
|
|
8178
|
-
|
|
8179
|
-
|
|
8180
|
-
(
|
|
8181
|
-
|
|
8182
|
-
|
|
8183
|
-
|
|
8184
|
-
copyNode = copyNodeForGlobal;
|
|
8185
|
-
}
|
|
8217
|
+
const copyNodeForGlobal = { ...copyNode };
|
|
8218
|
+
const filterField = undefined;
|
|
8219
|
+
const filterValue = pTreeTable.filters.global.value;
|
|
8220
|
+
const filterConstraint = pTreeTable.filterService.filters[pTreeTable.filters.global
|
|
8221
|
+
.matchMode];
|
|
8222
|
+
paramsWithoutNode = {
|
|
8223
|
+
filterField,
|
|
8224
|
+
filterValue,
|
|
8225
|
+
filterConstraint,
|
|
8226
|
+
isStrictMode,
|
|
8227
|
+
globalFilterFieldsArray
|
|
8228
|
+
};
|
|
8229
|
+
if ((isStrictMode &&
|
|
8230
|
+
(pTreeTable.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) ||
|
|
8231
|
+
pTreeTable.isFilterMatched(copyNodeForGlobal, paramsWithoutNode))) ||
|
|
8232
|
+
(!isStrictMode &&
|
|
8233
|
+
(pTreeTable.isFilterMatched(copyNodeForGlobal, paramsWithoutNode) ||
|
|
8234
|
+
pTreeTable.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode)))) {
|
|
8235
|
+
globalMatch = true;
|
|
8236
|
+
copyNode = copyNodeForGlobal;
|
|
8186
8237
|
}
|
|
8187
8238
|
}
|
|
8188
8239
|
let matches = localMatch;
|
|
@@ -8224,6 +8275,8 @@ class TreeTableUnsortDirective {
|
|
|
8224
8275
|
pTreeTable.resetScrollTop();
|
|
8225
8276
|
}
|
|
8226
8277
|
};
|
|
8278
|
+
}
|
|
8279
|
+
findFilteredNodes(pTreeTable) {
|
|
8227
8280
|
pTreeTable.findFilteredNodes = (node, paramsWithoutNode) => {
|
|
8228
8281
|
if (node) {
|
|
8229
8282
|
let matched = false;
|
|
@@ -8584,6 +8637,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
8584
8637
|
}]
|
|
8585
8638
|
}] });
|
|
8586
8639
|
|
|
8640
|
+
/**
|
|
8641
|
+
* CpsTreeTableColumnResizableDirective is a directive to enable column resizing in a treetable.
|
|
8642
|
+
* @group Directives
|
|
8643
|
+
*/
|
|
8644
|
+
class CpsTreeTableColumnResizableDirective extends TTResizableColumn {
|
|
8645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTreeTableColumnResizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8646
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CpsTreeTableColumnResizableDirective, isStandalone: true, selector: "[cpsTTColResizable]", inputs: { ttResizableColumnDisabled: ["cpsTTColResizableDisabled", "ttResizableColumnDisabled"] }, usesInheritance: true, ngImport: i0 }); }
|
|
8647
|
+
}
|
|
8648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTreeTableColumnResizableDirective, decorators: [{
|
|
8649
|
+
type: Directive,
|
|
8650
|
+
args: [{
|
|
8651
|
+
standalone: true,
|
|
8652
|
+
selector: '[cpsTTColResizable]'
|
|
8653
|
+
}]
|
|
8654
|
+
}], propDecorators: { ttResizableColumnDisabled: [{
|
|
8655
|
+
type: Input,
|
|
8656
|
+
args: ['cpsTTColResizableDisabled']
|
|
8657
|
+
}] } });
|
|
8658
|
+
|
|
8587
8659
|
function treeTableFactory(tableComponent) {
|
|
8588
8660
|
return tableComponent.primengTreeTable;
|
|
8589
8661
|
}
|
|
@@ -8949,6 +9021,19 @@ class CpsTreeTableComponent {
|
|
|
8949
9021
|
* @group Props
|
|
8950
9022
|
*/
|
|
8951
9023
|
this.renderDataAsHTML = false;
|
|
9024
|
+
/**
|
|
9025
|
+
* Determines whether columns are resizable.
|
|
9026
|
+
* In case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements.
|
|
9027
|
+
* @group Props
|
|
9028
|
+
*/
|
|
9029
|
+
this.resizableColumns = false;
|
|
9030
|
+
/**
|
|
9031
|
+
* Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).
|
|
9032
|
+
* Note: This setting only takes effect if 'resizableColumns' is true.
|
|
9033
|
+
*
|
|
9034
|
+
* @group Props
|
|
9035
|
+
*/
|
|
9036
|
+
this.columnResizeMode = 'fit';
|
|
8952
9037
|
/**
|
|
8953
9038
|
* Callback to invoke on selected rows change.
|
|
8954
9039
|
* @param {any[]} any[] - selected rows.
|
|
@@ -9572,7 +9657,7 @@ class CpsTreeTableComponent {
|
|
|
9572
9657
|
this.rowsSelected.emit(selection);
|
|
9573
9658
|
}
|
|
9574
9659
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.3", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemHeight: "virtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", renderDataAsHTML: "renderDataAsHTML", data: "data" }, outputs: { rowsSelected: "rowsSelected", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
|
|
9660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.3", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemHeight: "virtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", renderDataAsHTML: "renderDataAsHTML", data: "data", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode" }, outputs: { rowsSelected: "rowsSelected", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
|
|
9576
9661
|
TreeTableService,
|
|
9577
9662
|
{
|
|
9578
9663
|
provide: TreeTable,
|
|
@@ -9580,7 +9665,7 @@ class CpsTreeTableComponent {
|
|
|
9580
9665
|
// eslint-disable-next-line no-use-before-define
|
|
9581
9666
|
deps: [CpsTreeTableComponent]
|
|
9582
9667
|
}
|
|
9583
|
-
], 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]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\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=\"deepEquals\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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 *ngIf=\"selectable\" cpsTTHdrSelectable></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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n class=\"cps-treetable-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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 [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></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 @if (renderDataAsHTML) {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td\n *ngIf=\"i === 0\"\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n <td *ngIf=\"i > 0\" [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n </ng-container>\n } @else {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n <td *ngIf=\"i > 0\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n </ng-container>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\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;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}: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:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}: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-auto-layout table{table-layout:auto}: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:focus{outline:0 none;outline-offset:0;box-shadow:unset}: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;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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:#fff}: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:unset;background:unset;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:#fff;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:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}: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-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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:var(--cps-color-highlight-hover)}: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 .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(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!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:#fff;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:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { 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", "borderRadius", "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", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9668
|
+
], 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: "colgroupTemplate", first: true, predicate: ["colgroup"], 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]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\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=\"deepEquals\"\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 [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\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 @if (colgroupTemplate) {\n <ng-template pTemplate=\"colgroup\">\n <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n </ng-template>\n }\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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\n *ngIf=\"selectable\"\n cpsTTHdrSelectable\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n class=\"cps-treetable-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></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 [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></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 @if (renderDataAsHTML) {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td\n *ngIf=\"i === 0\"\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n <td *ngIf=\"i > 0\" [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n </ng-container>\n } @else {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n <td *ngIf=\"i > 0\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n </ng-container>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\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;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}: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:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}: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-auto-layout table{table-layout:auto}: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:focus{outline:0 none;outline-offset:0;box-shadow:unset}: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;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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:#fff}: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:unset;background:unset;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:#fff;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:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}: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-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm)}: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 .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(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!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:#fff;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:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "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", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { 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", "borderRadius", "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", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9584
9669
|
}
|
|
9585
9670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
|
|
9586
9671
|
type: Component,
|
|
@@ -9603,6 +9688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
9603
9688
|
CpsTreeTableHeaderSelectableDirective,
|
|
9604
9689
|
CpsTreeTableRowSelectableDirective,
|
|
9605
9690
|
CpsTreetableRowTogglerDirective,
|
|
9691
|
+
CpsTreeTableColumnResizableDirective,
|
|
9606
9692
|
TreeTableUnsortDirective,
|
|
9607
9693
|
TableRowMenuComponent,
|
|
9608
9694
|
CpsTreeTableDetectFilterTypePipe
|
|
@@ -9614,7 +9700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
9614
9700
|
// eslint-disable-next-line no-use-before-define
|
|
9615
9701
|
deps: [CpsTreeTableComponent]
|
|
9616
9702
|
}
|
|
9617
|
-
], template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\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=\"deepEquals\"\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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 *ngIf=\"selectable\" cpsTTHdrSelectable></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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n class=\"cps-treetable-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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 [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></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 @if (renderDataAsHTML) {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td\n *ngIf=\"i === 0\"\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n <td *ngIf=\"i > 0\" [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n </ng-container>\n } @else {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n <td *ngIf=\"i > 0\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n </ng-container>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\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;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}: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:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}: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-auto-layout table{table-layout:auto}: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:focus{outline:0 none;outline-offset:0;box-shadow:unset}: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;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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:#fff}: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:unset;background:unset;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:#fff;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:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}: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-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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:var(--cps-color-highlight-hover)}: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 .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(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!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:#fff;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:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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"] }]
|
|
9703
|
+
], template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\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=\"deepEquals\"\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 [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\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 @if (colgroupTemplate) {\n <ng-template pTemplate=\"colgroup\">\n <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n </ng-template>\n }\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 [icon]=\"additionalBtnOnSelectIcon\"\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 [icon]=\"actionBtnIcon\"\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\n *ngIf=\"selectable\"\n cpsTTHdrSelectable\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></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 @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n @if (filterableByColumns) {\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n } @else {\n <th\n *ngFor=\"let col of columns\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n </ng-container>\n </ng-container>\n <th\n class=\"cps-treetable-row-menu-cell\"\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></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 [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></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 @if (renderDataAsHTML) {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td\n *ngIf=\"i === 0\"\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n <td *ngIf=\"i > 0\" [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n </ng-container>\n } @else {\n <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n <td *ngIf=\"i > 0\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n </ng-container>\n }\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\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;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}: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:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;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:var(--cps-color-highlight-active)!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:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}: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-auto-layout table{table-layout:auto}: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:focus{outline:0 none;outline-offset:0;box-shadow:unset}: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;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px 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;height:unset}: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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}: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:#fff}: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:unset;background:unset;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:#fff;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:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}: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-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}: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:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm)}: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 .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(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!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:#fff;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:#fff}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.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"] }]
|
|
9618
9704
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
9619
9705
|
type: Inject,
|
|
9620
9706
|
args: [DOCUMENT]
|
|
@@ -9754,6 +9840,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
9754
9840
|
type: Input
|
|
9755
9841
|
}], data: [{
|
|
9756
9842
|
type: Input
|
|
9843
|
+
}], resizableColumns: [{
|
|
9844
|
+
type: Input
|
|
9845
|
+
}], columnResizeMode: [{
|
|
9846
|
+
type: Input
|
|
9757
9847
|
}], rowsSelected: [{
|
|
9758
9848
|
type: Output
|
|
9759
9849
|
}], actionBtnClicked: [{
|
|
@@ -9798,6 +9888,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
9798
9888
|
}], bodyTemplate: [{
|
|
9799
9889
|
type: ContentChild,
|
|
9800
9890
|
args: ['body', { static: false }]
|
|
9891
|
+
}], colgroupTemplate: [{
|
|
9892
|
+
type: ContentChild,
|
|
9893
|
+
args: ['colgroup', { static: false }]
|
|
9801
9894
|
}], primengTreeTable: [{
|
|
9802
9895
|
type: ViewChild,
|
|
9803
9896
|
args: ['primengTreeTable', { static: true }]
|
|
@@ -14112,5 +14205,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
|
|
|
14112
14205
|
* Generated bundle index. Do not edit.
|
|
14113
14206
|
*/
|
|
14114
14207
|
|
|
14115
|
-
export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
|
|
14208
|
+
export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnResizableDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableDetectFilterTypePipe, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnResizableDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableDetectFilterTypePipe, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
|
|
14116
14209
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|