cps-ui-kit 0.134.0 → 0.136.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +3 -3
- package/esm2020/lib/components/cps-datepicker/cps-datepicker.component.mjs +3 -3
- package/esm2020/lib/components/cps-select/cps-select.component.mjs +3 -3
- package/esm2020/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.mjs +79 -0
- package/esm2020/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.mjs +344 -0
- package/esm2020/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.mjs +120 -0
- package/esm2020/lib/components/cps-table/cps-table.component.mjs +3 -3
- package/esm2020/lib/components/cps-table/directives/cps-table-column-filter.directive.mjs +2 -2
- package/esm2020/lib/components/cps-table/directives/cps-table-column-sortable.directive.mjs +5 -3
- package/esm2020/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-select/cps-tree-select.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-table/cps-tree-table.component.mjs +279 -105
- package/esm2020/lib/components/cps-tree-table/directives/cps-tree-table-column-filter.directive.mjs +2 -2
- package/esm2020/lib/components/cps-tree-table/directives/cps-tree-table-column-sortable.directive.mjs +4 -3
- package/esm2020/lib/components/cps-tree-table/directives/cps-tree-table-header-selectable.directive.mjs +2 -1
- package/esm2020/lib/components/cps-tree-table/directives/cps-tree-table-row-selectable.directive.mjs +2 -1
- package/esm2020/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +529 -320
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +520 -316
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.d.ts +24 -0
- package/lib/components/cps-table/{table-column-filter → components/internal/table-column-filter}/table-column-filter.component.d.ts +6 -3
- package/lib/components/cps-table/{table-column-filter → components/internal}/table-column-filter-constraint/table-column-filter-constraint.component.d.ts +3 -3
- package/lib/components/cps-table/directives/cps-table-column-filter.directive.d.ts +1 -1
- package/lib/components/cps-table/directives/cps-table-column-sortable.directive.d.ts +3 -2
- package/lib/components/cps-tree-table/cps-tree-table.component.d.ts +22 -13
- package/lib/components/cps-tree-table/directives/cps-tree-table-column-filter.directive.d.ts +1 -1
- package/lib/components/cps-tree-table/directives/cps-tree-table-column-sortable.directive.d.ts +2 -2
- package/package.json +1 -1
- package/styles/_colors.scss +2 -0
- package/esm2020/lib/components/cps-table/table-column-filter/table-column-filter-constraint/table-column-filter-constraint.component.mjs +0 -120
- package/esm2020/lib/components/cps-table/table-column-filter/table-column-filter.component.mjs +0 -322
- package/esm2020/lib/components/cps-tree-table/tree-table-sort-icon/tree-table-sort-icon.component.mjs +0 -71
- package/lib/components/cps-tree-table/tree-table-sort-icon/tree-table-sort-icon.component.d.ts +0 -21
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -18,19 +18,16 @@ import { ZIndexUtils, ObjectUtils } from 'primeng/utils';
|
|
|
18
18
|
import * as i3$1 from 'primeng/tree';
|
|
19
19
|
import { TreeModule } from 'primeng/tree';
|
|
20
20
|
import * as i1$2 from 'primeng/table';
|
|
21
|
-
import { SortableColumn,
|
|
22
|
-
import * as i2$1 from 'primeng/
|
|
21
|
+
import { SortableColumn, TableService, Table, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
|
|
22
|
+
import * as i2$1 from 'primeng/treetable';
|
|
23
|
+
import { TTSortableColumn, TTHeaderCheckbox, TTCheckbox, TreeTableToggler, TreeTableService, TreeTable, TreeTableModule } from 'primeng/treetable';
|
|
24
|
+
import * as i2$2 from 'primeng/calendar';
|
|
23
25
|
import { CalendarModule } from 'primeng/calendar';
|
|
24
|
-
import * as i1$3 from 'primeng/treetable';
|
|
25
|
-
import { TTSortableColumn, TreeTableService, TreeTable, TreeTableModule, TreeTableToggler, TTHeaderCheckbox, TTCheckbox } from 'primeng/treetable';
|
|
26
26
|
import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft';
|
|
27
27
|
import { AngleLeftIcon } from 'primeng/icons/angleleft';
|
|
28
28
|
import { AngleRightIcon } from 'primeng/icons/angleright';
|
|
29
29
|
import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright';
|
|
30
|
-
import
|
|
31
|
-
import { SortAmountDownIcon } from 'primeng/icons/sortamountdown';
|
|
32
|
-
import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt';
|
|
33
|
-
import * as i1$4 from 'primeng/paginator';
|
|
30
|
+
import * as i1$3 from 'primeng/paginator';
|
|
34
31
|
import { PaginatorModule } from 'primeng/paginator';
|
|
35
32
|
import { DynamicDialogInjector } from 'primeng/dynamicdialog';
|
|
36
33
|
|
|
@@ -1732,7 +1729,7 @@ class CpsSelectComponent {
|
|
|
1732
1729
|
}
|
|
1733
1730
|
}
|
|
1734
1731
|
CpsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1735
|
-
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], 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 }], ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #selectContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-select-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-select-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 class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n <div class=\"cps-select-box-left\">\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-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n <div\n #optionsList\n class=\"cps-select-options\"\n [ngStyle]=\"{\n width: selectBoxWidth + 'px'\n }\">\n <ng-container *ngIf=\"!virtualScroll\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll && options.length > 1\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <ng-container *ngFor=\"let item of options\">\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\">\n <p-virtualScroller\n #virtualList\n [value]=\"options\"\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\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-select-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n <span\n class=\"cps-select-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-select-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-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-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: "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: CombineLabelsPipe, name: "combineLabels" }, { 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: i4.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"] }] });
|
|
1732
|
+
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], 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 }], ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #selectContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-select-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-select-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 class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n <div class=\"cps-select-box-left\">\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-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n <div\n #optionsList\n class=\"cps-select-options\"\n [ngStyle]=\"{\n width: selectBoxWidth + 'px'\n }\">\n <ng-container *ngIf=\"!virtualScroll\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll && options.length > 1\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <ng-container *ngFor=\"let item of options\">\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\">\n <p-virtualScroller\n #virtualList\n [value]=\"options\"\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\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-select-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n <span\n class=\"cps-select-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-select-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-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-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: "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: CombineLabelsPipe, name: "combineLabels" }, { 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: i4.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"] }] });
|
|
1736
1733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
1737
1734
|
type: Component,
|
|
1738
1735
|
args: [{ standalone: true, imports: [
|
|
@@ -1747,7 +1744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1747
1744
|
CheckOptionSelectedPipe,
|
|
1748
1745
|
VirtualScrollerModule,
|
|
1749
1746
|
CpsMenuComponent
|
|
1750
|
-
], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #selectContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-select-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-select-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 class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n <div class=\"cps-select-box-left\">\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-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n <div\n #optionsList\n class=\"cps-select-options\"\n [ngStyle]=\"{\n width: selectBoxWidth + 'px'\n }\">\n <ng-container *ngIf=\"!virtualScroll\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll && options.length > 1\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <ng-container *ngFor=\"let item of options\">\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\">\n <p-virtualScroller\n #virtualList\n [value]=\"options\"\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\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-select-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n <span\n class=\"cps-select-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-select-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-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
|
|
1747
|
+
], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-select\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #selectContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-select-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-select-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 class=\"cps-select-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n <div class=\"cps-select-box-left\">\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-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n <div\n #optionsList\n class=\"cps-select-options\"\n [ngStyle]=\"{\n width: selectBoxWidth + 'px'\n }\">\n <ng-container *ngIf=\"!virtualScroll\">\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll && options.length > 1\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n </span>\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n <ng-container *ngFor=\"let item of options\">\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\">\n <p-virtualScroller\n #virtualList\n [value]=\"options\"\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\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-select-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-select-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n <span\n class=\"cps-select-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-select-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-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
|
|
1751
1748
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1752
1749
|
type: Self
|
|
1753
1750
|
}, {
|
|
@@ -2364,7 +2361,7 @@ class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
|
|
|
2364
2361
|
}
|
|
2365
2362
|
}
|
|
2366
2363
|
CpsTreeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2367
|
-
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-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 class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\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-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-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-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:#e6d4d9}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2364
|
+
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-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 class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\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-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-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-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2368
2365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
|
|
2369
2366
|
type: Component,
|
|
2370
2367
|
args: [{ standalone: true, imports: [
|
|
@@ -2377,7 +2374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2377
2374
|
CpsInfoCircleComponent,
|
|
2378
2375
|
CombineLabelsPipe,
|
|
2379
2376
|
CpsMenuComponent
|
|
2380
|
-
], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-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 class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\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-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-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-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:#e6d4d9}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
2377
|
+
], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-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 class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\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-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\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\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-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-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
2381
2378
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2382
2379
|
type: Optional
|
|
2383
2380
|
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
@@ -2851,7 +2848,7 @@ class CpsAutocompleteComponent {
|
|
|
2851
2848
|
}
|
|
2852
2849
|
}
|
|
2853
2850
|
CpsAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
2854
|
-
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, 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 }], ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\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]=\"isOpened\"\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 (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\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 autocompleteInput;\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 autocompleteInput;\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 autocompleteInput;\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 && value)))\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 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()\"\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=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll\">\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\">\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 *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\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:white!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:white;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:#c33;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:#c33!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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{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:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.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: i4.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"] }] });
|
|
2851
|
+
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, 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 }], ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\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]=\"isOpened\"\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 (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\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 autocompleteInput;\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 autocompleteInput;\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 autocompleteInput;\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 && value)))\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 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()\"\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=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll\">\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\">\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 *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\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:white!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:white;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:#c33;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:#c33!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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{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: i4.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"] }] });
|
|
2855
2852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
2856
2853
|
type: Component,
|
|
2857
2854
|
args: [{ standalone: true, imports: [
|
|
@@ -2865,7 +2862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2865
2862
|
CheckOptionSelectedPipe,
|
|
2866
2863
|
VirtualScrollerModule,
|
|
2867
2864
|
CpsMenuComponent
|
|
2868
|
-
], 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]=\"{ disabled: disabled, error: error, active: isOpened }\"\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]=\"isOpened\"\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 (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\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 autocompleteInput;\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 autocompleteInput;\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 autocompleteInput;\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 && value)))\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 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()\"\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=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll\">\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\">\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 *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\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:white!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:white;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:#c33;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:#c33!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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{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:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.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"] }]
|
|
2865
|
+
], 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]=\"{ disabled: disabled, error: error, active: isOpened }\"\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]=\"isOpened\"\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 (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\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 autocompleteInput;\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 autocompleteInput;\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 autocompleteInput;\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 && value)))\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 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()\"\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=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <ng-container *ngIf=\"!virtualScroll\">\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\">\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 *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\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:white!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:white;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:#c33;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:#c33!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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{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"] }]
|
|
2869
2866
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2870
2867
|
type: Self
|
|
2871
2868
|
}, {
|
|
@@ -3147,7 +3144,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
|
|
|
3147
3144
|
}
|
|
3148
3145
|
}
|
|
3149
3146
|
CpsTreeAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3150
|
-
CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-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-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-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-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-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()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!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-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:#e6d4d9}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\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: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
3147
|
+
CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-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-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-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-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-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()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!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-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\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: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
3151
3148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
|
|
3152
3149
|
type: Component,
|
|
3153
3150
|
args: [{ standalone: true, imports: [
|
|
@@ -3159,7 +3156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3159
3156
|
CpsProgressLinearComponent,
|
|
3160
3157
|
CpsInfoCircleComponent,
|
|
3161
3158
|
CpsMenuComponent
|
|
3162
|
-
], selector: 'cps-tree-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-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-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-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-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-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()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!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-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:#e6d4d9}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
3159
|
+
], selector: 'cps-tree-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-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-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-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-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\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 treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-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()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!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-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight:focus{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
3163
3160
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
3164
3161
|
type: Optional
|
|
3165
3162
|
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { emptyMessage: [{
|
|
@@ -3642,6 +3639,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3642
3639
|
type: Output
|
|
3643
3640
|
}] } });
|
|
3644
3641
|
|
|
3642
|
+
class CpsSortIconComponent {
|
|
3643
|
+
constructor(dt, tt, cd) {
|
|
3644
|
+
this.dt = dt;
|
|
3645
|
+
this.tt = tt;
|
|
3646
|
+
this.cd = cd;
|
|
3647
|
+
this.field = '';
|
|
3648
|
+
this.sortOrder = 0;
|
|
3649
|
+
this._tableInstance = dt || tt;
|
|
3650
|
+
this.subscription = this._tableInstance.tableService.sortSource$.subscribe(() => {
|
|
3651
|
+
this.updateSortState();
|
|
3652
|
+
});
|
|
3653
|
+
}
|
|
3654
|
+
ngOnInit() {
|
|
3655
|
+
this.updateSortState();
|
|
3656
|
+
}
|
|
3657
|
+
onClick(event) {
|
|
3658
|
+
event.preventDefault();
|
|
3659
|
+
}
|
|
3660
|
+
updateSortState() {
|
|
3661
|
+
if (this._tableInstance.sortMode === 'single') {
|
|
3662
|
+
this.sortOrder = this._tableInstance.isSorted(this.field)
|
|
3663
|
+
? this._tableInstance.sortOrder
|
|
3664
|
+
: 0;
|
|
3665
|
+
}
|
|
3666
|
+
else if (this._tableInstance.sortMode === 'multiple') {
|
|
3667
|
+
const sortMeta = this._tableInstance.getSortMeta(this.field);
|
|
3668
|
+
this.sortOrder = sortMeta ? sortMeta.order : 0;
|
|
3669
|
+
}
|
|
3670
|
+
this.cd.markForCheck();
|
|
3671
|
+
}
|
|
3672
|
+
getMultiSortMetaIndex() {
|
|
3673
|
+
const multiSortMeta = this._tableInstance._multiSortMeta;
|
|
3674
|
+
let index = -1;
|
|
3675
|
+
if (multiSortMeta &&
|
|
3676
|
+
this._tableInstance.sortMode === 'multiple' &&
|
|
3677
|
+
((this.dt && this.dt.showInitialSortBadge) || multiSortMeta.length > 1)) {
|
|
3678
|
+
for (let i = 0; i < multiSortMeta.length; i++) {
|
|
3679
|
+
const meta = multiSortMeta[i];
|
|
3680
|
+
if (meta.field === this.field || meta.field === this.field) {
|
|
3681
|
+
index = i;
|
|
3682
|
+
break;
|
|
3683
|
+
}
|
|
3684
|
+
}
|
|
3685
|
+
}
|
|
3686
|
+
return index;
|
|
3687
|
+
}
|
|
3688
|
+
getBadgeValue() {
|
|
3689
|
+
const index = this.getMultiSortMetaIndex();
|
|
3690
|
+
return this.dt && this.dt.groupRowsBy && index > -1 ? index : index + 1;
|
|
3691
|
+
}
|
|
3692
|
+
isMultiSorted() {
|
|
3693
|
+
return (this._tableInstance.sortMode === 'multiple' &&
|
|
3694
|
+
this.getMultiSortMetaIndex() > -1);
|
|
3695
|
+
}
|
|
3696
|
+
ngOnDestroy() {
|
|
3697
|
+
if (this.subscription) {
|
|
3698
|
+
this.subscription.unsubscribe();
|
|
3699
|
+
}
|
|
3700
|
+
}
|
|
3701
|
+
}
|
|
3702
|
+
CpsSortIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1$2.Table, optional: true }, { token: i2$1.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3703
|
+
CpsSortIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n <div class=\"sort-unsorted-arrow-up\"></div>\n <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSortIconComponent, decorators: [{
|
|
3705
|
+
type: Component,
|
|
3706
|
+
args: [{ selector: 'cps-sort-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n <div class=\"sort-unsorted-arrow-up\"></div>\n <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"] }]
|
|
3707
|
+
}], ctorParameters: function () { return [{ type: i1$2.Table, decorators: [{
|
|
3708
|
+
type: Optional
|
|
3709
|
+
}] }, { type: i2$1.TreeTable, decorators: [{
|
|
3710
|
+
type: Optional
|
|
3711
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
|
|
3712
|
+
type: Input
|
|
3713
|
+
}] } });
|
|
3714
|
+
|
|
3645
3715
|
class CpsTableColumnSortableDirective extends SortableColumn {
|
|
3646
3716
|
constructor(elementRef, viewContainerRef, dt) {
|
|
3647
3717
|
super(dt);
|
|
@@ -3649,7 +3719,8 @@ class CpsTableColumnSortableDirective extends SortableColumn {
|
|
|
3649
3719
|
this.viewContainerRef = viewContainerRef;
|
|
3650
3720
|
this.dt = dt;
|
|
3651
3721
|
this.field = '';
|
|
3652
|
-
this.sortIconRef =
|
|
3722
|
+
this.sortIconRef =
|
|
3723
|
+
this.viewContainerRef.createComponent(CpsSortIconComponent);
|
|
3653
3724
|
}
|
|
3654
3725
|
ngOnInit() {
|
|
3655
3726
|
super.ngOnInit();
|
|
@@ -4121,7 +4192,7 @@ CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4121
4192
|
// eslint-disable-next-line no-use-before-define
|
|
4122
4193
|
deps: [CpsTableComponent]
|
|
4123
4194
|
}
|
|
4124
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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 .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:var(--cps-color-highlight-active);margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background: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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4195
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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 .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color: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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background: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: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4125
4196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
|
|
4126
4197
|
type: Component,
|
|
4127
4198
|
args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -4145,7 +4216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4145
4216
|
// eslint-disable-next-line no-use-before-define
|
|
4146
4217
|
deps: [CpsTableComponent]
|
|
4147
4218
|
}
|
|
4148
|
-
], template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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 .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:var(--cps-color-highlight-active);margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background: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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
4219
|
+
], template: "<p-table\n #primengTable\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showExportBtn\"\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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 .cps-table-bottom-bordered>.p-datatable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color: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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background: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"] }]
|
|
4149
4220
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
4150
4221
|
type: Input
|
|
4151
4222
|
}], columns: [{
|
|
@@ -4319,6 +4390,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4319
4390
|
args: ['colToggleMenu']
|
|
4320
4391
|
}] } });
|
|
4321
4392
|
|
|
4393
|
+
/* eslint-disable no-unused-vars */
|
|
4394
|
+
var CpsColumnFilterMatchMode;
|
|
4395
|
+
(function (CpsColumnFilterMatchMode) {
|
|
4396
|
+
CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
|
|
4397
|
+
CpsColumnFilterMatchMode["CONTAINS"] = "contains";
|
|
4398
|
+
CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
|
|
4399
|
+
CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
|
|
4400
|
+
CpsColumnFilterMatchMode["EQUALS"] = "equals";
|
|
4401
|
+
CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
|
|
4402
|
+
CpsColumnFilterMatchMode["IN"] = "in";
|
|
4403
|
+
CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
|
|
4404
|
+
CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
|
|
4405
|
+
CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
|
|
4406
|
+
CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
|
|
4407
|
+
CpsColumnFilterMatchMode["BETWEEN"] = "between";
|
|
4408
|
+
CpsColumnFilterMatchMode["IS"] = "is";
|
|
4409
|
+
CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
|
|
4410
|
+
CpsColumnFilterMatchMode["BEFORE"] = "before";
|
|
4411
|
+
CpsColumnFilterMatchMode["AFTER"] = "after";
|
|
4412
|
+
CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
|
|
4413
|
+
CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
|
|
4414
|
+
CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
|
|
4415
|
+
CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
|
|
4416
|
+
})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
|
|
4417
|
+
|
|
4322
4418
|
class CpsDatepickerComponent {
|
|
4323
4419
|
set value(value) {
|
|
4324
4420
|
this._value = value;
|
|
@@ -4550,7 +4646,7 @@ class CpsDatepickerComponent {
|
|
|
4550
4646
|
}
|
|
4551
4647
|
}
|
|
4552
4648
|
CpsDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4553
|
-
CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ 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: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
4649
|
+
CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ 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: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
4554
4650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
|
|
4555
4651
|
type: Component,
|
|
4556
4652
|
args: [{ standalone: true, imports: [
|
|
@@ -4559,7 +4655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4559
4655
|
CommonModule,
|
|
4560
4656
|
FormsModule,
|
|
4561
4657
|
CpsMenuComponent
|
|
4562
|
-
], selector: 'cps-datepicker', template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
|
|
4658
|
+
], selector: 'cps-datepicker', template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
|
|
4563
4659
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
4564
4660
|
type: Self
|
|
4565
4661
|
}, {
|
|
@@ -4848,7 +4944,7 @@ class TableColumnFilterConstraintComponent {
|
|
|
4848
4944
|
event.preventDefault();
|
|
4849
4945
|
}
|
|
4850
4946
|
}
|
|
4851
|
-
TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$2.Table, optional: true }, { token:
|
|
4947
|
+
TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$2.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4852
4948
|
TableColumnFilterConstraintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <cps-input\n *ngSwitchCase=\"'text'\"\n [placeholder]=\"placeholder\"\n [hideDetails]=\"true\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"text\"></cps-input>\n\n <cps-input\n *ngSwitchCase=\"'number'\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"number\"></cps-input>\n\n <div\n class=\"cps-table-col-filter-constraint-btn-toggles\"\n *ngSwitchCase=\"'boolean'\">\n <cps-button-toggle\n [options]=\"booleanOptions\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\">\n </cps-button-toggle>\n </div>\n\n <cps-datepicker\n *ngSwitchCase=\"'date'\"\n [openOnInputFocus]=\"true\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n [value]=\"filterConstraint?.value\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n (valueChanged)=\"onValueChange($event)\">\n </cps-datepicker>\n\n <ng-container *ngSwitchCase=\"'category'\">\n <cps-autocomplete\n #categoryAutocompleteComponent\n *ngIf=\"!asButtonToggle\"\n class=\"cps-table-col-filter-category-autocomplete\"\n [placeholder]=\"placeholder\"\n [options]=\"categories\"\n [hideDetails]=\"true\"\n [clearable]=\"true\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [returnObject]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-autocomplete>\n <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n <cps-button-toggle\n *ngIf=\"asButtonToggle\"\n [options]=\"categories\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-button-toggle>\n </div>\n </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { 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: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
4853
4949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
|
|
4854
4950
|
type: Component,
|
|
@@ -4862,7 +4958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4862
4958
|
], template: "<ng-container [ngSwitch]=\"type\">\n <cps-input\n *ngSwitchCase=\"'text'\"\n [placeholder]=\"placeholder\"\n [hideDetails]=\"true\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"text\"></cps-input>\n\n <cps-input\n *ngSwitchCase=\"'number'\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"number\"></cps-input>\n\n <div\n class=\"cps-table-col-filter-constraint-btn-toggles\"\n *ngSwitchCase=\"'boolean'\">\n <cps-button-toggle\n [options]=\"booleanOptions\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\">\n </cps-button-toggle>\n </div>\n\n <cps-datepicker\n *ngSwitchCase=\"'date'\"\n [openOnInputFocus]=\"true\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n [value]=\"filterConstraint?.value\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n (valueChanged)=\"onValueChange($event)\">\n </cps-datepicker>\n\n <ng-container *ngSwitchCase=\"'category'\">\n <cps-autocomplete\n #categoryAutocompleteComponent\n *ngIf=\"!asButtonToggle\"\n class=\"cps-table-col-filter-category-autocomplete\"\n [placeholder]=\"placeholder\"\n [options]=\"categories\"\n [hideDetails]=\"true\"\n [clearable]=\"true\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [returnObject]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-autocomplete>\n <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n <cps-button-toggle\n *ngIf=\"asButtonToggle\"\n [options]=\"categories\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-button-toggle>\n </div>\n </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
|
|
4863
4959
|
}], ctorParameters: function () { return [{ type: i1$2.Table, decorators: [{
|
|
4864
4960
|
type: Optional
|
|
4865
|
-
}] }, { type:
|
|
4961
|
+
}] }, { type: i2$1.TreeTable, decorators: [{
|
|
4866
4962
|
type: Optional
|
|
4867
4963
|
}] }]; }, propDecorators: { type: [{
|
|
4868
4964
|
type: Input
|
|
@@ -4885,31 +4981,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4885
4981
|
args: ['categoryAutocompleteComponent']
|
|
4886
4982
|
}] } });
|
|
4887
4983
|
|
|
4888
|
-
/* eslint-disable no-unused-vars */
|
|
4889
|
-
var CpsColumnFilterMatchMode;
|
|
4890
|
-
(function (CpsColumnFilterMatchMode) {
|
|
4891
|
-
CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
|
|
4892
|
-
CpsColumnFilterMatchMode["CONTAINS"] = "contains";
|
|
4893
|
-
CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
|
|
4894
|
-
CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
|
|
4895
|
-
CpsColumnFilterMatchMode["EQUALS"] = "equals";
|
|
4896
|
-
CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
|
|
4897
|
-
CpsColumnFilterMatchMode["IN"] = "in";
|
|
4898
|
-
CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
|
|
4899
|
-
CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
|
|
4900
|
-
CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
|
|
4901
|
-
CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
|
|
4902
|
-
CpsColumnFilterMatchMode["BETWEEN"] = "between";
|
|
4903
|
-
CpsColumnFilterMatchMode["IS"] = "is";
|
|
4904
|
-
CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
|
|
4905
|
-
CpsColumnFilterMatchMode["BEFORE"] = "before";
|
|
4906
|
-
CpsColumnFilterMatchMode["AFTER"] = "after";
|
|
4907
|
-
CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
|
|
4908
|
-
CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
|
|
4909
|
-
CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
|
|
4910
|
-
CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
|
|
4911
|
-
})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
|
|
4912
|
-
|
|
4913
4984
|
class TableColumnFilterComponent {
|
|
4914
4985
|
get isCategoryDropdownOpened() {
|
|
4915
4986
|
if (this.type !== 'category')
|
|
@@ -5152,12 +5223,28 @@ class TableColumnFilterComponent {
|
|
|
5152
5223
|
onClick(event) {
|
|
5153
5224
|
event.stopPropagation();
|
|
5154
5225
|
}
|
|
5226
|
+
_updateSortIconColor(color) {
|
|
5227
|
+
const unsortedUp = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-up');
|
|
5228
|
+
if (unsortedUp) {
|
|
5229
|
+
unsortedUp.style.borderBottomColor = color;
|
|
5230
|
+
}
|
|
5231
|
+
const unsortedDown = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-down');
|
|
5232
|
+
if (unsortedDown) {
|
|
5233
|
+
unsortedDown.style.borderTopColor = color;
|
|
5234
|
+
}
|
|
5235
|
+
}
|
|
5236
|
+
onMouseOver() {
|
|
5237
|
+
this._updateSortIconColor('var(--cps-color-line-dark)');
|
|
5238
|
+
}
|
|
5239
|
+
onMouseLeave() {
|
|
5240
|
+
this._updateSortIconColor('');
|
|
5241
|
+
}
|
|
5155
5242
|
ngOnDestroy() {
|
|
5156
5243
|
this._tableInstance?.onFilter?.unsubscribe();
|
|
5157
5244
|
}
|
|
5158
5245
|
}
|
|
5159
|
-
TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Table, optional: true }, { token:
|
|
5160
|
-
TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton || headerTitle\">\n <span class=\"cps-table-col-filter-menu-content-header-title\">\n {{ headerTitle }}\n </span>\n <cps-icon\n *ngIf=\"showCloseButton\"\n icon=\"close-x\"\n (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n #constraintComponent\n [type]=\"type\"\n [field]=\"field\"\n [asButtonToggle]=\"asButtonToggle\"\n [singleSelection]=\"singleSelection\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': isFilterApplied\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:
|
|
5246
|
+
TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5247
|
+
TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton || headerTitle\">\n <span class=\"cps-table-col-filter-menu-content-header-title\">\n {{ headerTitle }}\n </span>\n <cps-icon\n *ngIf=\"showCloseButton\"\n icon=\"close-x\"\n (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n #constraintComponent\n [type]=\"type\"\n [field]=\"field\"\n [asButtonToggle]=\"asButtonToggle\"\n [singleSelection]=\"singleSelection\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': isFilterApplied\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\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: "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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] });
|
|
5161
5248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
|
|
5162
5249
|
type: Component,
|
|
5163
5250
|
args: [{ selector: 'table-column-filter', standalone: true, imports: [
|
|
@@ -5168,10 +5255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5168
5255
|
CpsIconComponent,
|
|
5169
5256
|
CpsSelectComponent,
|
|
5170
5257
|
TableColumnFilterConstraintComponent
|
|
5171
|
-
], template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton || headerTitle\">\n <span class=\"cps-table-col-filter-menu-content-header-title\">\n {{ headerTitle }}\n </span>\n <cps-icon\n *ngIf=\"showCloseButton\"\n icon=\"close-x\"\n (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n #constraintComponent\n [type]=\"type\"\n [field]=\"field\"\n [asButtonToggle]=\"asButtonToggle\"\n [singleSelection]=\"singleSelection\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': isFilterApplied\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:
|
|
5258
|
+
], template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton || headerTitle\">\n <span class=\"cps-table-col-filter-menu-content-header-title\">\n {{ headerTitle }}\n </span>\n <cps-icon\n *ngIf=\"showCloseButton\"\n icon=\"close-x\"\n (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n #constraintComponent\n [type]=\"type\"\n [field]=\"field\"\n [asButtonToggle]=\"asButtonToggle\"\n [singleSelection]=\"singleSelection\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': isFilterApplied\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"] }]
|
|
5172
5259
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.Table, decorators: [{
|
|
5173
5260
|
type: Optional
|
|
5174
|
-
}] }, { type:
|
|
5261
|
+
}] }, { type: i2$1.TreeTable, decorators: [{
|
|
5175
5262
|
type: Optional
|
|
5176
5263
|
}] }]; }, propDecorators: { field: [{
|
|
5177
5264
|
type: Input
|
|
@@ -5214,6 +5301,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5214
5301
|
}], onClick: [{
|
|
5215
5302
|
type: HostListener,
|
|
5216
5303
|
args: ['click', ['$event']]
|
|
5304
|
+
}], onMouseOver: [{
|
|
5305
|
+
type: HostListener,
|
|
5306
|
+
args: ['mouseenter']
|
|
5307
|
+
}], onMouseLeave: [{
|
|
5308
|
+
type: HostListener,
|
|
5309
|
+
args: ['mouseleave']
|
|
5217
5310
|
}] } });
|
|
5218
5311
|
|
|
5219
5312
|
class CpsTableColumnFilterDirective {
|
|
@@ -5383,69 +5476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5383
5476
|
args: ['cpsTRowSelectable']
|
|
5384
5477
|
}] } });
|
|
5385
5478
|
|
|
5386
|
-
class TreeTableSortIconComponent {
|
|
5387
|
-
constructor(tt, cd) {
|
|
5388
|
-
this.tt = tt;
|
|
5389
|
-
this.cd = cd;
|
|
5390
|
-
this.field = '';
|
|
5391
|
-
this.sortOrder = 0;
|
|
5392
|
-
this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
|
|
5393
|
-
this.updateSortState();
|
|
5394
|
-
this.cd.markForCheck();
|
|
5395
|
-
});
|
|
5396
|
-
}
|
|
5397
|
-
ngOnInit() {
|
|
5398
|
-
this.updateSortState();
|
|
5399
|
-
}
|
|
5400
|
-
onClick(event) {
|
|
5401
|
-
event.preventDefault();
|
|
5402
|
-
}
|
|
5403
|
-
updateSortState() {
|
|
5404
|
-
if (this.tt.sortMode === 'single') {
|
|
5405
|
-
this.sortOrder = this.tt.isSorted(this.field) ? this.tt.sortOrder : 0;
|
|
5406
|
-
}
|
|
5407
|
-
else if (this.tt.sortMode === 'multiple') {
|
|
5408
|
-
const sortMeta = this.tt.getSortMeta(this.field);
|
|
5409
|
-
this.sortOrder = sortMeta ? sortMeta.order : 0;
|
|
5410
|
-
}
|
|
5411
|
-
}
|
|
5412
|
-
getMultiSortMetaIndex() {
|
|
5413
|
-
const multiSortMeta = this.tt._multiSortMeta;
|
|
5414
|
-
let index = -1;
|
|
5415
|
-
if (multiSortMeta &&
|
|
5416
|
-
this.tt.sortMode === 'multiple' &&
|
|
5417
|
-
multiSortMeta.length > 1) {
|
|
5418
|
-
for (let i = 0; i < multiSortMeta.length; i++) {
|
|
5419
|
-
const meta = multiSortMeta[i];
|
|
5420
|
-
if (meta.field === this.field || meta.field === this.field) {
|
|
5421
|
-
index = i;
|
|
5422
|
-
break;
|
|
5423
|
-
}
|
|
5424
|
-
}
|
|
5425
|
-
}
|
|
5426
|
-
return index;
|
|
5427
|
-
}
|
|
5428
|
-
getBadgeValue() {
|
|
5429
|
-
return this.getMultiSortMetaIndex() + 1;
|
|
5430
|
-
}
|
|
5431
|
-
isMultiSorted() {
|
|
5432
|
-
return this.tt.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
|
|
5433
|
-
}
|
|
5434
|
-
ngOnDestroy() {
|
|
5435
|
-
if (this.subscription) {
|
|
5436
|
-
this.subscription.unsubscribe();
|
|
5437
|
-
}
|
|
5438
|
-
}
|
|
5439
|
-
}
|
|
5440
|
-
TreeTableSortIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableSortIconComponent, deps: [{ token: i1$3.TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5441
|
-
TreeTableSortIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeTableSortIconComponent, isStandalone: true, selector: "tree-table-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<ng-container *ngIf=\"!tt.sortIconTemplate\">\n <SortAltIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === 0\" />\n <SortAmountUpAltIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === 1\" />\n <SortAmountDownIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === -1\" />\n</ng-container>\n<span *ngIf=\"tt.sortIconTemplate\" class=\"p-sortable-column-icon\">\n <ng-template\n *ngTemplateOutlet=\"\n tt.sortIconTemplate;\n context: { $implicit: sortOrder }\n \"></ng-template>\n</span>\n<span *ngIf=\"isMultiSorted()\" class=\"p-sortable-column-badge\">{{\n getBadgeValue()\n}}</span>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SortAltIcon, selector: "SortAltIcon" }, { kind: "component", type: SortAmountUpAltIcon, selector: "SortAmountUpAltIcon" }, { kind: "component", type: SortAmountDownIcon, selector: "SortAmountDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableSortIconComponent, decorators: [{
|
|
5443
|
-
type: Component,
|
|
5444
|
-
args: [{ selector: 'tree-table-sort-icon', standalone: true, imports: [CommonModule, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!tt.sortIconTemplate\">\n <SortAltIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === 0\" />\n <SortAmountUpAltIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === 1\" />\n <SortAmountDownIcon\n [styleClass]=\"'p-sortable-column-icon'\"\n *ngIf=\"sortOrder === -1\" />\n</ng-container>\n<span *ngIf=\"tt.sortIconTemplate\" class=\"p-sortable-column-icon\">\n <ng-template\n *ngTemplateOutlet=\"\n tt.sortIconTemplate;\n context: { $implicit: sortOrder }\n \"></ng-template>\n</span>\n<span *ngIf=\"isMultiSorted()\" class=\"p-sortable-column-badge\">{{\n getBadgeValue()\n}}</span>\n" }]
|
|
5445
|
-
}], ctorParameters: function () { return [{ type: i1$3.TreeTable }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
|
|
5446
|
-
type: Input
|
|
5447
|
-
}] } });
|
|
5448
|
-
|
|
5449
5479
|
class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
|
|
5450
5480
|
constructor(elementRef, viewContainerRef, tt) {
|
|
5451
5481
|
super(tt);
|
|
@@ -5453,7 +5483,8 @@ class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
|
|
|
5453
5483
|
this.viewContainerRef = viewContainerRef;
|
|
5454
5484
|
this.tt = tt;
|
|
5455
5485
|
this.field = '';
|
|
5456
|
-
this.sortIconRef =
|
|
5486
|
+
this.sortIconRef =
|
|
5487
|
+
this.viewContainerRef.createComponent(CpsSortIconComponent);
|
|
5457
5488
|
}
|
|
5458
5489
|
ngOnInit() {
|
|
5459
5490
|
super.ngOnInit();
|
|
@@ -5466,7 +5497,7 @@ class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
|
|
|
5466
5497
|
this.viewContainerRef.clear();
|
|
5467
5498
|
}
|
|
5468
5499
|
}
|
|
5469
|
-
CpsTreeTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token:
|
|
5500
|
+
CpsTreeTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2$1.TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5470
5501
|
CpsTreeTableColumnSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableColumnSortableDirective, isStandalone: true, selector: "[cpsTTColSortable]", inputs: { field: ["cpsTTColSortable", "field"] }, usesInheritance: true, ngImport: i0 });
|
|
5471
5502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnSortableDirective, decorators: [{
|
|
5472
5503
|
type: Directive,
|
|
@@ -5474,7 +5505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5474
5505
|
standalone: true,
|
|
5475
5506
|
selector: '[cpsTTColSortable]'
|
|
5476
5507
|
}]
|
|
5477
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type:
|
|
5508
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i2$1.TreeTable }]; }, propDecorators: { field: [{
|
|
5478
5509
|
type: Input,
|
|
5479
5510
|
args: ['cpsTTColSortable']
|
|
5480
5511
|
}] } });
|
|
@@ -5616,7 +5647,7 @@ class TreeTableUnsortDirective {
|
|
|
5616
5647
|
};
|
|
5617
5648
|
}
|
|
5618
5649
|
}
|
|
5619
|
-
TreeTableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableUnsortDirective, deps: [{ token:
|
|
5650
|
+
TreeTableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableUnsortDirective, deps: [{ token: i2$1.TreeTable, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5620
5651
|
TreeTableUnsortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TreeTableUnsortDirective, isStandalone: true, selector: "[ttWithUnsort]", ngImport: i0 });
|
|
5621
5652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableUnsortDirective, decorators: [{
|
|
5622
5653
|
type: Directive,
|
|
@@ -5624,7 +5655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5624
5655
|
standalone: true,
|
|
5625
5656
|
selector: '[ttWithUnsort]'
|
|
5626
5657
|
}]
|
|
5627
|
-
}], ctorParameters: function () { return [{ type:
|
|
5658
|
+
}], ctorParameters: function () { return [{ type: i2$1.TreeTable, decorators: [{
|
|
5628
5659
|
type: Host
|
|
5629
5660
|
}, {
|
|
5630
5661
|
type: Self
|
|
@@ -5632,6 +5663,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5632
5663
|
type: Optional
|
|
5633
5664
|
}] }]; } });
|
|
5634
5665
|
|
|
5666
|
+
class CpsTreeTableHeaderSelectableDirective {
|
|
5667
|
+
constructor(elementRef, viewContainerRef) {
|
|
5668
|
+
this.elementRef = elementRef;
|
|
5669
|
+
this.viewContainerRef = viewContainerRef;
|
|
5670
|
+
this.checkboxCompRef =
|
|
5671
|
+
this.viewContainerRef.createComponent(TTHeaderCheckbox);
|
|
5672
|
+
}
|
|
5673
|
+
ngOnInit() {
|
|
5674
|
+
this.elementRef.nativeElement.classList.add('cps-treetable-selectable-cell');
|
|
5675
|
+
this.elementRef.nativeElement.appendChild(this.checkboxCompRef.location.nativeElement);
|
|
5676
|
+
}
|
|
5677
|
+
ngOnDestroy() {
|
|
5678
|
+
this.checkboxCompRef.destroy();
|
|
5679
|
+
this.viewContainerRef.clear();
|
|
5680
|
+
}
|
|
5681
|
+
}
|
|
5682
|
+
CpsTreeTableHeaderSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5683
|
+
CpsTreeTableHeaderSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTTHdrSelectable]", ngImport: i0 });
|
|
5684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, decorators: [{
|
|
5685
|
+
type: Directive,
|
|
5686
|
+
args: [{
|
|
5687
|
+
standalone: true,
|
|
5688
|
+
selector: '[cpsTTHdrSelectable]'
|
|
5689
|
+
}]
|
|
5690
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
|
|
5691
|
+
|
|
5692
|
+
class CpsTreeTableRowSelectableDirective {
|
|
5693
|
+
constructor(elementRef, viewContainerRef) {
|
|
5694
|
+
this.elementRef = elementRef;
|
|
5695
|
+
this.viewContainerRef = viewContainerRef;
|
|
5696
|
+
this.checkboxCompRef = this.viewContainerRef.createComponent(TTCheckbox);
|
|
5697
|
+
}
|
|
5698
|
+
ngOnInit() {
|
|
5699
|
+
this.elementRef.nativeElement.classList.add('cps-treetable-selectable-cell');
|
|
5700
|
+
this.checkboxCompRef.setInput('value', this.value);
|
|
5701
|
+
this.elementRef.nativeElement.appendChild(this.checkboxCompRef.location.nativeElement);
|
|
5702
|
+
}
|
|
5703
|
+
ngOnDestroy() {
|
|
5704
|
+
this.checkboxCompRef.destroy();
|
|
5705
|
+
this.viewContainerRef.clear();
|
|
5706
|
+
}
|
|
5707
|
+
}
|
|
5708
|
+
CpsTreeTableRowSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5709
|
+
CpsTreeTableRowSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableRowSelectableDirective, isStandalone: true, selector: "[cpsTTRowSelectable]", inputs: { value: ["cpsTTRowSelectable", "value"] }, ngImport: i0 });
|
|
5710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, decorators: [{
|
|
5711
|
+
type: Directive,
|
|
5712
|
+
args: [{
|
|
5713
|
+
standalone: true,
|
|
5714
|
+
selector: '[cpsTTRowSelectable]'
|
|
5715
|
+
}]
|
|
5716
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { value: [{
|
|
5717
|
+
type: Input,
|
|
5718
|
+
args: ['cpsTTRowSelectable']
|
|
5719
|
+
}] } });
|
|
5720
|
+
|
|
5721
|
+
class CpsTreetableRowTogglerDirective {
|
|
5722
|
+
constructor(elementRef, viewContainerRef) {
|
|
5723
|
+
this.elementRef = elementRef;
|
|
5724
|
+
this.viewContainerRef = viewContainerRef;
|
|
5725
|
+
this.togglerCompRef =
|
|
5726
|
+
this.viewContainerRef.createComponent(TreeTableToggler);
|
|
5727
|
+
}
|
|
5728
|
+
ngOnInit() {
|
|
5729
|
+
this.elementRef.nativeElement.classList.add('cps-treetable-row-toggler-cell');
|
|
5730
|
+
this.togglerCompRef.setInput('rowNode', this.rowNode);
|
|
5731
|
+
const spanElement = document.createElement('span');
|
|
5732
|
+
spanElement.style.display = 'flex';
|
|
5733
|
+
while (this.elementRef.nativeElement.firstChild) {
|
|
5734
|
+
spanElement.appendChild(this.elementRef.nativeElement.firstChild);
|
|
5735
|
+
}
|
|
5736
|
+
this.elementRef.nativeElement.appendChild(spanElement);
|
|
5737
|
+
spanElement.prepend(this.togglerCompRef.location.nativeElement);
|
|
5738
|
+
}
|
|
5739
|
+
ngOnDestroy() {
|
|
5740
|
+
this.togglerCompRef.destroy();
|
|
5741
|
+
this.viewContainerRef.clear();
|
|
5742
|
+
}
|
|
5743
|
+
}
|
|
5744
|
+
CpsTreetableRowTogglerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5745
|
+
CpsTreetableRowTogglerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 });
|
|
5746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
|
|
5747
|
+
type: Directive,
|
|
5748
|
+
args: [{
|
|
5749
|
+
standalone: true,
|
|
5750
|
+
selector: '[cpsTTRowToggler]'
|
|
5751
|
+
}]
|
|
5752
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { rowNode: [{
|
|
5753
|
+
type: Input,
|
|
5754
|
+
args: ['cpsTTRowToggler']
|
|
5755
|
+
}] } });
|
|
5756
|
+
|
|
5635
5757
|
function treeTableFactory(tableComponent) {
|
|
5636
5758
|
return tableComponent.primengTreeTable;
|
|
5637
5759
|
}
|
|
@@ -5645,6 +5767,11 @@ class CpsTreeTableComponent {
|
|
|
5645
5767
|
this.colFieldName = 'field';
|
|
5646
5768
|
this.minWidth = '';
|
|
5647
5769
|
this.minWidthForBodyOnly = true;
|
|
5770
|
+
/**
|
|
5771
|
+
* Whether the cell widths scale according to their content or not.
|
|
5772
|
+
* @group Props
|
|
5773
|
+
*/
|
|
5774
|
+
this.autoLayout = true;
|
|
5648
5775
|
this.striped = true;
|
|
5649
5776
|
this.bordered = true;
|
|
5650
5777
|
this.size = 'normal';
|
|
@@ -5720,19 +5847,23 @@ class CpsTreeTableComponent {
|
|
|
5720
5847
|
this.rowOptions = [];
|
|
5721
5848
|
this.selectedRows = [];
|
|
5722
5849
|
this.virtualScrollItemSize = 0;
|
|
5723
|
-
this.defScrollHeightPx = 0;
|
|
5724
|
-
this.defScrollHeightPxInitial = 0;
|
|
5725
5850
|
this.defScrollHeight = '';
|
|
5726
|
-
this.
|
|
5727
|
-
this.
|
|
5851
|
+
this._defScrollHeightPx = 0;
|
|
5852
|
+
this._defScrollHeightPxInitial = 0;
|
|
5853
|
+
this._scrollbarWidth = 0;
|
|
5854
|
+
this._scrollbarVisible = true;
|
|
5855
|
+
this._needRecalcAutoLayout = true;
|
|
5856
|
+
this._resizeObserver = new ResizeObserver((entries) => {
|
|
5728
5857
|
entries.forEach((entry) => {
|
|
5729
5858
|
const body = entry.target;
|
|
5730
|
-
|
|
5731
|
-
|
|
5859
|
+
this._scrollbarVisible = body.scrollHeight > body.clientHeight;
|
|
5860
|
+
if (this._scrollbarVisible && this.virtualScroll)
|
|
5861
|
+
this._scrollableBody.style.setProperty('overflow', 'auto', 'important');
|
|
5862
|
+
let wScroll = this._scrollbarVisible ? this._scrollbarWidth : 0;
|
|
5732
5863
|
if (wScroll > 0)
|
|
5733
5864
|
wScroll -= 1;
|
|
5734
|
-
this.
|
|
5735
|
-
this.
|
|
5865
|
+
this._headerBox.style.paddingRight = `${wScroll}px`;
|
|
5866
|
+
this._headerBox.style.borderRight =
|
|
5736
5867
|
wScroll > 0 ? '1px solid #d7d5d5' : 'unset';
|
|
5737
5868
|
});
|
|
5738
5869
|
});
|
|
@@ -5748,7 +5879,7 @@ class CpsTreeTableComponent {
|
|
|
5748
5879
|
if (this.virtualScroll) {
|
|
5749
5880
|
window.addEventListener('resize', this._onWindowResize.bind(this));
|
|
5750
5881
|
if (this.defScrollHeight && this.defScrollHeight !== 'flex') {
|
|
5751
|
-
this.
|
|
5882
|
+
this._defScrollHeightPx = parseInt(this.scrollHeight, 10);
|
|
5752
5883
|
}
|
|
5753
5884
|
}
|
|
5754
5885
|
if (this.paginator) {
|
|
@@ -5775,31 +5906,185 @@ class CpsTreeTableComponent {
|
|
|
5775
5906
|
}
|
|
5776
5907
|
ngAfterViewInit() {
|
|
5777
5908
|
this._setMinWidthOverall();
|
|
5778
|
-
this.
|
|
5779
|
-
if (this.
|
|
5909
|
+
this._scrollableBody = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-scrollable-body');
|
|
5910
|
+
if (this._scrollableBody) {
|
|
5780
5911
|
if (this.minWidthForBodyOnly && this.minWidth) {
|
|
5781
|
-
const table = this.
|
|
5912
|
+
const table = this._scrollableBody.querySelector('table');
|
|
5782
5913
|
if (table)
|
|
5783
5914
|
table.style.minWidth = this.minWidth;
|
|
5784
5915
|
}
|
|
5785
|
-
if (this.virtualScroll
|
|
5786
|
-
this.
|
|
5787
|
-
|
|
5916
|
+
if (this.virtualScroll) {
|
|
5917
|
+
if (this.defScrollHeight === 'flex') {
|
|
5918
|
+
this._defScrollHeightPx = this._scrollableBody.clientHeight;
|
|
5919
|
+
this._defScrollHeightPxInitial = this._defScrollHeightPx;
|
|
5920
|
+
}
|
|
5921
|
+
if (this.autoLayout) {
|
|
5922
|
+
this._scrollSubscription = fromEvent(this._scrollableBody, 'scroll').subscribe(() => {
|
|
5923
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
5924
|
+
});
|
|
5925
|
+
}
|
|
5788
5926
|
}
|
|
5789
|
-
this.
|
|
5790
|
-
if (this.
|
|
5927
|
+
this._headerBox = this.primengTreeTable.el.nativeElement.querySelector('.p-treetable-scrollable-header-box');
|
|
5928
|
+
if (this._headerBox) {
|
|
5791
5929
|
if (this.minWidthForBodyOnly && this.minWidth) {
|
|
5792
|
-
const table = this.
|
|
5930
|
+
const table = this._headerBox.querySelector('table');
|
|
5793
5931
|
if (table)
|
|
5794
5932
|
table.style.minWidth = this.minWidth;
|
|
5795
5933
|
}
|
|
5796
|
-
this.
|
|
5797
|
-
this.
|
|
5934
|
+
this._scrollbarWidth = DomHandler.calculateScrollbarWidth();
|
|
5935
|
+
this._resizeObserver.observe(this._scrollableBody);
|
|
5936
|
+
}
|
|
5937
|
+
if (this._needRecalcAutoLayout) {
|
|
5938
|
+
this._calcAutoLayoutHeaderWidths();
|
|
5939
|
+
this.cdRef.detectChanges();
|
|
5798
5940
|
}
|
|
5799
5941
|
}
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5942
|
+
if (!this.scrollable) {
|
|
5943
|
+
const tableWrapper = this.primengTreeTable.el?.nativeElement?.querySelector('.p-treetable-wrapper');
|
|
5944
|
+
if (tableWrapper && this.minWidthForBodyOnly && this.minWidth) {
|
|
5945
|
+
const table = tableWrapper.querySelector('table');
|
|
5946
|
+
if (table)
|
|
5947
|
+
table.style.minWidth = this.minWidth;
|
|
5948
|
+
}
|
|
5949
|
+
}
|
|
5950
|
+
}
|
|
5951
|
+
ngAfterViewChecked() {
|
|
5952
|
+
if (this._needRecalcAutoLayout) {
|
|
5953
|
+
this._calcAutoLayoutHeaderWidths();
|
|
5954
|
+
this.cdRef.detectChanges();
|
|
5955
|
+
}
|
|
5956
|
+
if (!this.virtualScroll)
|
|
5957
|
+
return;
|
|
5958
|
+
if (!this._defScrollHeightPx && this.defScrollHeight === 'flex') {
|
|
5959
|
+
this._defScrollHeightPx = this._scrollableBody.clientHeight;
|
|
5960
|
+
this._defScrollHeightPxInitial = this._defScrollHeightPx;
|
|
5961
|
+
this.cdRef.detectChanges();
|
|
5962
|
+
}
|
|
5963
|
+
if (!this.virtualScrollItemSize) {
|
|
5964
|
+
this._recalcVirtualHeight();
|
|
5965
|
+
this.cdRef.detectChanges();
|
|
5966
|
+
}
|
|
5967
|
+
}
|
|
5968
|
+
ngOnChanges(changes) {
|
|
5969
|
+
if (this.loading) {
|
|
5970
|
+
this.clearSelection();
|
|
5971
|
+
if (this.clearGlobalFilterOnLoading)
|
|
5972
|
+
this.clearGlobalFilter();
|
|
5973
|
+
}
|
|
5974
|
+
if (this.virtualScrollItemHeight)
|
|
5975
|
+
this.virtualScrollItemSize = this.virtualScrollItemHeight;
|
|
5976
|
+
this._setMinWidthOverall();
|
|
5977
|
+
const dataChanges = changes?.data;
|
|
5978
|
+
if (dataChanges?.previousValue !== dataChanges?.currentValue) {
|
|
5979
|
+
this.clearSelection();
|
|
5980
|
+
}
|
|
5981
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
5982
|
+
}
|
|
5983
|
+
ngOnDestroy() {
|
|
5984
|
+
this._resizeObserver?.disconnect();
|
|
5985
|
+
if (this.virtualScroll) {
|
|
5986
|
+
if (this.autoLayout)
|
|
5987
|
+
this._scrollSubscription?.unsubscribe();
|
|
5988
|
+
window.removeEventListener('resize', this._onWindowResize.bind(this));
|
|
5989
|
+
}
|
|
5990
|
+
}
|
|
5991
|
+
_calcAutoLayoutHeaderWidths(forced = false) {
|
|
5992
|
+
if (!this.autoLayout || !this.scrollable)
|
|
5993
|
+
return;
|
|
5994
|
+
if (!this._needRecalcAutoLayout && !forced)
|
|
5995
|
+
return;
|
|
5996
|
+
const headerRows = this._headerBox?.querySelectorAll('tr');
|
|
5997
|
+
if (!headerRows?.length)
|
|
5998
|
+
return;
|
|
5999
|
+
const headerCells = headerRows[headerRows.length - 1]?.querySelectorAll('th');
|
|
6000
|
+
if (!headerCells?.length)
|
|
6001
|
+
return;
|
|
6002
|
+
let hasSelectableCell = false;
|
|
6003
|
+
let hasRowMenuCell = false;
|
|
6004
|
+
const ths = Array.from(headerCells);
|
|
6005
|
+
if (ths.map((th) => th.offsetWidth).every((w) => w === 0))
|
|
6006
|
+
return;
|
|
6007
|
+
const thWidths = ths.map((th) => {
|
|
6008
|
+
const wprev = th.style.width;
|
|
6009
|
+
const isSelectableCell = th.classList.contains('cps-treetable-selectable-cell');
|
|
6010
|
+
const isRowCell = th.classList.contains('cps-treetable-row-menu-cell');
|
|
6011
|
+
if (isSelectableCell)
|
|
6012
|
+
hasSelectableCell = true;
|
|
6013
|
+
if (isRowCell)
|
|
6014
|
+
hasRowMenuCell = true;
|
|
6015
|
+
let thWidth = 55;
|
|
6016
|
+
if (!isSelectableCell && !isRowCell) {
|
|
6017
|
+
th.style.width = 'min-content';
|
|
6018
|
+
th.style.display = 'block';
|
|
6019
|
+
thWidth = th.offsetWidth;
|
|
6020
|
+
th.style.width = wprev;
|
|
6021
|
+
th.style.display = '';
|
|
6022
|
+
}
|
|
6023
|
+
return thWidth;
|
|
6024
|
+
});
|
|
6025
|
+
const bodyRows = this._scrollableBody?.querySelectorAll('tr');
|
|
6026
|
+
if (!bodyRows?.length)
|
|
6027
|
+
return;
|
|
6028
|
+
const tdWidths = [];
|
|
6029
|
+
bodyRows.forEach((tr) => {
|
|
6030
|
+
const tds = tr?.querySelectorAll('td');
|
|
6031
|
+
tds?.forEach((td, idx) => {
|
|
6032
|
+
const wprev = td.style.width;
|
|
6033
|
+
const isSelectableOrRowMenuCell = td.classList.contains('cps-treetable-selectable-cell') ||
|
|
6034
|
+
td.classList.contains('cps-treetable-row-menu-cell');
|
|
6035
|
+
let tdWidth = 55;
|
|
6036
|
+
if (!isSelectableOrRowMenuCell) {
|
|
6037
|
+
td.style.width = 'min-content';
|
|
6038
|
+
td.style.display = 'block';
|
|
6039
|
+
tdWidth = td.offsetWidth;
|
|
6040
|
+
td.style.width = wprev;
|
|
6041
|
+
td.style.display = '';
|
|
6042
|
+
}
|
|
6043
|
+
if (!tdWidths[idx])
|
|
6044
|
+
tdWidths[idx] = 0;
|
|
6045
|
+
tdWidths[idx] = Math.max(tdWidths[idx], tdWidth);
|
|
6046
|
+
});
|
|
6047
|
+
});
|
|
6048
|
+
if (thWidths.length !== tdWidths.length)
|
|
6049
|
+
return;
|
|
6050
|
+
const maxWidths = thWidths.map((v, idx) => Math.max(v, tdWidths[idx]));
|
|
6051
|
+
let sum = maxWidths.reduce((a, b) => a + b, 0);
|
|
6052
|
+
if (hasSelectableCell) {
|
|
6053
|
+
sum -= 55;
|
|
6054
|
+
maxWidths.shift();
|
|
6055
|
+
}
|
|
6056
|
+
if (hasRowMenuCell) {
|
|
6057
|
+
sum -= 55;
|
|
6058
|
+
maxWidths.pop();
|
|
6059
|
+
}
|
|
6060
|
+
const percentages = maxWidths.map((v) => (v / sum) * 100);
|
|
6061
|
+
headerCells.forEach((th, idx) => {
|
|
6062
|
+
if ((hasSelectableCell && idx === 0) ||
|
|
6063
|
+
(hasRowMenuCell && idx === headerCells.length - 1)) {
|
|
6064
|
+
th.style.width = '55px';
|
|
6065
|
+
}
|
|
6066
|
+
else
|
|
6067
|
+
th.style.width = percentages[hasSelectableCell ? idx - 1 : idx] + '%';
|
|
6068
|
+
});
|
|
6069
|
+
bodyRows.forEach((tr) => {
|
|
6070
|
+
const tds = tr?.querySelectorAll('td');
|
|
6071
|
+
tds?.forEach((td, idx) => {
|
|
6072
|
+
if ((hasSelectableCell && idx === 0) ||
|
|
6073
|
+
(hasRowMenuCell && idx === tds.length - 1)) {
|
|
6074
|
+
td.style.width = '55px';
|
|
6075
|
+
}
|
|
6076
|
+
else {
|
|
6077
|
+
td.style.width = percentages[hasSelectableCell ? idx - 1 : idx] + '%';
|
|
6078
|
+
}
|
|
6079
|
+
td.style.opacity = '1';
|
|
6080
|
+
if (this.bordered)
|
|
6081
|
+
td.style.borderLeftColor = 'var(--cps-color-line-mid)';
|
|
6082
|
+
});
|
|
6083
|
+
});
|
|
6084
|
+
this._needRecalcAutoLayout = false;
|
|
6085
|
+
}
|
|
6086
|
+
_updateVirtualScrollItemSize() {
|
|
6087
|
+
if (!this.virtualScroll || this.virtualScrollItemHeight)
|
|
5803
6088
|
return;
|
|
5804
6089
|
const trs = this.primengTreeTable?.el?.nativeElement
|
|
5805
6090
|
?.querySelector('.p-treetable-tbody')
|
|
@@ -5824,19 +6109,6 @@ class CpsTreeTableComponent {
|
|
|
5824
6109
|
});
|
|
5825
6110
|
this.virtualScrollItemSize = h;
|
|
5826
6111
|
}
|
|
5827
|
-
ngAfterViewChecked() {
|
|
5828
|
-
if (!this.virtualScroll)
|
|
5829
|
-
return;
|
|
5830
|
-
if (!this.defScrollHeightPx && this.defScrollHeight === 'flex') {
|
|
5831
|
-
this.defScrollHeightPx = this.scrollableBody.clientHeight;
|
|
5832
|
-
this.defScrollHeightPxInitial = this.defScrollHeightPx;
|
|
5833
|
-
this.cdRef.detectChanges();
|
|
5834
|
-
}
|
|
5835
|
-
if (!this.virtualScrollItemSize) {
|
|
5836
|
-
this._recalcVirtualHeight();
|
|
5837
|
-
this.cdRef.detectChanges();
|
|
5838
|
-
}
|
|
5839
|
-
}
|
|
5840
6112
|
_setMinWidthOverall() {
|
|
5841
6113
|
if (this.minWidthForBodyOnly || !this.minWidth || !this.primengTreeTable)
|
|
5842
6114
|
return;
|
|
@@ -5853,37 +6125,20 @@ class CpsTreeTableComponent {
|
|
|
5853
6125
|
const scrollableWrapper = this.primengTreeTable.el?.nativeElement?.querySelector('.p-treetable-scrollable-wrapper');
|
|
5854
6126
|
if (scrollableWrapper)
|
|
5855
6127
|
scrollableWrapper.style.minWidth = this.minWidth;
|
|
6128
|
+
if (!this.scrollable) {
|
|
6129
|
+
const tableWrapper = this.primengTreeTable.el?.nativeElement?.querySelector('.p-treetable-wrapper');
|
|
6130
|
+
if (tableWrapper)
|
|
6131
|
+
tableWrapper.style.minWidth = this.minWidth;
|
|
6132
|
+
}
|
|
5856
6133
|
const treeTableHeader = this.primengTreeTable.el?.nativeElement?.querySelector('.p-treetable-header');
|
|
5857
6134
|
if (treeTableHeader)
|
|
5858
6135
|
treeTableHeader.style.minWidth = this.minWidth;
|
|
5859
6136
|
}
|
|
5860
|
-
ngOnChanges(changes) {
|
|
5861
|
-
if (this.loading) {
|
|
5862
|
-
this.clearSelection();
|
|
5863
|
-
if (this.clearGlobalFilterOnLoading)
|
|
5864
|
-
this.clearGlobalFilter();
|
|
5865
|
-
}
|
|
5866
|
-
if (this.virtualScrollItemHeight)
|
|
5867
|
-
this.virtualScrollItemSize = this.virtualScrollItemHeight;
|
|
5868
|
-
this._setMinWidthOverall();
|
|
5869
|
-
const dataChanges = changes?.data;
|
|
5870
|
-
if (dataChanges?.previousValue !== dataChanges?.currentValue) {
|
|
5871
|
-
this.clearSelection();
|
|
5872
|
-
}
|
|
5873
|
-
}
|
|
5874
|
-
ngOnDestroy() {
|
|
5875
|
-
this.resizeObserver?.disconnect();
|
|
5876
|
-
if (this.virtualScroll)
|
|
5877
|
-
window.removeEventListener('resize', this._onWindowResize.bind(this));
|
|
5878
|
-
}
|
|
5879
|
-
clearGlobalFilter() {
|
|
5880
|
-
this.globalFilterComp?.clear();
|
|
5881
|
-
}
|
|
5882
6137
|
_onWindowResize() {
|
|
5883
6138
|
// if (this.defScrollHeight === 'flex')
|
|
5884
6139
|
// this.defScrollHeightPx = this.scrollableBody.clientHeight;
|
|
5885
|
-
clearTimeout(this.
|
|
5886
|
-
this.
|
|
6140
|
+
clearTimeout(this._windowResizeDebouncer);
|
|
6141
|
+
this._windowResizeDebouncer = setTimeout(() => {
|
|
5887
6142
|
this._recalcVirtualHeight();
|
|
5888
6143
|
}, 100);
|
|
5889
6144
|
}
|
|
@@ -5918,10 +6173,9 @@ class CpsTreeTableComponent {
|
|
|
5918
6173
|
}
|
|
5919
6174
|
return classesList.join(' ');
|
|
5920
6175
|
}
|
|
5921
|
-
onSortFunction(event) {
|
|
5922
|
-
this.customSortFunction.emit(event);
|
|
5923
|
-
}
|
|
5924
6176
|
_recalcVirtualHeight() {
|
|
6177
|
+
if (!this._scrollbarVisible && this.virtualScroll)
|
|
6178
|
+
this._scrollableBody.style.setProperty('overflow', 'hidden', 'important');
|
|
5925
6179
|
setTimeout(() => {
|
|
5926
6180
|
if (this.virtualScroll && this.defScrollHeight) {
|
|
5927
6181
|
this._updateVirtualScrollItemSize();
|
|
@@ -5934,58 +6188,20 @@ class CpsTreeTableComponent {
|
|
|
5934
6188
|
else {
|
|
5935
6189
|
const curHeight = this.virtualScrollItemSize * itemsLen + 2;
|
|
5936
6190
|
if (this.defScrollHeight === 'flex') {
|
|
5937
|
-
if (curHeight >= this.
|
|
6191
|
+
if (curHeight >= this._defScrollHeightPxInitial) {
|
|
5938
6192
|
this.scrollHeight = 'flex';
|
|
5939
|
-
this.
|
|
6193
|
+
this._scrollableBody.style.height = '100%';
|
|
5940
6194
|
this.cdRef.markForCheck();
|
|
5941
6195
|
return;
|
|
5942
6196
|
}
|
|
5943
6197
|
}
|
|
5944
6198
|
this.scrollHeight =
|
|
5945
|
-
Math.min(this.
|
|
6199
|
+
Math.min(this._defScrollHeightPx, curHeight) + 'px';
|
|
5946
6200
|
}
|
|
5947
6201
|
this.cdRef.markForCheck();
|
|
5948
6202
|
}
|
|
5949
6203
|
});
|
|
5950
6204
|
}
|
|
5951
|
-
onFilterGlobal(value) {
|
|
5952
|
-
this.primengTreeTable.filterGlobal(value, 'contains');
|
|
5953
|
-
}
|
|
5954
|
-
onClickAdditionalBtnOnSelect() {
|
|
5955
|
-
this.additionalBtnOnSelectClicked.emit(this.selectedRows);
|
|
5956
|
-
}
|
|
5957
|
-
onClickActionBtn() {
|
|
5958
|
-
this.actionBtnClicked.emit();
|
|
5959
|
-
}
|
|
5960
|
-
onReloadData() {
|
|
5961
|
-
if (this.dataReloadBtnDisabled)
|
|
5962
|
-
return;
|
|
5963
|
-
this.dataReloadBtnClicked.emit();
|
|
5964
|
-
}
|
|
5965
|
-
onColumnsToggle(event) {
|
|
5966
|
-
if (this.columnsToggleBtnDisabled)
|
|
5967
|
-
return;
|
|
5968
|
-
this.colToggleMenu?.toggle(event);
|
|
5969
|
-
}
|
|
5970
|
-
removeSelected() {
|
|
5971
|
-
this.selectedRows.forEach((row) => this._removeNodeFromData(row, false));
|
|
5972
|
-
this.data = [...this.data];
|
|
5973
|
-
this.rowsRemoved.emit(this.selectedRows);
|
|
5974
|
-
this.clearSelection();
|
|
5975
|
-
this._recalcVirtualHeight();
|
|
5976
|
-
}
|
|
5977
|
-
clearSelection() {
|
|
5978
|
-
this.selectedRows = [];
|
|
5979
|
-
}
|
|
5980
|
-
onEditRowClicked(node) {
|
|
5981
|
-
this.editRowBtnClicked.emit(node);
|
|
5982
|
-
}
|
|
5983
|
-
onRemoveRowClicked(node) {
|
|
5984
|
-
this.selectedRows = this.selectedRows.filter((v) => v !== node);
|
|
5985
|
-
this._removeNodeFromData(node);
|
|
5986
|
-
this.rowsRemoved.emit([node]);
|
|
5987
|
-
this._recalcVirtualHeight();
|
|
5988
|
-
}
|
|
5989
6205
|
_removeNodeFromData(nodeToRemove, single = true) {
|
|
5990
6206
|
const _findTopSortOrder = (_node) => {
|
|
5991
6207
|
if (!_node)
|
|
@@ -6032,10 +6248,63 @@ class CpsTreeTableComponent {
|
|
|
6032
6248
|
}
|
|
6033
6249
|
}
|
|
6034
6250
|
}
|
|
6251
|
+
clearGlobalFilter() {
|
|
6252
|
+
this.globalFilterComp?.clear();
|
|
6253
|
+
}
|
|
6254
|
+
onSortFunction(event) {
|
|
6255
|
+
this.customSortFunction.emit(event);
|
|
6256
|
+
}
|
|
6257
|
+
onFilterGlobal(value) {
|
|
6258
|
+
this.primengTreeTable.filterGlobal(value, 'contains');
|
|
6259
|
+
}
|
|
6260
|
+
onClickAdditionalBtnOnSelect() {
|
|
6261
|
+
this.additionalBtnOnSelectClicked.emit(this.selectedRows);
|
|
6262
|
+
}
|
|
6263
|
+
onClickActionBtn() {
|
|
6264
|
+
this.actionBtnClicked.emit();
|
|
6265
|
+
}
|
|
6266
|
+
onReloadData() {
|
|
6267
|
+
if (this.dataReloadBtnDisabled)
|
|
6268
|
+
return;
|
|
6269
|
+
this.dataReloadBtnClicked.emit();
|
|
6270
|
+
}
|
|
6271
|
+
onColumnsToggle(event) {
|
|
6272
|
+
if (this.columnsToggleBtnDisabled)
|
|
6273
|
+
return;
|
|
6274
|
+
this.colToggleMenu?.toggle(event);
|
|
6275
|
+
}
|
|
6276
|
+
removeSelected() {
|
|
6277
|
+
this.selectedRows.forEach((row) => this._removeNodeFromData(row, false));
|
|
6278
|
+
this.data = [...this.data];
|
|
6279
|
+
this.rowsRemoved.emit(this.selectedRows);
|
|
6280
|
+
this.clearSelection();
|
|
6281
|
+
this._recalcVirtualHeight();
|
|
6282
|
+
setTimeout(() => {
|
|
6283
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6284
|
+
});
|
|
6285
|
+
}
|
|
6286
|
+
clearSelection() {
|
|
6287
|
+
this.selectedRows = [];
|
|
6288
|
+
}
|
|
6289
|
+
onEditRowClicked(node) {
|
|
6290
|
+
this.editRowBtnClicked.emit(node);
|
|
6291
|
+
}
|
|
6292
|
+
onRemoveRowClicked(node) {
|
|
6293
|
+
this.selectedRows = this.selectedRows.filter((v) => v !== node);
|
|
6294
|
+
this._removeNodeFromData(node);
|
|
6295
|
+
this.rowsRemoved.emit([node]);
|
|
6296
|
+
this._recalcVirtualHeight();
|
|
6297
|
+
setTimeout(() => {
|
|
6298
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6299
|
+
});
|
|
6300
|
+
}
|
|
6035
6301
|
toggleAllColumns() {
|
|
6036
6302
|
this.selectedColumns =
|
|
6037
6303
|
this.selectedColumns.length < this.columns.length ? this.columns : [];
|
|
6038
6304
|
this.columnsSelected.emit(this.selectedColumns);
|
|
6305
|
+
setTimeout(() => {
|
|
6306
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6307
|
+
});
|
|
6039
6308
|
}
|
|
6040
6309
|
isColumnSelected(col) {
|
|
6041
6310
|
return !!find(this.selectedColumns, (item) => isEqual(item, col));
|
|
@@ -6072,6 +6341,9 @@ class CpsTreeTableComponent {
|
|
|
6072
6341
|
pageCount: Math.ceil(this.getPageCount())
|
|
6073
6342
|
};
|
|
6074
6343
|
this.pageChanged.emit(state);
|
|
6344
|
+
setTimeout(() => {
|
|
6345
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6346
|
+
});
|
|
6075
6347
|
}
|
|
6076
6348
|
onLazyLoaded(event) {
|
|
6077
6349
|
this.lazyLoaded.emit(event);
|
|
@@ -6079,10 +6351,16 @@ class CpsTreeTableComponent {
|
|
|
6079
6351
|
onNodeExpanded(event) {
|
|
6080
6352
|
this.nodeExpanded.emit(event);
|
|
6081
6353
|
this._recalcVirtualHeight();
|
|
6354
|
+
setTimeout(() => {
|
|
6355
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6356
|
+
});
|
|
6082
6357
|
}
|
|
6083
6358
|
onNodeCollapsed(event) {
|
|
6084
6359
|
this.nodeCollapsed.emit(event);
|
|
6085
6360
|
this._recalcVirtualHeight();
|
|
6361
|
+
setTimeout(() => {
|
|
6362
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6363
|
+
});
|
|
6086
6364
|
}
|
|
6087
6365
|
onNodeSelected(event) {
|
|
6088
6366
|
this.nodeSelected.emit(event);
|
|
@@ -6092,10 +6370,16 @@ class CpsTreeTableComponent {
|
|
|
6092
6370
|
}
|
|
6093
6371
|
onSort(event) {
|
|
6094
6372
|
this.sorted.emit(event);
|
|
6373
|
+
setTimeout(() => {
|
|
6374
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6375
|
+
});
|
|
6095
6376
|
}
|
|
6096
6377
|
onFilter(event) {
|
|
6097
6378
|
this.filtered.emit(event);
|
|
6098
6379
|
this._recalcVirtualHeight();
|
|
6380
|
+
setTimeout(() => {
|
|
6381
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6382
|
+
});
|
|
6099
6383
|
}
|
|
6100
6384
|
onSelectColumn(col) {
|
|
6101
6385
|
let res = [];
|
|
@@ -6112,13 +6396,16 @@ class CpsTreeTableComponent {
|
|
|
6112
6396
|
}
|
|
6113
6397
|
this.selectedColumns = res;
|
|
6114
6398
|
this.columnsSelected.emit(this.selectedColumns);
|
|
6399
|
+
setTimeout(() => {
|
|
6400
|
+
this._calcAutoLayoutHeaderWidths(true);
|
|
6401
|
+
});
|
|
6115
6402
|
}
|
|
6116
6403
|
onSelectionChanged(selection) {
|
|
6117
6404
|
this.selectionChanged.emit(selection);
|
|
6118
6405
|
}
|
|
6119
6406
|
}
|
|
6120
6407
|
CpsTreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6121
|
-
CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", 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", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsRemoved: "rowsRemoved", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
|
|
6408
|
+
CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", 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", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsRemoved: "rowsRemoved", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
|
|
6122
6409
|
TreeTableService,
|
|
6123
6410
|
{
|
|
6124
6411
|
provide: TreeTable,
|
|
@@ -6126,7 +6413,7 @@ CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
6126
6413
|
// eslint-disable-next-line no-use-before-define
|
|
6127
6414
|
deps: [CpsTreeTableComponent]
|
|
6128
6415
|
}
|
|
6129
|
-
], 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 }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <span *ngIf=\"i === 0\" style=\"display: flex\">\n <p-treeTableToggler [rowNode]=\"rowNode\"> </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </span>\n <ng-container *ngIf=\"i > 0\">{{\n rowData[col[colFieldName]]\n }}</ng-container>\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-view{height:unset}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;overflow:hidden}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link: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-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:var(--cps-color-highlight-active);margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background: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 sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background: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:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i1$3.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$3.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i1$3.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i1$3.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i1$3.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6416
|
+
], 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=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th *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 <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td [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 <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{ rowData[col[colFieldName]] }}\n </td>\n <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n </ng-container>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-view{height:unset}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;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:#ffffff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color: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;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:transparent}: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-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-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(even){background:#ffffff}: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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background: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: "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", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "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", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: 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", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6130
6417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
|
|
6131
6418
|
type: Component,
|
|
6132
6419
|
args: [{ selector: 'cps-tree-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -6144,6 +6431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6144
6431
|
AngleRightIcon,
|
|
6145
6432
|
AngleDoubleRightIcon,
|
|
6146
6433
|
CpsTreeTableColumnSortableDirective,
|
|
6434
|
+
CpsTreeTableHeaderSelectableDirective,
|
|
6435
|
+
CpsTreeTableRowSelectableDirective,
|
|
6436
|
+
CpsTreetableRowTogglerDirective,
|
|
6147
6437
|
TreeTableUnsortDirective,
|
|
6148
6438
|
TableRowMenuComponent
|
|
6149
6439
|
], providers: [
|
|
@@ -6154,7 +6444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6154
6444
|
// eslint-disable-next-line no-use-before-define
|
|
6155
6445
|
deps: [CpsTreeTableComponent]
|
|
6156
6446
|
}
|
|
6157
|
-
], 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 }\"\n [value]=\"data\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td style=\"width: 55px\" *ngIf=\"selectable\">\n <p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns; let i = index\">\n <span *ngIf=\"i === 0\" style=\"display: flex\">\n <p-treeTableToggler [rowNode]=\"rowNode\"> </p-treeTableToggler>\n {{ rowData[col[colFieldName]] }}\n </span>\n <ng-container *ngIf=\"i > 0\">{{\n rowData[col[colFieldName]]\n }}</ng-container>\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-view{height:unset}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:700;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;overflow:hidden}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link: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-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-treetable .p-sortable-column .p-column-title,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-treetable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:var(--cps-color-highlight-active);margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background: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 sortalticon{opacity:0}:host ::ng-deep p-treetablesorticon{display:inline-flex;align-items:baseline}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep td:has(p-treetablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-treetableheadercheckbox){text-align:center!important;width:55px!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background: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:#efe4e7}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
6447
|
+
], 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=\"equals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-treetable-tbar-left\">\n <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-treetable-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div\n *ngIf=\"showDataReloadBtn\"\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n <th *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 <th\n *ngFor=\"let col of columns\"\n [cpsTTColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th class=\"cps-treetable-row-menu-cell\" *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n <td [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 <ng-container *ngFor=\"let col of columns; let i = index\">\n <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n {{ rowData[col[colFieldName]] }}\n </td>\n <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n </ng-container>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\">\n </table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <AngleDoubleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <AngleLeftIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <AngleRightIcon />\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <AngleDoubleRightIcon />\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-view{height:unset}:host ::ng-deep .cps-treetable-bottom-bordered>.p-treetable-scrollable-wrapper{border-bottom:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;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:#ffffff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color: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;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:transparent}: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-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-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(even){background:#ffffff}: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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background: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"] }]
|
|
6158
6448
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
6159
6449
|
type: Input
|
|
6160
6450
|
}], columns: [{
|
|
@@ -6167,6 +6457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6167
6457
|
type: Input
|
|
6168
6458
|
}], minWidthForBodyOnly: [{
|
|
6169
6459
|
type: Input
|
|
6460
|
+
}], autoLayout: [{
|
|
6461
|
+
type: Input
|
|
6170
6462
|
}], striped: [{
|
|
6171
6463
|
type: Input
|
|
6172
6464
|
}], bordered: [{
|
|
@@ -6433,94 +6725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6433
6725
|
type: Input
|
|
6434
6726
|
}] } });
|
|
6435
6727
|
|
|
6436
|
-
class CpsTreetableRowTogglerDirective {
|
|
6437
|
-
constructor(elementRef, viewContainerRef) {
|
|
6438
|
-
this.elementRef = elementRef;
|
|
6439
|
-
this.viewContainerRef = viewContainerRef;
|
|
6440
|
-
this.togglerCompRef =
|
|
6441
|
-
this.viewContainerRef.createComponent(TreeTableToggler);
|
|
6442
|
-
}
|
|
6443
|
-
ngOnInit() {
|
|
6444
|
-
this.togglerCompRef.setInput('rowNode', this.rowNode);
|
|
6445
|
-
const spanElement = document.createElement('span');
|
|
6446
|
-
spanElement.style.display = 'flex';
|
|
6447
|
-
while (this.elementRef.nativeElement.firstChild) {
|
|
6448
|
-
spanElement.appendChild(this.elementRef.nativeElement.firstChild);
|
|
6449
|
-
}
|
|
6450
|
-
this.elementRef.nativeElement.appendChild(spanElement);
|
|
6451
|
-
spanElement.prepend(this.togglerCompRef.location.nativeElement);
|
|
6452
|
-
}
|
|
6453
|
-
ngOnDestroy() {
|
|
6454
|
-
this.togglerCompRef.destroy();
|
|
6455
|
-
this.viewContainerRef.clear();
|
|
6456
|
-
}
|
|
6457
|
-
}
|
|
6458
|
-
CpsTreetableRowTogglerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
6459
|
-
CpsTreetableRowTogglerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 });
|
|
6460
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
|
|
6461
|
-
type: Directive,
|
|
6462
|
-
args: [{
|
|
6463
|
-
standalone: true,
|
|
6464
|
-
selector: '[cpsTTRowToggler]'
|
|
6465
|
-
}]
|
|
6466
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { rowNode: [{
|
|
6467
|
-
type: Input,
|
|
6468
|
-
args: ['cpsTTRowToggler']
|
|
6469
|
-
}] } });
|
|
6470
|
-
|
|
6471
|
-
class CpsTreeTableHeaderSelectableDirective {
|
|
6472
|
-
constructor(elementRef, viewContainerRef) {
|
|
6473
|
-
this.elementRef = elementRef;
|
|
6474
|
-
this.viewContainerRef = viewContainerRef;
|
|
6475
|
-
this.checkboxCompRef =
|
|
6476
|
-
this.viewContainerRef.createComponent(TTHeaderCheckbox);
|
|
6477
|
-
}
|
|
6478
|
-
ngOnInit() {
|
|
6479
|
-
this.elementRef.nativeElement.appendChild(this.checkboxCompRef.location.nativeElement);
|
|
6480
|
-
}
|
|
6481
|
-
ngOnDestroy() {
|
|
6482
|
-
this.checkboxCompRef.destroy();
|
|
6483
|
-
this.viewContainerRef.clear();
|
|
6484
|
-
}
|
|
6485
|
-
}
|
|
6486
|
-
CpsTreeTableHeaderSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
6487
|
-
CpsTreeTableHeaderSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTTHdrSelectable]", ngImport: i0 });
|
|
6488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, decorators: [{
|
|
6489
|
-
type: Directive,
|
|
6490
|
-
args: [{
|
|
6491
|
-
standalone: true,
|
|
6492
|
-
selector: '[cpsTTHdrSelectable]'
|
|
6493
|
-
}]
|
|
6494
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
|
|
6495
|
-
|
|
6496
|
-
class CpsTreeTableRowSelectableDirective {
|
|
6497
|
-
constructor(elementRef, viewContainerRef) {
|
|
6498
|
-
this.elementRef = elementRef;
|
|
6499
|
-
this.viewContainerRef = viewContainerRef;
|
|
6500
|
-
this.checkboxCompRef = this.viewContainerRef.createComponent(TTCheckbox);
|
|
6501
|
-
}
|
|
6502
|
-
ngOnInit() {
|
|
6503
|
-
this.checkboxCompRef.setInput('value', this.value);
|
|
6504
|
-
this.elementRef.nativeElement.appendChild(this.checkboxCompRef.location.nativeElement);
|
|
6505
|
-
}
|
|
6506
|
-
ngOnDestroy() {
|
|
6507
|
-
this.checkboxCompRef.destroy();
|
|
6508
|
-
this.viewContainerRef.clear();
|
|
6509
|
-
}
|
|
6510
|
-
}
|
|
6511
|
-
CpsTreeTableRowSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
6512
|
-
CpsTreeTableRowSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableRowSelectableDirective, isStandalone: true, selector: "[cpsTTRowSelectable]", inputs: { value: ["cpsTTRowSelectable", "value"] }, ngImport: i0 });
|
|
6513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, decorators: [{
|
|
6514
|
-
type: Directive,
|
|
6515
|
-
args: [{
|
|
6516
|
-
standalone: true,
|
|
6517
|
-
selector: '[cpsTTRowSelectable]'
|
|
6518
|
-
}]
|
|
6519
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { value: [{
|
|
6520
|
-
type: Input,
|
|
6521
|
-
args: ['cpsTTRowSelectable']
|
|
6522
|
-
}] } });
|
|
6523
|
-
|
|
6524
6728
|
class CpsTagComponent {
|
|
6525
6729
|
set value(value) {
|
|
6526
6730
|
this._value = value;
|
|
@@ -6661,7 +6865,7 @@ class CpsPaginatorComponent {
|
|
|
6661
6865
|
}
|
|
6662
6866
|
}
|
|
6663
6867
|
CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6664
|
-
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$
|
|
6868
|
+
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
6665
6869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
|
|
6666
6870
|
type: Component,
|
|
6667
6871
|
args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|