cps-ui-kit 0.147.0 → 0.149.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 +32 -11
- package/esm2020/lib/components/cps-button-toggle/cps-button-toggle.component.mjs +4 -5
- package/esm2020/lib/components/cps-select/cps-select.component.mjs +13 -9
- package/esm2020/lib/components/cps-table/components/internal/table-column-filter-constraint/table-column-filter-constraint.component.mjs +1 -1
- package/esm2020/lib/components/cps-table/cps-table.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-table/cps-tree-table.component.mjs +3 -3
- package/esm2020/lib/pipes/internal/check-option-selected.pipe.mjs +3 -3
- package/fesm2015/cps-ui-kit.mjs +51 -27
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +50 -26
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts +12 -1
- package/lib/components/cps-button-toggle/cps-button-toggle.component.d.ts +1 -1
- package/lib/components/cps-select/cps-select.component.d.ts +1 -0
- package/package.json +1 -1
package/fesm2015/cps-ui-kit.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional
|
|
|
5
5
|
import { Subscription, fromEvent, debounceTime, distinctUntilChanged, Subject, take } from 'rxjs';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
|
-
import { isEqual
|
|
8
|
+
import { isEqual } from 'lodash-es';
|
|
9
9
|
import * as i3 from 'primeng/virtualscroller';
|
|
10
10
|
import { VirtualScrollerModule } from 'primeng/virtualscroller';
|
|
11
11
|
import { trigger, state, style, transition, animate, animation, useAnimation } from '@angular/animations';
|
|
@@ -1186,7 +1186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1186
1186
|
class CheckOptionSelectedPipe {
|
|
1187
1187
|
transform(option, value, multiple, returnObject, optionValue) {
|
|
1188
1188
|
function includes(array, val) {
|
|
1189
|
-
return array ?
|
|
1189
|
+
return (array === null || array === void 0 ? void 0 : array.some((item) => isEqual(item, val))) || false;
|
|
1190
1190
|
}
|
|
1191
1191
|
return multiple
|
|
1192
1192
|
? returnObject
|
|
@@ -1987,9 +1987,7 @@ class CpsSelectComponent {
|
|
|
1987
1987
|
inline: 'center'
|
|
1988
1988
|
});
|
|
1989
1989
|
}
|
|
1990
|
-
else if (this.virtualScroll &&
|
|
1991
|
-
this.value !== undefined &&
|
|
1992
|
-
this.value !== null) {
|
|
1990
|
+
else if (this.virtualScroll && !this.isEmptyValue()) {
|
|
1993
1991
|
let v;
|
|
1994
1992
|
if (this.multiple) {
|
|
1995
1993
|
if (this.value.length > 0) {
|
|
@@ -2014,7 +2012,7 @@ class CpsSelectComponent {
|
|
|
2014
2012
|
}
|
|
2015
2013
|
select(option, byValue) {
|
|
2016
2014
|
function includes(array, val) {
|
|
2017
|
-
return array ?
|
|
2015
|
+
return (array === null || array === void 0 ? void 0 : array.some((item) => isEqual(item, val))) || false;
|
|
2018
2016
|
}
|
|
2019
2017
|
const val = byValue
|
|
2020
2018
|
? option
|
|
@@ -2207,7 +2205,7 @@ class CpsSelectComponent {
|
|
|
2207
2205
|
clear(event) {
|
|
2208
2206
|
var _a;
|
|
2209
2207
|
event.stopPropagation();
|
|
2210
|
-
if ((!this.multiple && this.
|
|
2208
|
+
if ((!this.multiple && !this.isEmptyValue()) ||
|
|
2211
2209
|
(this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
|
|
2212
2210
|
if (this.openOnClear) {
|
|
2213
2211
|
this._toggleOptions(true);
|
|
@@ -2229,9 +2227,15 @@ class CpsSelectComponent {
|
|
|
2229
2227
|
(_b = (_a = this.selectContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
|
|
2230
2228
|
this._toggleOptions(true);
|
|
2231
2229
|
}
|
|
2230
|
+
isEmptyValue() {
|
|
2231
|
+
return (this.value === null ||
|
|
2232
|
+
this.value === undefined ||
|
|
2233
|
+
(typeof this.value === 'string' && this.value.trim() === '') ||
|
|
2234
|
+
Number.isNaN(this.value));
|
|
2235
|
+
}
|
|
2232
2236
|
}
|
|
2233
2237
|
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 });
|
|
2234
|
-
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", keepInitialOrder: "keepInitialOrder", 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=\"\n ((value === undefined || value === null) && !multiple) ||\n (value?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"\n (value !== undefined && value !== null && !multiple) ||\n (value?.length > 0 && multiple)\n \">\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) ||\n (!multiple && value !== null && value !== undefined)))\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"] }] });
|
|
2238
|
+
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", keepInitialOrder: "keepInitialOrder", 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=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n \">\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 && !isEmptyValue())))\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"] }] });
|
|
2235
2239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
2236
2240
|
type: Component,
|
|
2237
2241
|
args: [{ standalone: true, imports: [
|
|
@@ -2246,7 +2250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2246
2250
|
CheckOptionSelectedPipe,
|
|
2247
2251
|
VirtualScrollerModule,
|
|
2248
2252
|
CpsMenuComponent
|
|
2249
|
-
], 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=\"\n ((value === undefined || value === null) && !multiple) ||\n (value?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"\n (value !== undefined && value !== null && !multiple) ||\n (value?.length > 0 && multiple)\n \">\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) ||\n (!multiple && value !== null && value !== undefined)))\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"] }]
|
|
2253
|
+
], 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=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n \">\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 && !isEmptyValue())))\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"] }]
|
|
2250
2254
|
}], ctorParameters: function () {
|
|
2251
2255
|
return [{ type: i1.NgControl, decorators: [{
|
|
2252
2256
|
type: Self
|
|
@@ -3090,6 +3094,11 @@ class CpsAutocompleteComponent {
|
|
|
3090
3094
|
* @group Props
|
|
3091
3095
|
*/
|
|
3092
3096
|
this.selectAll = true;
|
|
3097
|
+
/**
|
|
3098
|
+
* Defines whether the chevron icon should be displayed.
|
|
3099
|
+
* @group Props
|
|
3100
|
+
*/
|
|
3101
|
+
this.showChevron = true;
|
|
3093
3102
|
/**
|
|
3094
3103
|
* When selecting elements, they will appear in a form of a chip.
|
|
3095
3104
|
* @group Props
|
|
@@ -3165,6 +3174,11 @@ class CpsAutocompleteComponent {
|
|
|
3165
3174
|
* @group Props
|
|
3166
3175
|
*/
|
|
3167
3176
|
this.emptyMessage = 'No results found';
|
|
3177
|
+
/**
|
|
3178
|
+
* Defines whether the empty message should be displayed.
|
|
3179
|
+
* @group Props
|
|
3180
|
+
*/
|
|
3181
|
+
this.showEmptyMessage = true;
|
|
3168
3182
|
/**
|
|
3169
3183
|
* Whether only the elements within scrollable area should be added into the DOM.
|
|
3170
3184
|
* @group Props
|
|
@@ -3264,7 +3278,7 @@ class CpsAutocompleteComponent {
|
|
|
3264
3278
|
}
|
|
3265
3279
|
select(option, byValue) {
|
|
3266
3280
|
function includes(array, val) {
|
|
3267
|
-
return array ?
|
|
3281
|
+
return (array === null || array === void 0 ? void 0 : array.some((item) => isEqual(item, val))) || false;
|
|
3268
3282
|
}
|
|
3269
3283
|
this.backspaceClickedOnce = false;
|
|
3270
3284
|
const val = byValue
|
|
@@ -3354,7 +3368,7 @@ class CpsAutocompleteComponent {
|
|
|
3354
3368
|
clear(event) {
|
|
3355
3369
|
var _a;
|
|
3356
3370
|
event.stopPropagation();
|
|
3357
|
-
if ((!this.multiple && this.
|
|
3371
|
+
if ((!this.multiple && !this.isEmptyValue()) ||
|
|
3358
3372
|
(this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
|
|
3359
3373
|
if (this.openOnClear) {
|
|
3360
3374
|
this._toggleOptions(true);
|
|
@@ -3376,6 +3390,7 @@ class CpsAutocompleteComponent {
|
|
|
3376
3390
|
this._checkErrors();
|
|
3377
3391
|
}
|
|
3378
3392
|
onBeforeOptionsHidden() {
|
|
3393
|
+
this._confirmInput(this.inputText || '');
|
|
3379
3394
|
this._closeAndClear();
|
|
3380
3395
|
}
|
|
3381
3396
|
onBoxClick() {
|
|
@@ -3386,8 +3401,10 @@ class CpsAutocompleteComponent {
|
|
|
3386
3401
|
if (!this.isOpened)
|
|
3387
3402
|
this.filteredOptions = this.options;
|
|
3388
3403
|
}
|
|
3389
|
-
this.focus();
|
|
3390
3404
|
this._dehighlightOption();
|
|
3405
|
+
setTimeout(() => {
|
|
3406
|
+
this.focus();
|
|
3407
|
+
});
|
|
3391
3408
|
}
|
|
3392
3409
|
onContainerKeyDown(event) {
|
|
3393
3410
|
const code = event.keyCode;
|
|
@@ -3497,9 +3514,7 @@ class CpsAutocompleteComponent {
|
|
|
3497
3514
|
inline: 'center'
|
|
3498
3515
|
});
|
|
3499
3516
|
}
|
|
3500
|
-
else if (this.virtualScroll &&
|
|
3501
|
-
this.value !== undefined &&
|
|
3502
|
-
this.value !== null) {
|
|
3517
|
+
else if (this.virtualScroll && !this.isEmptyValue()) {
|
|
3503
3518
|
let v;
|
|
3504
3519
|
if (this.multiple) {
|
|
3505
3520
|
if (this.value.length > 0) {
|
|
@@ -3546,7 +3561,7 @@ class CpsAutocompleteComponent {
|
|
|
3546
3561
|
this.valueChanged.emit(value);
|
|
3547
3562
|
}
|
|
3548
3563
|
_getValueLabel() {
|
|
3549
|
-
return this.
|
|
3564
|
+
return !this.isEmptyValue()
|
|
3550
3565
|
? this.returnObject
|
|
3551
3566
|
? this.value[this.optionLabel]
|
|
3552
3567
|
: this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
|
|
@@ -3662,9 +3677,15 @@ class CpsAutocompleteComponent {
|
|
|
3662
3677
|
this.focusInput();
|
|
3663
3678
|
}, 0);
|
|
3664
3679
|
}
|
|
3680
|
+
isEmptyValue() {
|
|
3681
|
+
return (this.value === null ||
|
|
3682
|
+
this.value === undefined ||
|
|
3683
|
+
(typeof this.value === 'string' && this.value.trim() === '') ||
|
|
3684
|
+
Number.isNaN(this.value));
|
|
3685
|
+
}
|
|
3665
3686
|
}
|
|
3666
3687
|
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 });
|
|
3667
|
-
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", keepInitialOrder: "keepInitialOrder", 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 !== undefined && value !== null && !multiple) ||\n (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) ||\n (!multiple && value !== undefined && value !== null)))\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 === undefined || value === null) && !multiple) ||\n (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"] }] });
|
|
3688
|
+
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", showChevron: "showChevron", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", 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 (!multiple && !isEmptyValue()) || (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 && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\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=\"showEmptyMessage && 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 (!multiple && isEmptyValue()) || (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"] }] });
|
|
3668
3689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
3669
3690
|
type: Component,
|
|
3670
3691
|
args: [{ standalone: true, imports: [
|
|
@@ -3678,7 +3699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3678
3699
|
CheckOptionSelectedPipe,
|
|
3679
3700
|
VirtualScrollerModule,
|
|
3680
3701
|
CpsMenuComponent
|
|
3681
|
-
], 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 !== undefined && value !== null && !multiple) ||\n (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) ||\n (!multiple && value !== undefined && value !== null)))\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 === undefined || value === null) && !multiple) ||\n (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"] }]
|
|
3702
|
+
], 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 (!multiple && !isEmptyValue()) || (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 && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n *ngIf=\"showChevron\"\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\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=\"showEmptyMessage && 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 (!multiple && isEmptyValue()) || (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"] }]
|
|
3682
3703
|
}], ctorParameters: function () {
|
|
3683
3704
|
return [{ type: i1.NgControl, decorators: [{
|
|
3684
3705
|
type: Self
|
|
@@ -3701,6 +3722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3701
3722
|
type: Input
|
|
3702
3723
|
}], selectAll: [{
|
|
3703
3724
|
type: Input
|
|
3725
|
+
}], showChevron: [{
|
|
3726
|
+
type: Input
|
|
3704
3727
|
}], chips: [{
|
|
3705
3728
|
type: Input
|
|
3706
3729
|
}], closableChips: [{
|
|
@@ -3731,6 +3754,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3731
3754
|
type: Input
|
|
3732
3755
|
}], emptyMessage: [{
|
|
3733
3756
|
type: Input
|
|
3757
|
+
}], showEmptyMessage: [{
|
|
3758
|
+
type: Input
|
|
3734
3759
|
}], virtualScroll: [{
|
|
3735
3760
|
type: Input
|
|
3736
3761
|
}], numToleratedItems: [{
|
|
@@ -3871,7 +3896,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
|
|
|
3871
3896
|
}
|
|
3872
3897
|
_select(option) {
|
|
3873
3898
|
function includes(array, val) {
|
|
3874
|
-
return array ?
|
|
3899
|
+
return (array === null || array === void 0 ? void 0 : array.some((item) => isEqual(item, val))) || false;
|
|
3875
3900
|
}
|
|
3876
3901
|
this.backspaceClickedOnce = false;
|
|
3877
3902
|
if (this.multiple) {
|
|
@@ -5481,7 +5506,7 @@ class CpsTableComponent {
|
|
|
5481
5506
|
this.columnsSelected.emit(this.selectedColumns);
|
|
5482
5507
|
}
|
|
5483
5508
|
isColumnSelected(col) {
|
|
5484
|
-
return
|
|
5509
|
+
return this.selectedColumns.some((item) => isEqual(item, col));
|
|
5485
5510
|
}
|
|
5486
5511
|
onSelectColumn(col) {
|
|
5487
5512
|
let res = [];
|
|
@@ -6303,8 +6328,8 @@ class CpsButtonToggleComponent {
|
|
|
6303
6328
|
writeValue(value) {
|
|
6304
6329
|
this.value = value;
|
|
6305
6330
|
}
|
|
6306
|
-
updateValueEvent(event) {
|
|
6307
|
-
var _a
|
|
6331
|
+
updateValueEvent(event, val) {
|
|
6332
|
+
var _a;
|
|
6308
6333
|
if (this.disabled)
|
|
6309
6334
|
return;
|
|
6310
6335
|
const check = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.checked) || false;
|
|
@@ -6312,7 +6337,6 @@ class CpsButtonToggleComponent {
|
|
|
6312
6337
|
event.target.checked = true;
|
|
6313
6338
|
return;
|
|
6314
6339
|
}
|
|
6315
|
-
const val = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || undefined;
|
|
6316
6340
|
if (this.multiple) {
|
|
6317
6341
|
let res = [];
|
|
6318
6342
|
if (!check) {
|
|
@@ -6375,7 +6399,7 @@ class CpsButtonToggleComponent {
|
|
|
6375
6399
|
setDisabledState(disabled) { }
|
|
6376
6400
|
}
|
|
6377
6401
|
CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
6378
|
-
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-
|
|
6402
|
+
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event, option.value)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
|
|
6379
6403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
6380
6404
|
type: Component,
|
|
6381
6405
|
args: [{ standalone: true, imports: [
|
|
@@ -6384,7 +6408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6384
6408
|
CpsInfoCircleComponent,
|
|
6385
6409
|
CpsIconComponent,
|
|
6386
6410
|
CpsTooltipDirective
|
|
6387
|
-
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-
|
|
6411
|
+
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <ng-container *ngFor=\"let option of options\">\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n </ng-container>\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n <label\n class=\"cps-btn-toggle-content-option\"\n *ngIf=\"tooltip\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event, option.value)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n <cps-icon\n *ngIf=\"option.icon\"\n [ngClass]=\"{ 'me-2': !!option.label }\"\n [icon]=\"option.icon\">\n </cps-icon>\n <span *ngIf=\"option.label\">{{ option.label }}</span>\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\n"] }]
|
|
6388
6412
|
}], ctorParameters: function () {
|
|
6389
6413
|
return [{ type: i1.NgControl, decorators: [{
|
|
6390
6414
|
type: Self
|
|
@@ -6524,7 +6548,7 @@ class TableColumnFilterConstraintComponent {
|
|
|
6524
6548
|
}
|
|
6525
6549
|
}
|
|
6526
6550
|
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 });
|
|
6527
|
-
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", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
6551
|
+
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", "showChevron", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
6528
6552
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
|
|
6529
6553
|
type: Component,
|
|
6530
6554
|
args: [{ selector: 'table-column-filter-constraint', standalone: true, imports: [
|
|
@@ -8395,7 +8419,7 @@ class CpsTreeTableComponent {
|
|
|
8395
8419
|
});
|
|
8396
8420
|
}
|
|
8397
8421
|
isColumnSelected(col) {
|
|
8398
|
-
return
|
|
8422
|
+
return this.selectedColumns.some((item) => isEqual(item, col));
|
|
8399
8423
|
}
|
|
8400
8424
|
onRowsPerPageChanged() {
|
|
8401
8425
|
if (this.resetPageOnRowsChange) {
|